Update linguijs monorepo to v6.12.0

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

.github/stale.yml

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

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ on:
   pull_request:
 
 env:
-  JAVA_VERSION: 21
+  JAVA_VERSION: 25
   DOCKER_BUILD_SUMMARY: false
 
 jobs:
@@ -16,63 +16,78 @@ jobs:
 
     strategy:
       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" ]
 
     runs-on: ${{ matrix.os }}
     steps:
       # Checkout
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           fetch-depth: 0
 
       # Setup
       - name: Set up GraalVM
-        uses: graalvm/setup-graalvm@01ed653ac833fe80569f1ef9f25585ba2811baab # v1
+        uses: graalvm/setup-graalvm@f70bc8032f90a104502824a54bcb94b6f01715bc # v1.6.8
         with:
           java-version: ${{ env.JAVA_VERSION }}
-          distribution: "graalvm"
+          distribution: "mandrel"
           cache: "maven"
 
+      - name: Set up NodeJS cache
+        uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
+        with:
+          cache: "npm"
+          cache-dependency-path: 'commafeed-client/package-lock.json'
+
       - name: Install Playwright dependencies
         run: sudo apt-get install -y libgbm1
         if: matrix.os != 'windows-latest'
 
       # Build & Test
       - name: Build with Maven
-        run: mvn --batch-mode --no-transfer-progress install -Pnative -P${{ matrix.database }} -DskipTests=${{ matrix.os == 'windows-latest' && matrix.database != 'h2' }}
+        run: mvn --batch-mode --no-transfer-progress install -Pnative -P${{ matrix.database }} -DskipITs=${{ matrix.os == 'windows-latest' && matrix.database != 'h2' }}
 
       # Build pages
-      - name: Copy generated markdown documentation to /documentation
+      - name: Create pages directory structure
-        run: mkdir documentation && cp ./commafeed-server/target/quarkus-generated-doc/config/commafeed-server.md ./documentation/README.md
+        run: mkdir -p target/pages/documentation/custom-css
 
-      - name: Generate pages
+      - name: Convert readme file to html
-        uses: wranders/markdown-to-pages-action@8d8a750832932ac785f5424c8c5543aa0b26bb9a # v1
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
+          source: README.md
-          out_path: target/pages
+          output: target/pages/index.html
-          files: |-
+
-            README.md
+      - name: Convert config documentation to html
-            documentation/README.md
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
-      
+        with:
+          source: commafeed-server/target/quarkus-generated-doc/config/commafeed-server.md
+          output: target/pages/documentation/index.html
+
+      - name: Convert custom css documentation to html
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
+        with:
+          source: documentation/CUSTOMCSS.md
+          output: target/pages/documentation/custom-css/index.html
+
       # Upload artifacts
       - name: Upload cross-platform app
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
-        if: matrix.os == 'ubuntu-latest' # we only need to upload the cross-platform artifact once per database
+        if: matrix.os == 'ubuntu-24.04' # we only need to upload the cross-platform artifact once per database
         with:
           name: commafeed-${{ matrix.database }}-jvm
           path: commafeed-server/target/commafeed-*.zip
 
       - name: Upload native executable
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
         with:
           name: commafeed-${{ matrix.database }}-${{ runner.os }}-${{ runner.arch }}
           path: commafeed-server/target/commafeed-*-runner*
 
       - name: Upload pages
-        uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
+        uses: actions/upload-pages-artifact@fc324d3547104276b827a68afc52ff2a11cc49c9 # v5.0.0
-        if: matrix.os == 'ubuntu-latest' && matrix.database == 'h2' # we only need to upload the pages once
+        if: matrix.os == 'ubuntu-24.04' && matrix.database == 'h2' # we only need to upload the pages once
         with:
           path: target/pages
 
@@ -89,23 +104,23 @@ jobs:
     steps:
       # Checkout
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           fetch-depth: 0
 
       # Setup
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3
+        uses: docker/setup-qemu-action@99012661954931238ded8c8b007157a8430204e1 # v4.4.0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3
+        uses: docker/setup-buildx-action@f87e5991a6d7451dcb8d9637bfbc97413f497069 # v4.4.1
 
       - name: Install required packages
         run: sudo apt-get install -y rename unzip
 
       # Prepare artifacts
       - name: Download artifacts
-        uses: actions/download-artifact@95815c38cf2ff2164869cbab79da8d1f422bc89e # v4
+        uses: actions/download-artifact@9000827ccba6bdab643e8b6fd33ac0654aef8333 # v8.0.2
         with:
           pattern: commafeed-${{ matrix.database }}-*
           path: ./artifacts
@@ -126,7 +141,7 @@ jobs:
 
       # Docker
       - name: Login to Container Registry
-        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3
+        uses: docker/login-action@81c6f93d4bc991e510b342a00b419b3bb4efc5c6 # v4.7.0
         if: ${{ env.DOCKERHUB_USERNAME != '' }}
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -134,7 +149,7 @@ jobs:
 
       ## build but don't push for PRs and renovate
       - name: Docker build - native
-        uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
         with:
           context: .
           file: commafeed-server/src/main/docker/Dockerfile.native
@@ -142,7 +157,7 @@ jobs:
           platforms: linux/amd64,linux/arm64/v8
 
       - name: Docker build - jvm
-        uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
         with:
           context: .
           file: commafeed-server/src/main/docker/Dockerfile.jvm
@@ -151,7 +166,7 @@ jobs:
 
       ## build and push tag
       - name: Docker build and push tag - native
-        uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
         if: ${{ github.ref_type == 'tag' }}
         with:
           context: .
@@ -163,7 +178,7 @@ jobs:
             athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}
 
       - name: Docker build and push tag - jvm
-        uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
         if: ${{ github.ref_type == 'tag' }}
         with:
           context: .
@@ -176,7 +191,7 @@ jobs:
 
       ## build and push master
       - name: Docker build and push master - native
-        uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
         if: ${{ github.ref_name == 'master' }}
         with:
           context: .
@@ -186,7 +201,7 @@ jobs:
           tags: athou/commafeed:master-${{ matrix.database }}
 
       - name: Docker build and push master - jvm
-        uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+        uses: docker/build-push-action@c3c9e263c25d99ce0380d002d59b67737d91b0dc # v7.4.0
         if: ${{ github.ref_name == 'master' }}
         with:
           context: .
@@ -206,12 +221,12 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           fetch-depth: 0
 
       - name: Download artifacts
-        uses: actions/download-artifact@95815c38cf2ff2164869cbab79da8d1f422bc89e # v4
+        uses: actions/download-artifact@9000827ccba6bdab643e8b6fd33ac0654aef8333 # v8.0.2
         with:
           pattern: commafeed-*
           path: ./artifacts
@@ -221,13 +236,13 @@ jobs:
         run: chmod +x artifacts/*-runner
 
       - name: Extract Changelog Entry
-        uses: mindsers/changelog-reader-action@32aa5b4c155d76c94e4ec883a223c947b2f02656 # v2
+        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@440c8c1cb0ed28b9f43e4d1d670870f059653174 # v1
+        uses: ncipollo/release-action@339a81892b84b4eeb0f6e744e4574d79d0d9b8dd # v1.21.0
         with:
           name: CommaFeed ${{ github.ref_name }}
           body: ${{ steps.changelog_reader.outputs.changes }}
@@ -240,12 +255,12 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           fetch-depth: 0
 
       - name: Update Docker Hub Description
-        uses: peter-evans/dockerhub-description@432a30c9e07499fd01da9f8a49f0faf9e0ca5b77 # v4
+        uses: peter-evans/dockerhub-description@1b9a80c056b620d92cedb9d9b5a223409c68ddfa # v5.0.0
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -265,5 +280,5 @@ jobs:
       url: ${{ steps.deployment.outputs.page_url }}
 
     steps:
-      - uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4
+      - 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
-# distributed with this work for additional information
-# regarding copyright ownership.  The ASF licenses this file
-# to you under the Apache License, Version 2.0 (the
-# "License"); you may not use this file except in compliance
-# with the License.  You may obtain a copy of the License at
-#
-#   http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing,
-# software distributed under the License is distributed on an
-# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-# KIND, either express or implied.  See the License for the
-# specific language governing permissions and limitations
-# under the License.
 distributionType=only-script
-distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.9/apache-maven-3.9.9-bin.zip
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.10.0/apache-maven-3.10.0-bin.zip

CHANGELOG.md

@@ -1,11 +1,163 @@
 # Changelog
 
+## [7.4.1]
+
+- Fix entries being marked as read when scrolling back to an entry that was explicitly marked as unread (#2337)
+- Add a global failsafe timeout to the new HTTP/2 client to prevent it from hanging indefinitely
+- Add OCI source label to container images (#2335)
+
+## [7.4.0]
+
+- Add support for HTTP/2 when fetching feeds (#2317)
+- Send more default headers when fetching feeds, to avoid being rejected by some servers (#2315)
+- Harden the content cleaning of feed entries by only allowing `http`/`https` protocols in `iframe` `src` attributes
+- Fix the header in mobile mode being wrapped/cut off when too wide, even above the mobile breakpoint (#2080)
+- Document how to configure Quarkus host validation when running CommaFeed behind a reverse proxy
+
+## [7.3.2]
+
+- Prevent users from starring/tagging entries that are not theirs and subsequently reading them (GHSA-prfv-88mm-5gpg)
+
+## [7.3.1]
+
+- Prevent Host header injection attacks on the password recovery endpoint. A new setting
+  `commafeed.password-recovery-public-base-url` has been added to specify the base URL to use in password recovery
+  (GHSA-hp8h-jqfm-v7x5)
+  emails. This setting is only required when the password recovery feature is enabled, which is not the default.
+
+## [7.3.0]
+
+- Add support for the Google Reader API for native mobile apps that don't support the Fever API
+- The profile menu now works again on mobile when action buttons are at the bottom of the screen
+- More SSRF protection regarding IPv6 (GHSA-q5qw-345w-55xg)
+- Changed the default value of `blockLocalAddresses` to make CommaFeed more secure out-of-the-box. See the "Access to
+  local address blocked" section of the README if you subscribe to feeds that are only available on your local network.
+
+## [7.2.1]
+
+- correctly handle favicons hosted at the root of the domain for feeds with non-default ports
+- prevent XXS injections in third party apps. The CommaFeed React client was already stripping malicious "javascript:"
+  URLs, they are now filtered during feed parsing and no longer stored in the database/served through the REST API
+  (GHSA-44pq-9929-f8mq)
+
+## [7.2.0]
+
+- Add support for icons declared in feeds. This is useful for feeds exposed by RSS bridges (#2048)
+- Search now also works for starred entries (#2217)
+- The error message when subscribing to a feed is now properly displayed again
+- Small performance improvements to the feed refresh engine
+- Removed the Pocket sharing feature because the Pocket service has been discontinued
+- Prevent the image proxy feature to access any URL to avoid SSRF attacks
+- Strengthened the SSRF protection by also blocking ULA and CGNAT ranges (GHSA-hgrr-mjfp-gmr6)
+- Prevent DDOS attacks by filtering OPML files during imports (GHSA-83jp-rww3-57rr)
+
+## [7.1.0]
+
+- Display the unread count in the header on mobile, since the tree is hidden by default and the unread count is not
+  visible otherwise (#2055)
+- The feed refresh engine is now a little bit more performant (#2089)
+- On shutdown, give the feed refresh engine some time to finish refreshing feeds before killing it. This is controlled
+  by the new `commafeed.shutdown-timeout` setting, which defaults to 2 seconds
+
+## [7.0.0]
+
+- Replaced the JEXL filter expression for marking feed entries as read automatically with a user-friendly visual query
+  builder. Expressions are now evaluated with Common Expression Language, which is safer than JEXL and sanboxed by
+  default.
+- Added a per-feed setting for sending push notifications to ntfy, Gotify or Pushover when new feed entries are
+  discovered (#1610)
+- Added a per-feed setting for marking entries as read after a number of days (#2041)
+- The default value of `commafeed.http-client.block-local-addresses` is now false, allowing users to subscribe to feeds
+  only available on their local network. This may be a security risk (SSRF) if your instance is accessible by untrusted
+  users, so you may want to set it to true if you host a public instance of CommaFeed with user registeration enabled.
+- When `commafeed.http-client.block-local-addresses` is enabled, SSRF is now also mitigated by blocking public websites
+  redirecting to local ones.
+
+## [6.2.0]
+
+- Starred entries are no longer deleted after a certain amount of time, they are now kept indefinitely. The new
+  `commafeed.database.cleanup.keep-starred-entries` setting can be disabled to restore the previous behavior if you want
+  to keep deleting starred entries during normal entries cleanup (#1581)
+
+## [6.1.1]
+
+- Fix old starred entries not loading if they were marked as read (#2031)
+
+## [6.1.0]
+
+- When clicking on the password reset link, a random password is no longer generated automatically. The user is now
+  redirected to a page where they can set their own password (#2023)
+- Use browser preferred language instead of English when using CommaFeed for the first time (#2018)
+- The profile menu is now closed when scrolling the page (#2019)
+- The "disable pull to refresh" feature is now disabled by default (#2030)
+
+## [6.0.0]
+
+- When booting CommaFeed for the first time, the default "admin" account is no longer created automatically. A setup
+  wizard will guide you through the creation of an admin account
+- Default password complexity requirements have been lowered for local network deployments, where strict password rules
+  are often unnecessary. The `commafeed.users.strict-password-policy` setting has been replaced by
+  `commafeed.users.minimum-password-length` with a default value of `4` (#1916)
+- Email addresses are no longer required when creating users and when they update their profile. The
+  `commafeed.users.email-address-required` setting has been added to restore the previous behavior (#1914)
+- Java 25+ is now required to build and run CommaFeed
+
+## [5.12.1]
+
+- The favicon is now crispier (#1978)
+- The ReadKit iOS app now works via the Fever API (#1602)
+
+## [5.12.0]
+
+- Added a setting to disable the "disable pull to refresh" feature because it messes with some browsers (#1168)
+- Emojis in feeds are now correctly displayed (#1955)
+- Don't show "Star/Unstar" in the context menu if the entry is too old to be starred (#1935)
+- Invalid relative urls in feeds no longer prevent those feeds from being parsed (#1939)
+- Fix an issue that could prevent large feeds from being parsed when using Java 24+ (#1961)
+- Enforce user password validation when created in the admin view (#1937)
+- The process in the docker native image is now called "commafeed" instead of "application"
+
+## [5.11.1]
+
+- The search limit of 3 characters has been removed (#1887)
+- Fix an issue that caused feed filtering expressions to be incorrectly converted to lowercase when saving them (#1899)
+
+## [5.11.0]
+
+- Add an option to navigate to the next unread category/feed when marking all entries as read (#1807)
+- Google Analytics support has been removed
+
+## [5.10.0]
+
+- Add an indicator next to each feed's unread count in the tree to show when new entries are discovered while the app is
+  open (#1762)
+- Feeds with uppercase HTTP:// or HTTPS:// URLs are now correctly handled again
+- The aarch64 native executable now also works on the Raspberry Pi 5 (#1795)
+- Improve general performance of the UI by reducing the number of re-renders, especially when a lot of entries are
+  displayed (#1087)
+
+## [5.9.0]
+
+- A lot of CSS classes have been added to the elements of the application to ease custom CSS rules (#1757)
+- Added a link in the README to the [documentation](https://athou.github.io/commafeed/documentation/custom-css/) of the
+  new CSS classes
+- Static resources are now cached for much longer (#1782)
+
+## [5.8.0]
+
+- A color picker is now available on the settings page to change the orange accent of the application (#1598)
+- A font size slider is now available to change the size of the text of feed entries (#1462)
+- The "mark all as read" confirmation setting now also applies to the "shift+a" keyboard shortcut (#1744)
+- CommaFeed wil try to match the language of the browser before defaulting to english (#1767)
+- The default value for the number of entries to keep above the selected entry when scrolling is now 1 instead of 0 to
+  match what other feed readers do
+
 ## [5.7.0]
 
-- Add Shift+J/Shift+K keyboard shortcuts to navigate to the next/previous feed or category with unread entries (#1746)
+- Add Shift+J/Shift+K keyboard shortcuts to navigate to the next/previous feed or category with unread entries (#1558)
 - Add the referrer "no-referrer" meta to index.html (#1724)
 - Load custom JS code when the app is done loading (#1724)
-- Correctly handle feeds that return an unmodified Last-Modified header but a different ETag header (#1730)
+- Correctly handle feeds that return an unmodified Last-Modified header but a different ETag header (#1746)
 - Restore gzip compression of responses that was accidentaly disabled since 5.0.0
 - Fix tooltips not showing up in mobile view
 - Fix the bookmarklet generator on the About page
@@ -17,14 +169,22 @@
 
 ## [5.6.0]
 
-- To better respect the bandwidth of feed owners, the default value of `commafeed.feed-refresh.interval-empirical` is now true. This means feeds no longer refresh exactly every 5 minutes (the default value of `commafeed.feed-refresh.interval`) but between 5 minutes and 4 hours (the default value of the new `commafeed.feed-refresh.max-interval` setting). The interval is calculated based on feed activity, so highly active feeds refresh more often (#1677)
+- To better respect the bandwidth of feed owners, the default value of `commafeed.feed-refresh.interval-empirical` is
+  now true. This means feeds no longer refresh exactly every 5 minutes (the default value of
+  `commafeed.feed-refresh.interval`) but between 5 minutes and 4 hours (the default value of the new
+  `commafeed.feed-refresh.max-interval` setting). The interval is calculated based on feed activity, so highly active
+  feeds refresh more often (#1677)
 - Many previously hardcoded values used in feed refresh interval calculation are now exposed as settings (#1677)
-- Access to local addresses is now blocked to mitigate server-side request forgery (SSRF) attacks, which could potentially expose internal resources. You might want to disable the new `commafeed.http-client.block-local-addresses` setting if you subscribe to feeds only available on your local network and you trust all your users
+- Access to local addresses is now blocked to mitigate server-side request forgery (SSRF) attacks, which could
-- If a feed responds with a "429 - Too many requests" response, a backoff mechanism is triggered when the response does not contain a "Retry-After" header
+  potentially expose internal resources. You might want to disable the new `commafeed.http-client.block-local-addresses`
+  setting if you subscribe to feeds only available on your local network and you trust all your users
+- If a feed responds with a "429 - Too many requests" response, a backoff mechanism is triggered when the response does
+  not contain a "Retry-After" header
 
 ## [5.5.0]
 
-- CommaFeed now honors the Retry-After response header and will not try to refresh a feed sooner than the value of this header
+- CommaFeed now honors the Retry-After response header and will not try to refresh a feed sooner than the value of this
+  header
 - Audio enclosures (e.g. podcasts) now fill available entry width
 - Fix an issue with some labels not correctly internationalized
 
@@ -41,8 +201,10 @@
 ## [5.3.5]
 
 - Fixed an issue with the aspect ratio of images of some feeds (#1595)
-- CommaFeed now honors the Cache-Control response header and will not try to refresh a feed sooner than its max-age property (#1615)
+- CommaFeed now honors the Cache-Control response header and will not try to refresh a feed sooner than its max-age
-- Added support for compilation with JDK 23+. If you're building CommaFeed from sources with a JDK 17 or 21, you may need to update it to the most recent patch version to support `-proc:full` (#1618)
+  property (#1615)
+- Added support for compilation with JDK 23+. If you're building CommaFeed from sources with a JDK 17 or 21, you may
+  need to update it to the most recent patch version to support `-proc:full` (#1618)
 
 ## [5.3.4]
 
@@ -69,19 +231,22 @@
 
 - Added an option to keep a number of entries above the selected entry when scrolling
 - Added a cache to the HTTP client to reduce the number of requests made to feeds when subscribing (#1431)
-- Feeds are no longer refreshed between the moment its last user unsubscribes and the moment the feed is cleaned up (every hour)
+- Feeds are no longer refreshed between the moment its last user unsubscribes and the moment the feed is cleaned up
+  (every hour)
 - Fixed an issue that could cause entries to not correctly load when using keyboard navigation (#1557)
 
 ## [5.1.1]
 
 - Fixed database migration issue when upgrading from 5.0.0 to 5.1.0 on MariaDB (#1544)
-- When feeds without unread entries are hidden from the tree, the feed is displayed in the tree until another one is selected (#1543)
+- When feeds without unread entries are hidden from the tree, the feed is displayed in the tree until another one is
+  selected (#1543)
 
 ## [5.1.0]
 
 - Added a setting for showing/hiding unread count in the browser's tab title/favicon (#1518)
 - Fixed an issue that could prevent the app from starting on some systems (#1532)
-- Added a cache busting filter for the webapp index.html and openapi documentation to make sure they are always up to date
+- Added a cache busting filter for the webapp index.html and openapi documentation to make sure they are always up to
+  date
 - Reduced database cleanup log verbosity
 
 ## [5.0.2]
@@ -96,9 +261,9 @@
 ## [5.0.0]
 
 CommaFeed is now powered by Quarkus instead of Dropwizard. Read the rationale behind this change in
-the [announcement](https://github.com/Athou/commafeed/discussions/1517).
+the [announcement](https://github.com/Athou/commafeed/discussions/1517). The gist of it is that CommaFeed can now be
-The gist of it is that CommaFeed can now be compiled to a native binary, resulting in blazing fast startup times (around
+compiled to a native binary, resulting in blazing fast startup times (around 0.3s) and very low memory footprint (<
-0.3s) and very low memory footprint (< 50M).
+50M).
 
 - CommaFeed now has a different package for each supported database.
     - If you are deploying CommaFeed with a precompiled package, please
@@ -154,8 +319,8 @@ The gist of it is that CommaFeed can now be compiled to a native binary, resulti
 - add a button in the entry headers to open links in a new tab (#1333)
 - add two options in the settings to toggle those buttons
 - accept .opml file extension when importing and export with the .opml extension
-- the "mark as read" option is no longer shown in the context menu for entries that are too old to be marked as read (
+- the "mark as read" option is no longer shown in the context menu for entries that are too old to be marked as read
-  older than `keepStatusDays`) (#1303)
+  (older than `keepStatusDays`) (#1303)
 
 ## [4.3.3]
 
@@ -199,9 +364,8 @@ The gist of it is that CommaFeed can now be compiled to a native binary, resulti
 - it is now possible to open the sidebar on mobile by swiping to the right (#1098)
 - swiping to mark entries as read/unread changed from swiping right to left because swiping right now opens the sidebar
 - the full hierarchy of categories are now displayed in the category dropdown (#1045)
-- added a setting `maxEntriesAgeDays` to delete old entries based on their age during database cleanup.
+- added a setting `maxEntriesAgeDays` to delete old entries based on their age during database cleanup. The setting is
-  The setting is disabled by default for existing installations, except for the docker image where it is enabled and set
+  disabled by default for existing installations, except for the docker image where it is enabled and set to 365 days
-  to 365 days
 - if user registrations are disabled on your instance which is the default behavior, users are redirected on the login
   page instead of the welcome page when not logged in (#1185)
 - the sidebar resizer is no longer shown in the middle of the screen on mobile
@@ -227,8 +391,8 @@ The gist of it is that CommaFeed can now be compiled to a native binary, resulti
   request, reducing CPU usage
 - updated UI library Mantine to 7.0, improving performance
 - the h2 embedded database is now compacted on shutdown to reclaim unused space
-- the admin connector on port 8084 is now disabled in config.yml.example. Disabling it in your config.yml is
+- the admin connector on port 8084 is now disabled in config.yml.example. Disabling it in your config.yml is recommended
-  recommended (see https://github.com/Athou/commafeed/commit/929df60f09cce56020b0962ab111cd8349b271b0)
+  (see https://github.com/Athou/commafeed/commit/929df60f09cce56020b0962ab111cd8349b271b0)
 - migrated documentation from swagger 2 to openapi 3
 - added a GET method to the fever api to indicate that the endpoint is working correctly when accessed from a browser
 - the websocket connection can now be disabled, the websocket ping interval and the tree reload interval can now be
@@ -470,7 +634,6 @@ The gist of it is that CommaFeed can now be compiled to a native binary, resulti
 ## [2.0.0]
 
 - The backend has been completely rewritten using Dropwizard instead of TomEE, resulting in a lot less memory
-  consumption and better overall performances.
+  consumption and better overall performances. See the README on how to build CommaFeed from now on.
-  See the README on how to build CommaFeed from now on.
 - CommaFeed should no longer fetch the same feed multiple times in a row
 - Users can use their username or email to log in

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
 
@@ -61,8 +70,8 @@ memory usage.
     ./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:
@@ -102,7 +111,7 @@ 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](https://athou.github.io/commafeed/documentation) are optional and have sensible default values.
 
@@ -112,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
 
@@ -151,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,6 +2,7 @@
 <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" />

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

@@ -15,70 +15,69 @@
         "i18n:extract": "lingui extract --clean"
     },
     "dependencies": {
-        "@emotion/react": "^11.14.0",
+        "@emotion/react": "11.14.0",
-        "@fontsource/open-sans": "^5.2.5",
+        "@fontsource/open-sans": "5.3.0",
-        "@lingui/core": "^5.3.0",
+        "@lingui/core": "6.12.0",
-        "@lingui/react": "^5.3.0",
+        "@lingui/react": "6.12.0",
-        "@mantine/core": "^7.17.3",
+        "@mantine/core": "9.7.4",
-        "@mantine/form": "^7.17.3",
+        "@mantine/dates": "9.7.4",
-        "@mantine/hooks": "^7.17.3",
+        "@mantine/form": "9.7.4",
-        "@mantine/modals": "^7.17.3",
+        "@mantine/hooks": "9.7.4",
-        "@mantine/notifications": "^7.17.3",
+        "@mantine/modals": "9.7.4",
-        "@mantine/spotlight": "^7.17.3",
+        "@mantine/notifications": "9.7.4",
-        "@monaco-editor/react": "^4.7.0",
+        "@mantine/spotlight": "9.7.4",
-        "@reduxjs/toolkit": "^2.6.1",
+        "@monaco-editor/react": "4.7.0",
-        "axios": "^1.8.4",
+        "@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.1.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.1.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.5.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.4.1",
+        "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.16",
+        "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.3.0",
+        "@lingui/cli": "6.12.0",
-        "@lingui/cli": "^5.3.0",
+        "@lingui/vite-plugin": "6.12.0",
-        "@lingui/vite-plugin": "^5.3.0",
+        "@testing-library/jest-dom": "7.0.1",
-        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "16.3.3",
-        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "14.6.8",
-        "@testing-library/user-event": "^14.6.1",
+        "@types/mousetrap": "1.6.15",
-        "@types/mousetrap": "^1.6.15",
+        "@types/react": "19.3.0",
-        "@types/react": "^19.1.0",
+        "@types/react-dom": "19.3.0",
-        "@types/react-dom": "^19.1.1",
+        "@types/react-infinite-scroller": "1.2.5",
-        "@types/react-infinite-scroller": "^1.2.5",
+        "@types/throttle-debounce": "5.0.2",
-        "@types/throttle-debounce": "^5.0.2",
+        "@types/tinycon": "0.6.7",
-        "@types/tinycon": "^0.6.7",
+        "@vitejs/plugin-react": "6.2.1",
-        "@vitejs/plugin-react": "^4.3.4",
+        "babel-plugin-react-compiler": "^1.0.0",
-        "babel-plugin-macros": "^3.1.0",
+        "jsdom": "30.1.3",
-        "jsdom": "^26.0.0",
+        "typescript": "7.0.2",
-        "rollup-plugin-visualizer": "^5.14.0",
+        "vite": "8.3.5",
-        "typescript": "^5.8.2",
+        "vite-plugin-checker": "0.14.5",
-        "vite": "^6.2.5",
+        "vitest": "5.0.5",
-        "vite-plugin-checker": "^0.9.1",
+        "yaml": "2.9.1"
-        "vite-tsconfig-paths": "^5.1.4",
-        "vitest": "^3.1.1"
     },
     "overrides": {
         "react-infinite-scroller": {
-            "react": "^19.1.0"
+            "react": "19.3.1"
         }
     }
 }

commafeed-client/pom.xml

@@ -6,16 +6,16 @@
 	<parent>
 		<groupId>com.commafeed</groupId>
 		<artifactId>commafeed</artifactId>
-		<version>5.7.0</version>
+		<version>7.4.1</version>
 	</parent>
 	<artifactId>commafeed-client</artifactId>
 	<name>CommaFeed Client</name>
 
 	<properties>
 		<!-- 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 -->
-		<npm.version>11.2.0</npm.version>
+		<npm.version>12.2.1</npm.version>
 	</properties>
 
 	<build>
@@ -23,7 +23,7 @@
 			<plugin>
 				<groupId>com.github.eirslett</groupId>
 				<artifactId>frontend-maven-plugin</artifactId>
-				<version>1.15.1</version>
+				<version>2.0.2</version>
 				<?m2e ignore?>
 				<executions>
 					<execution>
@@ -72,7 +72,7 @@
 			</plugin>
 			<plugin>
 				<artifactId>maven-resources-plugin</artifactId>
-				<version>3.3.1</version>
+				<version>3.5.0</version>
 				<executions>
 					<execution>
 						<id>copy web interface to resources</id>
@@ -94,4 +94,49 @@
 			</plugin>
 		</plugins>
 	</build>
+
+	<profiles>
+		<!-- This profile is used to kill the Biome process on Windows -->
+		<!-- npm ci can fail if Biome is running (e.g., in the IDE) because it locks some files -->
+		<profile>
+			<id>kill-biome</id>
+			<activation>
+				<os>
+					<family>Windows</family>
+				</os>
+			</activation>
+			<build>
+				<plugins>
+					<plugin>
+						<groupId>org.codehaus.mojo</groupId>
+						<artifactId>exec-maven-plugin</artifactId>
+						<version>3.6.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,48 +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 { useAppLoading } from "hooks/useAppLoading"
+import { Header } from "@/components/header/Header"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
+import { Tree } from "@/components/sidebar/Tree"
-import { useI18n } from "i18n"
+import { useI18n } from "@/i18n"
-import { WelcomePage } from "pages/WelcomePage"
+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 { InitialSetupPage } from "@/pages/auth/InitialSetupPage"
-import { LoginPage } from "pages/auth/LoginPage"
+import { LoginPage } from "@/pages/auth/LoginPage"
-import { PasswordRecoveryPage } from "pages/auth/PasswordRecoveryPage"
+import { PasswordRecoveryPage } from "@/pages/auth/PasswordRecoveryPage"
-import { RegistrationPage } from "pages/auth/RegistrationPage"
+import { PasswordResetPage } from "@/pages/auth/PasswordResetPage"
-import React, { useEffect, useState } from "react"
+import { RegistrationPage } from "@/pages/auth/RegistrationPage"
-import { isSafari } from "react-device-detect"
+import { WelcomePage } from "@/pages/WelcomePage"
-import ReactGA from "react-ga4"
-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
@@ -71,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)
 
@@ -81,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 />} />
@@ -112,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()
@@ -127,115 +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
-}
-
-function CustomJsHandler() {
-    const [scriptLoaded, setScriptLoaded] = useState(false)
-    const { loading } = useAppLoading()
-
-    useEffect(() => {
-        if (scriptLoaded || loading) {
-            return
-        }
-
-        const script = document.createElement("script")
-        script.src = "custom_js.js"
-        script.async = true
-        document.body.appendChild(script)
-
-        setScriptLoaded(true)
-    }, [scriptLoaded, loading])
-
-    return null
-}
-
-function CustomCssHandler() {
-    useEffect(() => {
-        const link = document.createElement("link")
-        link.rel = "stylesheet"
-        link.type = "text/css"
-        link.href = "custom_css.css"
-        document.head.appendChild(link)
-    }, [])
-
-    return 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 />
-                <CustomJsHandler />
+            </HashRouter>
-                <CustomCssHandler />
-
-                {/* 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>
-                    <GoogleAnalyticsHandler />
-                    <RedirectHandler />
-                    <AppRoutes />
-                </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,12 +1,12 @@
 import { configureStore } from "@reduxjs/toolkit"
-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"
 import type { AxiosResponse } from "axios"
 import { beforeEach, describe, expect, it, vi } from "vitest"
+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"
 
-vi.mock(import("app/client"))
+vi.mock(import("@/app/client"))
 
 describe("entries", () => {
     beforeEach(() => {
@@ -27,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")
@@ -84,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,
@@ -111,6 +298,30 @@ describe("entries", () => {
         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", () => {
         const store = configureStore({
             reducer: reducers,
@@ -130,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(client.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,15 +1,19 @@
-import { createAppAsyncThunk } from "app/async-thunk"
+import { createAppAsyncThunk } from "@/app/async-thunk"
-import { client } from "app/client"
+import { client } from "@/app/client"
-import { redirectToCategory, redirectToFeed } from "app/redirect/thunks"
+import { Constants } from "@/app/constants"
-import { incrementUnreadCount } from "app/tree/slice"
+import { redirectToCategory, redirectToFeed } from "@/app/redirect/thunks"
-import type { CollapseRequest, Subscription } from "app/types"
+import { incrementUnreadCount } from "@/app/tree/slice"
-import { flattenCategoryTree, visitCategoryTree } from "app/utils"
+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(
@@ -53,6 +57,9 @@ export const selectNextUnreadTreeItem = createAppAsyncThunk(
                 }
             }
         }
+
+        // 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))
     }
 )
 

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

@@ -1,8 +1,13 @@
 import { configureStore } from "@reduxjs/toolkit"
-import { type RootState, reducers } from "app/store"
+import type { AxiosResponse } from "axios"
-import { selectNextUnreadTreeItem } from "app/tree/thunks"
+import { beforeEach, describe, expect, it, vi } from "vitest"
-import type { Category, Subscription } from "app/types"
+import { client } from "@/app/client"
-import { describe, expect, it } from "vitest"
+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,
@@ -22,6 +27,7 @@ const createFeed = (id: number, unread: number): Subscription => ({
     feedUrl: "",
     feedLink: "",
     iconUrl: "",
+    pushNotificationsEnabled: true,
 })
 
 const root = createCategory("root")
@@ -117,3 +123,51 @@ describe("selectNextUnreadTreeItem", () => {
         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,9 +1,10 @@
 import { throttle } from "throttle-debounce"
+import type { TreeCategory } from "@/app/tree/slice"
 import type { Category } from "./types"
 
 export function visitCategoryTree(
-    category: Category,
+    category: TreeCategory,
-    visitor: (category: Category) => void,
+    visitor: (category: TreeCategory) => void,
     options?: {
         childrenFirst?: boolean
     }
@@ -19,13 +20,13 @@ export function visitCategoryTree(
     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)
@@ -34,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

@@ -1,8 +1,8 @@
 import type { I18nContext } from "@lingui/react"
 import { MantineProvider } from "@mantine/core"
 import { fireEvent, render, screen, waitFor } from "@testing-library/react"
-import { useActionButton } from "hooks/useActionButton"
 import { describe, expect, it, vi } from "vitest"
+import { useActionButton } from "@/hooks/useActionButton"
 import { ActionButton } from "./ActionButton"
 
 vi.mock(import("@lingui/react"), () => ({
@@ -10,7 +10,7 @@ vi.mock(import("@lingui/react"), () => ({
         _: msg => msg,
     } as I18nContext),
 }))
-vi.mock(import("hooks/useActionButton"))
+vi.mock(import("@/hooks/useActionButton"))
 
 const label = "Test Label"
 const icon = "Test Icon"
@@ -18,7 +18,9 @@ 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 })
+        render(<ActionButton label={label} icon={icon} />, {
+            wrapper: MantineProvider,
+        })
         expect(screen.getByText(label)).toBeInTheDocument()
         expect(screen.getByText(icon)).toBeInTheDocument()
     })
@@ -26,7 +28,9 @@ describe("ActionButton", () => {
     it("renders ActionIcon with tooltip on mobile", async () => {
         vi.mocked(useActionButton).mockReturnValue({ mobile: true, spacing: 0 })
 
-        render(<ActionButton label={label} icon={icon} />, { wrapper: MantineProvider })
+        render(<ActionButton label={label} icon={icon} />, {
+            wrapper: MantineProvider,
+        })
         expect(screen.queryByText(label)).not.toBeInTheDocument()
         expect(screen.getByText(icon)).toBeInTheDocument()
 
@@ -39,7 +43,9 @@ describe("ActionButton", () => {
         vi.mocked(useActionButton).mockReturnValue({ mobile: false, spacing: 0 })
         const clickListener = vi.fn()
 
-        render(<ActionButton label={label} icon={icon} onClick={clickListener} />, { wrapper: MantineProvider })
+        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,10 +1,19 @@
 import type { MessageDescriptor } from "@lingui/core"
 import { useLingui } from "@lingui/react"
-import { ActionIcon, Box, 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
@@ -12,8 +21,7 @@ interface ActionButtonProps {
     label?: string | MessageDescriptor
     onClick?: MouseEventHandler
     variant?: ActionIconVariant & ButtonVariant
-    hideLabelOnDesktop?: boolean
+    mode?: Mode
-    showLabelOnMobile?: boolean
 }
 
 /**
@@ -26,10 +34,12 @@ export const ActionButton = forwardRef<HTMLDivElement, ActionButtonProps>((props
 
     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)
+
+    const mode: Mode = props.mode ?? "auto"
+    const iconOnly = mode === "mobile" || (mode === "auto" && mobile)
 
     return (
-        <Box ref={ref}>
+        <Box ref={ref} className="cf-action-button">
             {iconOnly && (
                 <Tooltip label={label} openDelay={Constants.tooltip.delay}>
                     <ActionIcon

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"

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

@@ -1,8 +1,7 @@
 import { MantineProvider } from "@mantine/core"
 import { render } from "@testing-library/react"
-import { Content } from "components/content/Content"
-import React from "react"
 import { describe, expect, it } from "vitest"
+import { Content } from "@/components/content/Content"
 
 describe("Content component", () => {
     it("renders basic content", () => {
@@ -16,7 +15,9 @@ describe("Content component", () => {
     })
 
     it("renders iframe tag when included in content", () => {
-        const { container } = render(<Content content='<iframe src="https://example.com"></iframe>' />, { wrapper: MantineProvider })
+        const { container } = render(<Content content='<iframe src="https://example.com"></iframe>' />, {
+            wrapper: MantineProvider,
+        })
         expect(container.querySelector("iframe")).toHaveAttribute("src", "https://example.com")
     })
 

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 { ALLOWED_TAG_LIST, 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

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,36 +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 { selectNextUnreadTreeItem } from "app/tree/thunks"
+import { selectNextUnreadTreeItem } from "@/app/tree/thunks"
-import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
+import { KeyboardShortcutsHelp } from "@/components/KeyboardShortcutsHelp"
-import { Loader } from "components/Loader"
+import { Loader } from "@/components/Loader"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
+import { useBrowserExtension } from "@/hooks/useBrowserExtension"
-import { useMousetrap } from "hooks/useMousetrap"
+import { useMousetrap } from "@/hooks/useMousetrap"
-import { useEffect } from "react"
-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)
@@ -113,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,
                     })
                 )
@@ -126,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(
@@ -275,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()))
@@ -299,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(":")

commafeed-client/src/i18n.ts

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