release 7.3.2

Update dependency @testing-library/user-event to v14.6.5

.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:
@@ -23,18 +23,24 @@ 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 GraalVM
-        uses: graalvm/setup-graalvm@01ed653ac833fe80569f1ef9f25585ba2811baab # v1
+        uses: graalvm/setup-graalvm@5298d94fb55a4f185c602eeac5de1b553882abe2 # v1.6.4
         with:
           java-version: ${{ env.JAVA_VERSION }}
           distribution: "graalvm"
           cache: "maven"
 
+      - name: Set up NodeJS cache
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.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'
@@ -44,34 +50,43 @@ jobs:
         run: mvn --batch-mode --no-transfer-progress install -Pnative -P${{ matrix.database }} -DskipTests=${{ matrix.os == 'windows-latest' && matrix.database != 'h2' }}
 
       # Build pages
-      - name: Copy generated markdown documentation to /documentation
-        run: mkdir documentation && cp ./commafeed-server/target/quarkus-generated-doc/config/commafeed-server.md ./documentation/README.md
+      - name: Create pages directory structure
+        run: mkdir -p target/pages/documentation/custom-css
 
-      - name: Generate pages
-        uses: wranders/markdown-to-pages-action@8d8a750832932ac785f5424c8c5543aa0b26bb9a # v1
+      - name: Convert readme file to html
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          out_path: target/pages
-          files: |-
-            README.md
-            documentation/README.md
-      
+          source: README.md
+          output: target/pages/index.html
+
+      - name: Convert config documentation to html
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
+        with:
+          source: commafeed-server/target/quarkus-generated-doc/config/commafeed-server.md
+          output: target/pages/documentation/index.html
+
+      - name: Convert custom css documentation to html
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
+        with:
+          source: documentation/CUSTOMCSS.md
+          output: target/pages/documentation/custom-css/index.html
+
       # Upload artifacts
       - name: Upload cross-platform app
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         if: matrix.os == 'ubuntu-latest' # we only need to upload the cross-platform artifact once per database
         with:
           name: commafeed-${{ matrix.database }}-jvm
           path: commafeed-server/target/commafeed-*.zip
 
       - name: Upload native executable
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         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
         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@96fe6ef7f33517b61c61be40b68a1882f3264fb8 # v4.2.0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3
+        uses: docker/setup-buildx-action@37fe631027851001ddb9b187196cc803df7f5f0e # v4.3.0
 
       - 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@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
         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@dbcb813823bdd20940b903addbd779551569679f # v4.6.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@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7.3.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@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7.3.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@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7.3.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@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7.3.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@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7.3.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@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7.3.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@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
         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@cd2ce8fcbc39b97be8ca5fce6e763baed58fa128 # v5.0.0
         id: deployment

.mvn/wrapper/maven-wrapper.properties

@@ -1,18 +1,3 @@
-# Licensed to the Apache Software Foundation (ASF) under one
-# 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.
+wrapperVersion=3.3.4
 distributionType=only-script
-distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.9/apache-maven-3.9.9-bin.zip
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.16/apache-maven-3.9.16-bin.zip

CHANGELOG.md

@@ -1,11 +1,149 @@
 # Changelog
 
+## [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 +155,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
-- 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
+- Access to local addresses is now blocked to mitigate server-side request forgery (SSRF) attacks, which could
+  potentially expose internal resources. You might want to disable the new `commafeed.http-client.block-local-addresses`
+  setting if you subscribe to feeds only available on your local network and you trust all your users
+- If a feed responds with a "429 - Too many requests" response, a backoff mechanism is triggered when the response does
+  not contain a "Retry-After" header
 
 ## [5.5.0]
 
-- CommaFeed now honors the Retry-After response header and will not try to refresh a feed sooner than the value of this header
+- 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 +187,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)
-- 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)
+- CommaFeed now honors the Cache-Control response header and will not try to refresh a feed sooner than its max-age
+  property (#1615)
+- Added support for compilation with JDK 23+. If you're building CommaFeed from sources with a JDK 17 or 21, you may
+  need to update it to the most recent patch version to support `-proc:full` (#1618)
 
 ## [5.3.4]
 
@@ -69,19 +217,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 +247,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 gist of it is that CommaFeed can now be compiled to a native binary, resulting in blazing fast startup times (around
-0.3s) and very low memory footprint (< 50M).
+the [announcement](https://github.com/Athou/commafeed/discussions/1517). The gist of it is that CommaFeed can now be
+compiled to a native binary, resulting in blazing fast startup times (around 0.3s) and very low memory footprint (<
+50M).
 
 - CommaFeed now has a different package for each supported database.
     - If you are deploying CommaFeed with a precompiled package, please
@@ -154,8 +305,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 (
-  older than `keepStatusDays`) (#1303)
+- 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)
 
 ## [4.3.3]
 
@@ -199,9 +350,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.
-  The setting is disabled by default for existing installations, except for the docker image where it is enabled and set
-  to 365 days
+- added a setting `maxEntriesAgeDays` to delete old entries based on their age during database cleanup. The setting is
+  disabled by default for existing installations, except for the docker image where it is enabled and set 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 +377,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
-  recommended (see https://github.com/Athou/commafeed/commit/929df60f09cce56020b0962ab111cd8349b271b0)
+- the admin connector on port 8084 is now disabled in config.yml.example. Disabling it in your config.yml is recommended
+  (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 +620,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.
-  See the README on how to build CommaFeed from now on.
+  consumption and better overall performances. See the README on how to build CommaFeed from now on.
 - CommaFeed should no longer fetch the same feed multiple times in a row
 - Users can use their username or email to log in

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
-  variable pointing to a GraalVM installation).
+- `-Pnative` compiles the application to native code. This requires either GraalVM to be installed (`GRAALVM_HOME` environment
+  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,14 @@ 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.
+
 ## 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.
-Thanks !
+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

commafeed-client/.gitignore

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

commafeed-client/biome.json

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

commafeed-client/index.html

@@ -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",
-    formatOptions: {
-        origins: true,
+    format: formatter({
         lineNumbers: false,
-    },
+    }),
     sourceLocale: "en",
     fallbackLocales: {
         default: "en",

commafeed-client/package.json

@@ -15,70 +15,71 @@
         "i18n:extract": "lingui extract --clean"
     },
     "dependencies": {
-        "@emotion/react": "^11.14.0",
-        "@fontsource/open-sans": "^5.2.5",
-        "@lingui/core": "^5.3.0",
-        "@lingui/react": "^5.3.0",
-        "@mantine/core": "^7.17.3",
-        "@mantine/form": "^7.17.3",
-        "@mantine/hooks": "^7.17.3",
-        "@mantine/modals": "^7.17.3",
-        "@mantine/notifications": "^7.17.3",
-        "@mantine/spotlight": "^7.17.3",
-        "@monaco-editor/react": "^4.7.0",
-        "@reduxjs/toolkit": "^2.6.1",
-        "axios": "^1.8.4",
-        "dayjs": "^1.11.13",
-        "escape-string-regexp": "^5.0.0",
-        "interweave": "^13.1.1",
-        "monaco-editor": "^0.52.2",
-        "mousetrap": "^1.6.5",
-        "react": "^19.1.0",
-        "react-async-hook": "^4.0.0",
-        "react-contexify": "^6.0.0",
-        "react-device-detect": "^2.2.3",
-        "react-dom": "^19.1.0",
-        "react-draggable": "^4.4.6",
-        "react-ga4": "^2.1.0",
-        "react-icons": "^5.5.0",
-        "react-infinite-scroller": "^1.2.6",
-        "react-redux": "^9.2.0",
-        "react-router-dom": "^7.4.1",
-        "react-swipeable": "^7.0.2",
-        "redoc": "^2.4.0",
-        "style-to-object": "^1.0.8",
-        "throttle-debounce": "^5.0.2",
-        "tinycon": "^0.6.8",
-        "tss-react": "^4.9.16",
-        "websocket-heartbeat-js": "^1.1.3"
+        "@emotion/react": "11.14.0",
+        "@fontsource/open-sans": "5.3.0",
+        "@lingui/core": "6.6.0",
+        "@lingui/react": "6.6.0",
+        "@mantine/core": "9.5.1",
+        "@mantine/dates": "9.5.1",
+        "@mantine/form": "9.5.1",
+        "@mantine/hooks": "9.5.1",
+        "@mantine/modals": "9.5.1",
+        "@mantine/notifications": "9.5.1",
+        "@mantine/spotlight": "9.5.1",
+        "@monaco-editor/react": "4.7.0",
+        "@react-querybuilder/mantine": "8.23.0",
+        "@reduxjs/toolkit": "2.12.0",
+        "@rolldown/plugin-babel": "0.2.3",
+        "axios": "1.19.0",
+        "dayjs": "1.11.23",
+        "escape-string-regexp": "5.0.0",
+        "interweave": "13.1.1",
+        "monaco-editor": "0.56.0",
+        "mousetrap": "1.6.5",
+        "react": "19.2.8",
+        "react-async-hook": "4.0.0",
+        "react-contexify": "6.0.0",
+        "react-dom": "19.2.8",
+        "react-draggable": "4.7.1",
+        "react-icons": "5.7.0",
+        "react-infinite-scroller": "1.2.6",
+        "react-querybuilder": "8.23.0",
+        "react-redux": "9.3.0",
+        "react-router-dom": "7.18.2",
+        "react-swipeable": "7.0.2",
+        "style-to-object": "2.0.2",
+        "throttle-debounce": "5.0.2",
+        "tinycon": "0.6.8",
+        "tss-react": "4.9.21",
+        "websocket-heartbeat-js": "1.1.3"
     },
     "devDependencies": {
-        "@biomejs/biome": "^1.9.4",
-        "@lingui/babel-plugin-lingui-macro": "^5.3.0",
-        "@lingui/cli": "^5.3.0",
-        "@lingui/vite-plugin": "^5.3.0",
-        "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^16.3.0",
-        "@testing-library/user-event": "^14.6.1",
-        "@types/mousetrap": "^1.6.15",
-        "@types/react": "^19.1.0",
-        "@types/react-dom": "^19.1.1",
-        "@types/react-infinite-scroller": "^1.2.5",
-        "@types/throttle-debounce": "^5.0.2",
-        "@types/tinycon": "^0.6.7",
-        "@vitejs/plugin-react": "^4.3.4",
-        "babel-plugin-macros": "^3.1.0",
-        "jsdom": "^26.0.0",
-        "rollup-plugin-visualizer": "^5.14.0",
-        "typescript": "^5.8.2",
-        "vite": "^6.2.5",
-        "vite-plugin-checker": "^0.9.1",
-        "vite-tsconfig-paths": "^5.1.4",
-        "vitest": "^3.1.1"
+        "@babel/types": "^8.0.4",
+        "@biomejs/biome": "2.5.9",
+        "@lingui/babel-plugin-lingui-macro": "6.6.0",
+        "@lingui/cli": "6.6.0",
+        "@lingui/vite-plugin": "6.6.0",
+        "@testing-library/jest-dom": "7.0.1",
+        "@testing-library/react": "16.3.2",
+        "@testing-library/user-event": "14.6.5",
+        "@types/mousetrap": "1.6.15",
+        "@types/react": "19.2.18",
+        "@types/react-dom": "19.2.4",
+        "@types/react-infinite-scroller": "1.2.5",
+        "@types/throttle-debounce": "5.0.2",
+        "@types/tinycon": "0.6.7",
+        "@vitejs/plugin-react": "6.0.5",
+        "babel-plugin-react-compiler": "1.0.0",
+        "jsdom": "30.0.1",
+        "typescript": "7.0.2",
+        "vite": "8.2.1",
+        "vite-plugin-checker": "0.14.5",
+        "vitest": "4.1.11",
+        "yaml": "2.9.0"
     },
     "overrides": {
         "react-infinite-scroller": {
-            "react": "^19.1.0"
+            "react": "19.2.8"
         }
     }
 }

commafeed-client/pom.xml

@@ -6,16 +6,16 @@
 	<parent>
 		<groupId>com.commafeed</groupId>
 		<artifactId>commafeed</artifactId>
-		<version>5.7.0</version>
+		<version>7.3.2</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>v24.19.0</node.version>
 		<!-- renovate: datasource=npm depName=npm -->
-		<npm.version>11.2.0</npm.version>
+		<npm.version>12.0.2</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.3</version>
+						<executions>
+							<execution>
+								<id>kill-biome</id>
+								<phase>initialize</phase>
+								<goals>
+									<goal>exec</goal>
+								</goals>
+								<configuration>
+									<executable>taskkill</executable>
+									<arguments>
+										<argument>/F</argument>
+										<argument>/IM</argument>
+										<argument>biome.exe</argument>
+									</arguments>
+									<successCodes>
+										<successCode>0</successCode>
+										<!-- taskkill returns 128 if the process is not found, which is fine in this case -->
+										<successCode>128</successCode>
+									</successCodes>
+								</configuration>
+							</execution>
+						</executions>
+					</plugin>
+				</plugins>
+			</build>
+		</profile>
+	</profiles>
+
 </project>

commafeed-client/public/favicon.svg

@@ -0,0 +1,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,52 @@
 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 { redirectTo } from "app/redirect/slice"
-import { reloadServerInfos } from "app/server/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { categoryUnreadCount } from "app/utils"
-import { DisablePullToRefresh } from "components/DisablePullToRefresh"
-import { ErrorBoundary } from "components/ErrorBoundary"
-import { Header } from "components/header/Header"
-import { Tree } from "components/sidebar/Tree"
-import { useAppLoading } from "hooks/useAppLoading"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
-import { useI18n } from "i18n"
-import { WelcomePage } from "pages/WelcomePage"
-import { AdminUsersPage } from "pages/admin/AdminUsersPage"
-import { MetricsPage } from "pages/admin/MetricsPage"
-import { AboutPage } from "pages/app/AboutPage"
-import { AddPage } from "pages/app/AddPage"
-import { CategoryDetailsPage } from "pages/app/CategoryDetailsPage"
-import { DonatePage } from "pages/app/DonatePage"
-import { FeedDetailsPage } from "pages/app/FeedDetailsPage"
-import { FeedEntriesPage } from "pages/app/FeedEntriesPage"
-import Layout from "pages/app/Layout"
-import { SettingsPage } from "pages/app/SettingsPage"
-import { TagDetailsPage } from "pages/app/TagDetailsPage"
-import { LoginPage } from "pages/auth/LoginPage"
-import { PasswordRecoveryPage } from "pages/auth/PasswordRecoveryPage"
-import { RegistrationPage } from "pages/auth/RegistrationPage"
-import React, { useEffect, useState } from "react"
-import { isSafari } from "react-device-detect"
-import ReactGA from "react-ga4"
-import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom"
-import Tinycon from "tinycon"
+import type React from "react"
+import { useEffect } from "react"
+import { HashRouter, Navigate, Route, Routes, useNavigate } from "react-router-dom"
+import { Constants } from "@/app/constants"
+import { redirectTo } from "@/app/redirect/slice"
+import { redirectToInitialSetup } from "@/app/redirect/thunks"
+import { reloadServerInfos } from "@/app/server/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import { ErrorBoundary } from "@/components/ErrorBoundary"
+import { Header } from "@/components/header/Header"
+import { Tree } from "@/components/sidebar/Tree"
+import { useI18n } from "@/i18n"
+import { AdminUsersPage } from "@/pages/admin/AdminUsersPage"
+import { MetricsPage } from "@/pages/admin/MetricsPage"
+import { AboutPage } from "@/pages/app/AboutPage"
+import { AddPage } from "@/pages/app/AddPage"
+import { CategoryDetailsPage } from "@/pages/app/CategoryDetailsPage"
+import { DonatePage } from "@/pages/app/DonatePage"
+import { FeedDetailsPage } from "@/pages/app/FeedDetailsPage"
+import { FeedEntriesPage } from "@/pages/app/FeedEntriesPage"
+import Layout from "@/pages/app/Layout"
+import { SettingsPage } from "@/pages/app/SettingsPage"
+import { TagDetailsPage } from "@/pages/app/TagDetailsPage"
+import { InitialSetupPage } from "@/pages/auth/InitialSetupPage"
+import { LoginPage } from "@/pages/auth/LoginPage"
+import { PasswordRecoveryPage } from "@/pages/auth/PasswordRecoveryPage"
+import { PasswordResetPage } from "@/pages/auth/PasswordResetPage"
+import { RegistrationPage } from "@/pages/auth/RegistrationPage"
+import { WelcomePage } from "@/pages/WelcomePage"
 
-function Providers(props: { children: React.ReactNode }) {
+function Providers(
+    props: Readonly<{
+        children: React.ReactNode
+    }>
+) {
+    const primaryColor = useAppSelector(state => state.user.settings?.primaryColor) || Constants.theme.defaultPrimaryColor
     return (
         <I18nProvider i18n={i18n}>
             <MantineProvider
                 defaultColorScheme="auto"
+                // 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 +75,6 @@ function Providers(props: { children: React.ReactNode }) {
     )
 }
 
-// api documentation page is very large, load only on-demand
-const ApiDocumentationPage = React.lazy(async () => await import("pages/app/ApiDocumentationPage"))
-
 function AppRoutes() {
     const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible)
 
@@ -81,10 +82,11 @@ function AppRoutes() {
         <Routes>
             <Route path="/" element={<Navigate to={`/app/category/${Constants.categories.all.id}`} replace />} />
             <Route path="welcome" element={<WelcomePage />} />
+            <Route path="setup" element={<InitialSetupPage />} />
             <Route path="login" element={<LoginPage />} />
             <Route path="register" element={<RegistrationPage />} />
             <Route path="passwordRecovery" element={<PasswordRecoveryPage />} />
-            <Route path="api" element={<ApiDocumentationPage />} />
+            <Route path="passwordReset" element={<PasswordResetPage />} />
             <Route path="app" element={<Layout header={<Header />} sidebar={<Tree />} sidebarVisible={sidebarVisible} />}>
                 <Route path="category">
                     <Route path=":id" element={<FeedEntriesPage sourceType="category" />} />
@@ -112,6 +114,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 +141,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>
-            <>
-                <UnreadCountTitleHandler unreadCount={unreadCount} enabled={unreadCountTitle} />
-                <UnreadCountFaviconHandler unreadCount={unreadCount} enabled={unreadCountFavicon} />
-                <BrowserExtensionBadgeUnreadCountHandler />
-                <CustomJsHandler />
-                <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>
-            </>
+            <HashRouter>
+                <InitialSetupHandler />
+                <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 = {
@@ -93,9 +105,13 @@ export const client = {
             })
         },
         register: async (req: RegistrationRequest) => await axiosInstance.post("user/register", req),
+        initialSetup: async (req: InitialSetupRequest) => await axiosInstance.post("user/initialSetup", req),
         passwordReset: async (req: PasswordResetRequest) => await axiosInstance.post("user/passwordReset", req),
+        passwordResetCallback: async (req: PasswordResetConfirmationRequest) => await axiosInstance.post("user/passwordResetCallback", req),
         getSettings: async () => await axiosInstance.get<Settings>("user/settings"),
         saveSettings: async (settings: Settings) => await axiosInstance.post("user/settings", settings),
+        sendTestPushNotification: async (settings: PushNotificationSettings) =>
+            await axiosInstance.post("user/pushNotificationTest", settings),
         getProfile: async () => await axiosInstance.get<UserModel>("user/profile"),
         saveProfile: async (req: ProfileModificationRequest) => await axiosInstance.post("user/profile", req),
         deleteProfile: async () => await axiosInstance.post("user/profile/deleteAccount"),
@@ -105,7 +121,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,14 +136,25 @@ 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 (isMessageError(err)) strings.push(err.response.data.message)
-        if (isMessageArrayError(err)) strings = [...strings, ...err.response.data.errors]
+        if (isCommaFeedApplicationError(err)) {
+            strings.push(i18n._(applicationErrorMessages[err.response.data.type]))
+        } 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
 }

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")
@@ -130,11 +135,19 @@ describe("entries", () => {
             } as RootState,
         })
 
-        store.dispatch(markAllEntries({ sourceType: "category", req: { id: "all", read: true } }))
+        store.dispatch(
+            markAllEntries({
+                sourceType: "category",
+                req: { id: "all", read: true },
+            })
+        )
         expect(store.getState().entries.entries).toStrictEqual([
             { id: "3", read: true },
             { id: "4", read: true },
         ])
-        expect(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,7 @@
-import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
-import { Constants } from "app/constants"
-import { loadEntries, loadMoreEntries, markAllEntries, markEntry, markMultipleEntries, starEntry, tagEntry } from "app/entries/thunks"
-import type { Entry } from "app/types"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
+import { Constants } from "@/app/constants"
+import { loadEntries, loadMoreEntries, markAllEntries, markEntry, markMultipleEntries, starEntry, tagEntry } from "@/app/entries/thunks"
+import type { Entry } from "@/app/types"
 
 export type EntrySourceType = "category" | "feed" | "tag"
 
@@ -28,6 +28,7 @@ interface EntriesState {
     loading: boolean
     search?: string
     scrollingToEntry: boolean
+    markAllAsReadConfirmationDialogOpen: boolean
 }
 
 const initialState: EntriesState = {
@@ -41,6 +42,7 @@ const initialState: EntriesState = {
     hasMore: true,
     loading: false,
     scrollingToEntry: false,
+    markAllAsReadConfirmationDialogOpen: false,
 }
 
 export const entriesSlice = createSlice({
@@ -61,6 +63,9 @@ export const entriesSlice = createSlice({
         setSearch: (state, action: PayloadAction<string>) => {
             state.search = action.payload
         },
+        setMarkAllAsReadConfirmationDialogOpen: (state, action: PayloadAction<boolean>) => {
+            state.markAllAsReadConfirmationDialogOpen = action.payload
+        },
     },
     extraReducers: builder => {
         builder.addCase(markEntry.pending, (state, action) => {
@@ -119,4 +124,4 @@ export const entriesSlice = createSlice({
     },
 })
 
-export const { setSearch } = entriesSlice.actions
+export const { setSearch, setMarkAllAsReadConfirmationDialogOpen } = entriesSlice.actions

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

@@ -1,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,9 @@ 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" || (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 +58,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 +131,41 @@ 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 markAllAsReadConfirmation = state.user.settings?.markAllAsReadConfirmation
+        const markAllAsReadNavigateToNextUnread = state.user.settings?.markAllAsReadNavigateToNextUnread
+
+        if (markAllAsReadConfirmation) {
+            thunkApi.dispatch(setMarkAllAsReadConfirmationDialogOpen(true))
+        } else {
+            await thunkApi.dispatch(
+                markAllEntries({
+                    sourceType: source.type,
+                    req: {
+                        id: source.id,
+                        read: true,
+                        olderThan: Date.now(),
+                        insertedBefore: entriesTimestamp,
+                    },
+                })
+            )
+            const isAllCategorySelected = source.type === "category" && source.id === Constants.categories.all.id
+            if (markAllAsReadNavigateToNextUnread && !isAllCategorySelected)
+                await thunkApi.dispatch(selectNextUnreadTreeItem({ direction: "forward" }))
+        }
+    }
+)
+
 export const starEntry = createAppAsyncThunk(
     "entries/entry/star",
     (arg: { entry: Entry; starred: boolean }) => {
         client.entry.star({
             id: arg.entry.id,
-            feedId: +arg.entry.feedId,
             starred: arg.starred,
         })
     },
@@ -204,7 +241,7 @@ export const selectEntry = createAppAsyncThunk(
 )
 
 const scrollToEntry = (entryElement: HTMLElement, margin: number, scrollSpeed: number | undefined, onScrollEnded: () => void) => {
-    const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
+    const header = document.getElementsByTagName("header").item(0)?.getBoundingClientRect()
     const offset = (header?.bottom ?? 0) + margin
     scrollToWithCallback({
         options: {

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,16 @@
-import { createAppAsyncThunk } from "app/async-thunk"
-import { Constants } from "app/constants"
-import { redirectTo } from "app/redirect/slice"
+import { createAppAsyncThunk } from "@/app/async-thunk"
+import { Constants } from "@/app/constants"
+import { redirectTo } from "@/app/redirect/slice"
 
 export const redirectToLogin = createAppAsyncThunk("redirect/login", (_, thunkApi) => thunkApi.dispatch(redirectTo("/login")))
 
 export const redirectToRegistration = createAppAsyncThunk("redirect/register", (_, thunkApi) => thunkApi.dispatch(redirectTo("/register")))
 
-export const 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

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

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

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

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

commafeed-client/src/app/store.ts

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

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

@@ -1,12 +1,22 @@
-import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
-import { markEntry } from "app/entries/thunks"
-import { redirectTo } from "app/redirect/slice"
-import { collapseTreeCategory, reloadTree } from "app/tree/thunks"
-import type { Category } from "app/types"
-import { visitCategoryTree } from "app/utils"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
+import { loadEntries, markEntry } from "@/app/entries/thunks"
+import { redirectTo } from "@/app/redirect/slice"
+import { collapseTreeCategory, reloadTree } from "@/app/tree/thunks"
+import type { Category, Subscription } from "@/app/types"
+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,16 @@
-import { createAppAsyncThunk } from "app/async-thunk"
-import { client } from "app/client"
-import { redirectToCategory, redirectToFeed } from "app/redirect/thunks"
-import { incrementUnreadCount } from "app/tree/slice"
-import type { CollapseRequest, Subscription } from "app/types"
-import { flattenCategoryTree, visitCategoryTree } from "app/utils"
+import { createAppAsyncThunk } from "@/app/async-thunk"
+import { client } from "@/app/client"
+import { Constants } from "@/app/constants"
+import { redirectToCategory, redirectToFeed } from "@/app/redirect/thunks"
+import { incrementUnreadCount } from "@/app/tree/slice"
+import type { CollapseRequest, Subscription } from "@/app/types"
+import { flattenCategoryTree, visitCategoryTree } from "@/app/utils"
 
 export const reloadTree = createAppAsyncThunk("tree/reload", async () => await client.category.getRoot().then(r => r.data))
 
 export const collapseTreeCategory = createAppAsyncThunk(
     "tree/category/collapse",
-    async (req: CollapseRequest) => await client.category.collapse(req)
+    async (req: CollapseRequest) => await client.category.collapse(req).then(r => r.data)
 )
 
 export const selectNextUnreadTreeItem = createAppAsyncThunk(
@@ -53,6 +54,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 { selectNextUnreadTreeItem } from "app/tree/thunks"
-import type { Category, Subscription } from "app/types"
-import { describe, expect, it } from "vitest"
+import type { AxiosResponse } from "axios"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import { client } from "@/app/client"
+import { loadEntries } from "@/app/entries/thunks"
+import { type RootState, reducers } from "@/app/store"
+import { newFeedEntriesDiscovered, selectNextUnreadTreeItem } from "@/app/tree/thunks"
+import type { Category, Entries, Entry, Subscription } from "@/app/types"
+
+vi.mock(import("@/app/client"))
 
 const createCategory = (id: string): Category => ({
     id,
@@ -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 type { LocalSettings, Settings, UserModel, ViewMode } from "app/types"
-import {
-    changeCustomContextMenu,
-    changeEntriesToKeepOnTopWhenScrolling,
-    changeExternalLinkIconDisplayMode,
-    changeLanguage,
-    changeMarkAllAsReadConfirmation,
-    changeMobileFooter,
-    changeReadingMode,
-    changeReadingOrder,
-    changeScrollMarks,
-    changeScrollMode,
-    changeScrollSpeed,
-    changeSharingSetting,
-    changeShowRead,
-    changeStarIconDisplayMode,
-    changeUnreadCountFavicon,
-    changeUnreadCountTitle,
-    reloadProfile,
-    reloadSettings,
-    reloadTags,
-} from "./thunks"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
+import type { LocalSettings, Settings, UserModel, ViewMode } from "@/app/types"
+import { changeSettings, 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) => {
-            if (!state.settings) return
-            state.settings.readingOrder = action.meta.arg
+        builder.addCase(changeSettings.fulfilled, () => {
+            showNotification({
+                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,7 +1,6 @@
-import { createAppAsyncThunk } from "app/async-thunk"
-import { client } from "app/client"
-import { reloadEntries } from "app/entries/thunks"
-import type { IconDisplayMode, ReadingMode, ReadingOrder, ScrollMode, SharingSettings } from "app/types"
+import { createAppAsyncThunk } from "@/app/async-thunk"
+import { client } from "@/app/client"
+import type { Settings } from "@/app/types"
 
 export const reloadSettings = createAppAsyncThunk("settings/reload", async () => await client.user.getSettings().then(r => r.data))
 
@@ -9,127 +8,8 @@ export const reloadProfile = createAppAsyncThunk("profile/reload", async () => a
 
 export const reloadTags = createAppAsyncThunk("entries/tags", async () => await client.entry.getTags().then(r => r.data))
 
-export const changeReadingMode = createAppAsyncThunk("settings/readingMode", (readingMode: ReadingMode, thunkApi) => {
+export const changeSettings = createAppAsyncThunk("settings/change", async (newSettings: Partial<Settings>, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
-    client.user.saveSettings({ ...settings, readingMode })
-    thunkApi.dispatch(reloadEntries())
+    await client.user.saveSettings({ ...settings, ...newSettings })
 })
-
-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(
-    "settings/starIconDisplayMode",
-    (starIconDisplayMode: IconDisplayMode, thunkApi) => {
-        const { settings } = thunkApi.getState().user
-        if (!settings) return
-        client.user.saveSettings({ ...settings, starIconDisplayMode })
-    }
-)
-
-export const changeExternalLinkIconDisplayMode = createAppAsyncThunk(
-    "settings/externalLinkIconDisplayMode",
-    (externalLinkIconDisplayMode: IconDisplayMode, thunkApi) => {
-        const { settings } = thunkApi.getState().user
-        if (!settings) return
-        client.user.saveSettings({ ...settings, externalLinkIconDisplayMode })
-    }
-)
-
-export const changeMarkAllAsReadConfirmation = createAppAsyncThunk(
-    "settings/markAllAsReadConfirmation",
-    (markAllAsReadConfirmation: boolean, thunkApi) => {
-        const { settings } = thunkApi.getState().user
-        if (!settings) return
-        client.user.saveSettings({ ...settings, markAllAsReadConfirmation })
-    }
-)
-
-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,
-    visitor: (category: Category) => void,
+    category: TreeCategory,
+    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,6 +35,14 @@ export function categoryUnreadCount(category?: Category): number {
         .reduce((total, current) => total + current, 0)
 }
 
+export function categoryHasNewEntries(category?: TreeCategory): boolean {
+    if (!category) return false
+
+    return flattenCategoryTree(category)
+        .flatMap(c => c.feeds)
+        .some(f => f.hasNewEntries)
+}
+
 export const calculatePlaceholderSize = ({ width, height, maxWidth }: { width?: number; height?: number; maxWidth: number }) => {
     const placeholderWidth = width && Math.min(width, maxWidth)
     const placeholderHeight = height && width && width > maxWidth ? height * (maxWidth / width) : height

commafeed-client/src/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,9 @@
 import type { MessageDescriptor } from "@lingui/core"
 import { useLingui } from "@lingui/react"
-import { ActionIcon, Box, Button, type ButtonVariant, Tooltip, useMantineTheme } from "@mantine/core"
-import type { ActionIconVariant } from "@mantine/core/lib/components/ActionIcon/ActionIcon"
-import { Constants } from "app/constants"
-import { useActionButton } from "hooks/useActionButton"
-import { type MouseEventHandler, type ReactNode, forwardRef } from "react"
+import { ActionIcon, type ActionIconVariant, Box, 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"
 
 interface ActionButtonProps {
     icon: ReactNode
@@ -29,7 +28,7 @@ export const ActionButton = forwardRef<HTMLDivElement, ActionButtonProps>((props
     const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
 
     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 = () => {
-    import("./DisablePullToRefresh.css")
-    return <></>
+export const DisablePullToRefresh = ({ enabled }: { enabled: boolean | undefined }) => {
+    return enabled ? <style>{`html, body { overscroll-behavior: none; }`}</style> : null
 }

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

commafeed-client/src/components/ReceivePushNotificationsChechbox.tsx

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

commafeed-client/src/components/RelativeDate.tsx

@@ -1,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: "",

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", () => {

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

@@ -1,13 +1,13 @@
 import { Box, Mark } from "@mantine/core"
-import { Constants } from "app/constants"
-import { calculatePlaceholderSize } from "app/utils"
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
-import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
 import escapeStringRegexp from "escape-string-regexp"
-import { 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: {
-    enclosureType: string
-    enclosureUrl: string
-}) {
+export function Enclosure(
+    props: Readonly<{
+        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 type { ExpendableEntry } from "app/entries/slice"
+import { useEffect } from "react"
+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"
-import { redirectToRootCategory } from "app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { toggleSidebar } from "app/tree/slice"
-import { selectNextUnreadTreeItem } from "app/tree/thunks"
-import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
-import { Loader } from "components/Loader"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
-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"
+} from "@/app/entries/thunks"
+import { redirectToRootCategory } from "@/app/redirect/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import { toggleSidebar } from "@/app/tree/slice"
+import { selectNextUnreadTreeItem } from "@/app/tree/thunks"
+import { KeyboardShortcutsHelp } from "@/components/KeyboardShortcutsHelp"
+import { Loader } from "@/components/Loader"
+import { useBrowserExtension } from "@/hooks/useBrowserExtension"
+import { useMousetrap } from "@/hooks/useMousetrap"
 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)
@@ -275,17 +273,7 @@ export function FeedEntries() {
     })
     useMousetrap("shift+a", () => {
         // mark all entries as read
-        dispatch(
-            markAllEntries({
-                sourceType: source.type,
-                req: {
-                    id: source.id,
-                    read: true,
-                    olderThan: Date.now(),
-                    insertedBefore: entriesTimestamp,
-                },
-            })
-        )
+        dispatch(markAllAsReadWithConfirmationIfRequired())
     })
     useMousetrap("g a", async () => await dispatch(redirectToRootCategory()))
     useMousetrap("f", () => dispatch(toggleSidebar()))
@@ -299,33 +287,25 @@ export function FeedEntries() {
 
     return (
         <InfiniteScroll
-            id="entries"
-            className={`view-mode-${viewMode}`}
+            className={`cf-entries cf-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 => {
-                        if (el) el.id = Constants.dom.entryId(entry)
-                    }}
-                    data-id={entry.id}
-                >
-                    <FeedEntry
-                        entry={entry}
-                        expanded={!!entry.expanded || viewMode === "expanded"}
-                        selected={entry.id === selectedEntryId}
-                        showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
-                        maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
-                        onHeaderClick={event => headerClicked(entry, event)}
-                        onHeaderRightClick={event => headerRightClicked(entry, event)}
-                        onBodyClick={() => bodyClicked(entry)}
-                        onSwipedLeft={async () => await swipedLeft(entry)}
-                    />
-                </article>
+                    entry={entry}
+                    expanded={!!entry.expanded || viewMode === "expanded"}
+                    selected={entry.id === selectedEntryId}
+                    showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
+                    maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
+                    onHeaderClick={event => headerClicked(entry, event)}
+                    onHeaderRightClick={event => headerRightClicked(entry, event)}
+                    onBodyClick={() => bodyClicked(entry)}
+                    onSwipedLeft={async () => await swipedLeft(entry)}
+                />
             ))}
         </InfiniteScroll>
     )

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

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

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

@@ -1,6 +1,6 @@
 import { Box } from "@mantine/core"
-import { useAppSelector } from "app/store"
-import type { Entry } from "app/types"
+import { useAppSelector } from "@/app/store"
+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)
@@ -61,19 +61,21 @@ export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
 
             <Separator />
 
-            <Item onClick={async () => await dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}>
-                <Group>
-                    {props.entry.starred ? <TbStarOff size={iconSize} /> : <TbStar size={iconSize} />}
-                    {props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
-                </Group>
-            </Item>
             {props.entry.markable && (
-                <Item onClick={async () => await dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))}>
-                    <Group>
-                        {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(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>
+                    <Item onClick={async () => await dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))}>
+                        <Group>
+                            {props.entry.read ? <TbMail size={iconSize} /> : <TbMailOpened size={iconSize} />}
+                            {props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
+                        </Group>
+                    </Item>
+                </>
             )}
             <Item onClick={async () => await dispatch(markEntriesUpToEntry(props.entry))}>
                 <Group>

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

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

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

@@ -1,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 { calculatePlaceholderSize } from "app/utils"
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
-import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
+import { Constants } from "@/app/constants"
+import { calculatePlaceholderSize } from "@/app/utils"
+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,7 +97,12 @@ function BrowserNativeShareButton({ url, description }: { url: string; descripti
     )
 }
 
-export function ShareButtons(props: { url: string; description: string }) {
+export function ShareButtons(
+    props: Readonly<{
+        url: string
+        description: string
+    }>
+) {
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const enabledSharingSites = (Object.keys(Constants.sharing) as Array<keyof SharingSettings>).filter(site => sharingSettings?.[site])
     const url = encodeURIComponent(props.url)

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

@@ -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() {

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 } from "@mantine/core/lib/components/Combobox/Combobox.types"
-import { Constants } from "app/constants"
-import { useAppSelector } from "app/store"
-import type { Category } from "app/types"
-import { flattenCategoryTree } from "app/utils"
+import { type ComboboxItem, Select, type SelectProps } from "@mantine/core"
+import { Constants } from "@/app/constants"
+import { useAppSelector } from "@/app/store"
+import type { Category } from "@/app/types"
+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()

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 => {
-            await dispatch(reloadTree())
-            dispatch(redirectToFeed(sub.data))
+        onSuccess: sub => {
+            dispatch(reloadTree()).then(() => dispatch(redirectToFeed(sub.data)))
         },
     })
 

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

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

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

@@ -1,11 +1,11 @@
-import { Box, Text } from "@mantine/core"
-import type { Entry } from "app/types"
-import { RelativeDate } from "components/RelativeDate"
-import { FeedFavicon } from "components/content/FeedFavicon"
-import { OpenExternalLink } from "components/content/header/OpenExternalLink"
-import { Star } from "components/content/header/Star"
-import { OnDesktop } from "components/responsive/OnDesktop"
-import { tss } from "tss"
+import { Box } from "@mantine/core"
+import type { Entry } from "@/app/types"
+import { FeedFavicon } from "@/components/content/FeedFavicon"
+import { OpenExternalLink } from "@/components/content/header/OpenExternalLink"
+import { Star } from "@/components/content/header/Star"
+import { RelativeDate } from "@/components/RelativeDate"
+import { OnDesktop } from "@/components/responsive/OnDesktop"
+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 type { Entry } from "app/types"
-import { RelativeDate } from "components/RelativeDate"
-import { FeedFavicon } from "components/content/FeedFavicon"
-import { OpenExternalLink } from "components/content/header/OpenExternalLink"
-import { Star } from "components/content/header/Star"
-import { tss } from "tss"
+import { Box, Flex, Space } from "@mantine/core"
+import type { Entry } from "@/app/types"
+import { FeedFavicon } from "@/components/content/FeedFavicon"
+import { OpenExternalLink } from "@/components/content/header/OpenExternalLink"
+import { Star } from "@/components/content/header/Star"
+import { RelativeDate } from "@/components/RelativeDate"
+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>
-            <Flex align="flex-start" justify="space-between">
+        <Box className="cf-header">
+            <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}>
-                    <Text c="dimmed">
-                        {props.entry.author && <span>by {props.entry.author}</span>}
-                        {props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}
-                        {props.entry.categories && <span>{props.entry.categories}</span>}
-                    </Text>
+                <Box className="cf-header-details">
+                    {props.entry.author && <span>by {props.entry.author}</span>}
+                    {props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}
+                    {props.entry.categories && <span>{props.entry.categories}</span>}
                 </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 type { Entry } from "app/types"
+import { useAppSelector } from "@/app/store"
+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()

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 { useAppDispatch, useAppSelector } from "app/store"
-import { changeReadingMode, changeReadingOrder } from "app/user/thunks"
-import { ActionButton } from "components/ActionButton"
-import { Loader } from "components/Loader"
-import { useActionButton } from "hooks/useActionButton"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
-import { useMobile } from "hooks/useMobile"
 import { useEffect } from "react"
 import {
     TbArrowDown,
     TbArrowUp,
+    TbChecks,
     TbExternalLink,
     TbEye,
     TbEyeOff,
@@ -24,7 +17,14 @@ import {
     TbSortDescending,
     TbUser,
 } from "react-icons/tb"
-import { MarkAllAsReadButton } from "./MarkAllAsReadButton"
+import { markAllAsReadWithConfirmationIfRequired, reloadEntries, search, selectNextEntry, selectPreviousEntry } from "@/app/entries/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import { 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() {
@@ -42,11 +42,14 @@ function HeaderToolbar(props: { children: React.ReactNode }) {
                 display: "flex",
                 justifyContent: "space-between",
             }}
+            className="cf-toolbar"
         >
             {props.children}
         </Box>
     ) : (
-        <Group gap={spacing}>{props.children}</Group>
+        <Group gap={spacing} className="cf-toolbar">
+            {props.children}
+        </Group>
     )
 }
 
@@ -60,11 +63,7 @@ export function Header() {
     const dispatch = useAppDispatch()
     const { _ } = useLingui()
 
-    const searchForm = useForm<{ search: string }>({
-        validate: {
-            search: value => (value.length > 0 && value.length < 3 ? _(msg`Search requires at least 3 characters`) : null),
-        },
-    })
+    const searchForm = useForm<{ search: string }>()
     const { setValues } = searchForm
 
     useEffect(() => {
@@ -74,8 +73,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 +129,23 @@ 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} />}
                     label={settings.readingOrder === "asc" ? msg`Asc` : msg`Desc`}
-                    onClick={async () => await dispatch(changeReadingOrder(settings.readingOrder === "asc" ? "desc" : "asc"))}
+                    onClick={toggleReadingOrder}
                 />
 
                 <Popover>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,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,
-    changeEntriesToKeepOnTopWhenScrolling,
-    changeExternalLinkIconDisplayMode,
-    changeLanguage,
-    changeMarkAllAsReadConfirmation,
-    changeMobileFooter,
-    changeScrollMarks,
-    changeScrollMode,
-    changeScrollSpeed,
-    changeSharingSetting,
-    changeShowRead,
-    changeStarIconDisplayMode,
-    changeUnreadCountFavicon,
-    changeUnreadCountTitle,
-} from "app/user/thunks"
-import { locales } from "i18n"
+    Box,
+    type ComboboxData,
+    Divider,
+    Group,
+    Loader,
+    NumberInput,
+    Radio,
+    Select,
+    type SelectProps,
+    SimpleGrid,
+    Stack,
+    Switch,
+} from "@mantine/core"
 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 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 settings = useAppSelector(state => state.user.settings)
     const { _ } = useLingui()
+    const dispatch = useAppDispatch()
 
     const scrollModeOptions: Record<ScrollMode, ReactNode> = {
         always: <Trans>Always</Trans>,
@@ -68,78 +52,89 @@ 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>}
-                value={language}
+                label={<Trans>Language</Trans>}
+                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}
-                onChange={async e => await dispatch(changeShowRead(e.currentTarget.checked))}
+                checked={settings.showRead}
+                onChange={e => dispatch(changeSettings({ showRead: e.currentTarget.checked }))}
             />
 
             <Switch
                 label={<Trans>Show confirmation when marking all entries as read</Trans>}
-                checked={markAllAsReadConfirmation}
-                onChange={async e => await dispatch(changeMarkAllAsReadConfirmation(e.currentTarget.checked))}
+                checked={settings.markAllAsReadConfirmation}
+                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}
-                onChange={async e => await dispatch(changeMobileFooter(e.currentTarget.checked))}
-            />
-
-            <Divider label={<Trans>Browser tab</Trans>} labelPosition="center" />
-
-            <Switch
-                label={<Trans>Show unread count in tab title</Trans>}
-                checked={unreadCountTitle}
-                onChange={async e => await dispatch(changeUnreadCountTitle(e.currentTarget.checked))}
-            />
-
-            <Switch
-                label={<Trans>Show unread count in tab favicon</Trans>}
-                checked={unreadCountFavicon}
-                onChange={async e => await dispatch(changeUnreadCountFavicon(e.currentTarget.checked))}
-            />
-
-            <Divider label={<Trans>Entry headers</Trans>} labelPosition="center" />
-
-            <Select
-                description={<Trans>Show star icon</Trans>}
-                value={starIconDisplayMode}
-                data={displayModeData}
-                onChange={async s => await dispatch(changeStarIconDisplayMode(s as IconDisplayMode))}
-            />
-
-            <Select
-                description={<Trans>Show external link icon</Trans>}
-                value={externalLinkIconDisplayMode}
-                data={displayModeData}
-                onChange={async s => await dispatch(changeExternalLinkIconDisplayMode(s as IconDisplayMode))}
-            />
-
-            <Switch
-                label={<Trans>Show CommaFeed's own context menu on right click</Trans>}
-                checked={customContextMenu}
-                onChange={async e => await dispatch(changeCustomContextMenu(e.currentTarget.checked))}
+                checked={settings.mobileFooter}
+                onChange={e => dispatch(changeSettings({ mobileFooter: 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}
-                onChange={async value => await dispatch(changeScrollMode(value as ScrollMode))}
+                value={settings.scrollMode}
+                onChange={value => dispatch(changeSettings({ scrollMode: value }))}
             >
                 <Group mt="xs">
                     {Object.entries(scrollModeOptions).map(e => (
@@ -152,20 +147,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}
-                onChange={async value => await dispatch(changeEntriesToKeepOnTopWhenScrolling(+value))}
+                value={settings.entriesToKeepOnTopWhenScrolling}
+                onChange={value => dispatch(changeSettings({ entriesToKeepOnTopWhenScrolling: +value }))}
             />
 
             <Switch
                 label={<Trans>Scroll smoothly when navigating between entries</Trans>}
-                checked={scrollSpeed ? scrollSpeed > 0 : false}
-                onChange={async e => await dispatch(changeScrollSpeed(e.currentTarget.checked))}
+                checked={settings.scrollSpeed ? settings.scrollSpeed > 0 : false}
+                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}
-                onChange={async e => await dispatch(changeScrollMarks(e.currentTarget.checked))}
+                checked={settings.scrollMarks}
+                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 +206,14 @@ export function DisplaySettings() {
                     <Switch
                         key={site}
                         label={Constants.sharing[site].label}
-                        checked={sharingSettings?.[site]}
-                        onChange={async e =>
-                            await dispatch(
-                                changeSharingSetting({
-                                    site,
-                                    value: e.currentTarget.checked,
+                        checked={settings.sharingSettings[site]}
+                        onChange={e =>
+                            dispatch(
+                                changeSettings({
+                                    sharingSettings: {
+                                        ...settings.sharingSettings,
+                                        [site]: e.currentTarget.checked,
+                                    },
                                 })
                             )
                         }

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

@@ -1,18 +1,18 @@
-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 { 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 +20,17 @@ interface FormData extends ProfileModificationRequest {
 
 export function ProfileSettings() {
     const profile = useAppSelector(state => state.user.profile)
+    const serverInfos = useAppSelector(state => state.server.serverInfos)
     const dispatch = useAppDispatch()
     const { _ } = useLingui()
+    const validationRules = useValidationRules()
 
     const form = useForm<FormData>({
         validate: {
-            newPasswordConfirmation: (value, values) => (value !== values.newPassword ? _(msg`Passwords do not match`) : null),
+            newPassword: validationRules.password,
+            newPasswordConfirmation: (value, values) => validationRules.passwordConfirmation(value, values.newPassword),
         },
+        validateInputOnChange: true,
     })
     const { setValues } = form
 
@@ -52,7 +56,9 @@ export function ProfileSettings() {
             ),
             labels: { confirm: <Trans>Confirm</Trans>, cancel: <Trans>Cancel</Trans> },
             confirmProps: { color: "red" },
-            onConfirm: async () => await deleteProfile.execute(),
+            onConfirm: () => {
+                deleteProfile.execute()
+            },
         })
 
     useEffect(() => {
@@ -85,8 +91,8 @@ 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.
-                                Use the form at the bottom of the page to generate a new API key
+                                This is your API key. It can be used for some read-only API operations and grants access 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
@@ -124,6 +130,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,7 +154,12 @@ export function ProfileSettings() {
                         required
                         {...form.getInputProps("currentPassword")}
                     />
-                    <TextInput type="email" label={<Trans>E-mail</Trans>} {...form.getInputProps("email")} required />
+                    <TextInput
+                        type="email"
+                        label={<Trans>E-mail</Trans>}
+                        {...form.getInputProps("email")}
+                        required={serverInfos?.emailAddressRequired}
+                    />
                     <PasswordInput
                         label={<Trans>New password</Trans>}
                         description={<Trans>Changing password will generate a new API key</Trans>}

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

@@ -0,0 +1,124 @@
+import { msg } from "@lingui/core/macro"
+import { useLingui } from "@lingui/react"
+import { Trans } from "@lingui/react/macro"
+import { Button, Divider, Group, Select, Stack, TextInput } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { useEffect } from "react"
+import { useAsyncCallback } from "react-async-hook"
+import { TbDeviceFloppy, TbSend } from "react-icons/tb"
+import { client, errorToStrings } from "@/app/client"
+import { redirectToSelectedSource } from "@/app/redirect/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import type { PushNotificationSettings as PushNotificationSettingsModel } from "@/app/types"
+import { 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"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { collapseTreeCategory } from "app/tree/thunks"
-import type { Category, Subscription } from "app/types"
-import { categoryUnreadCount, flattenCategoryTree } from "app/utils"
-import { Loader } from "components/Loader"
-import { OnDesktop } from "components/responsive/OnDesktop"
-import React from "react"
-import { TbChevronDown, TbChevronRight, TbInbox, TbStar, TbTag } from "react-icons/tb"
+} from "@/app/redirect/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import type { TreeSubscription } from "@/app/tree/slice"
+import { collapseTreeCategory } from "@/app/tree/thunks"
+import type { Category, Subscription } from "@/app/types"
+import { categoryHasNewEntries, categoryUnreadCount, flattenCategoryTree } from "@/app/utils"
+import { Loader } from "@/components/Loader"
+import { OnDesktop } from "@/components/responsive/OnDesktop"
 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}
         />
     )
@@ -115,6 +120,7 @@ export function Tree() {
         if (!isCategoryDisplayed(category)) return null
 
         const hasError = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => f.errorCount > errorThreshold))
+        const hasWarning = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => !!f.filterLegacy))
         return (
             <TreeNode
                 id={category.id}
@@ -122,10 +128,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 +141,7 @@ export function Tree() {
         )
     }
 
-    const feedNode = (feed: Subscription, level = 0) => {
+    const feedNode = (feed: TreeSubscription, level = 0) => {
         if (!isFeedDisplayed(feed)) return null
 
         return (
@@ -143,9 +151,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 +169,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 +194,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,30 @@ const useStyles = tss
         }
     })
 
-export function TreeNode(props: TreeNodeProps) {
+export function TreeNode(props: Readonly<TreeNodeProps>) {
     const { classes } = useStyles({
         selected: props.selected,
         hasError: props.hasError,
+        hasWarning: props.hasWarning,
         hasUnread: props.unread > 0,
     })
     return (
         <Box
             py={1}
             pl={props.level * 20}
-            className={classes.node}
+            className={`${classes.node} cf-treenode cf-treenode-${props.type}`}
             onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}
             data-id={props.id}
             data-type={props.type}
             data-unread-count={props.unread}
         >
-            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)}>
+            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)} className="cf-treenode-icon">
                 <Center>{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}</Center>
             </Box>
             <Box className={classes.nodeText}>{props.name}</Box>
             {!props.expanded && (
-                <Box>
-                    <UnreadCount unreadCount={props.unread} />
+                <Box className="cf-treenode-unread-count">
+                    <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 { Constants } from "app/constants"
-import { tss } from "tss"
+import { Badge, Indicator, Tooltip } from "@mantine/core"
+import { Constants } from "@/app/constants"
+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>
-                {count}
-            </Badge>
+            <Indicator
+                disabled={!props.showIndicator}
+                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 settings = useAppSelector(state => state.user.settings)
-    const rootCategory = useAppSelector(state => state.tree.rootCategory)
-    const tags = useAppSelector(state => state.user.tags)
+    const profileLoaded = useAppSelector(state => !!state.user.profile)
+    const settingsLoaded = useAppSelector(state => !!state.user.settings)
+    const rootCategoryLoaded = useAppSelector(state => !!state.tree.rootCategory)
+    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 { useAppSelector } from "app/store"
+import { i18n, type Messages } from "@lingui/core"
 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: "cs", label: "Čeština", dayjsImportFn: async () => await import("dayjs/locale/cs") },
-    { key: "cy", label: "Cymraeg", dayjsImportFn: async () => await import("dayjs/locale/cy") },
-    { 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: "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") },
+    {
+        key: "ar",
+        label: "العربية",
+        dayjsImportFn: async () => await import("dayjs/locale/ar"),
+    },
+    {
+        key: "ca",
+        label: "Català",
+        dayjsImportFn: async () => await import("dayjs/locale/ca"),
+    },
+    {
+        key: "cs",
+        label: "Čeština",
+        dayjsImportFn: async () => await import("dayjs/locale/cs"),
+    },
+    {
+        key: "cy",
+        label: "Cymraeg",
+        dayjsImportFn: async () => await import("dayjs/locale/cy"),
+    },
+    {
+        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: "es",
+        label: "Español",
+        dayjsImportFn: async () => await import("dayjs/locale/es"),
+    },
+    {
+        key: "fa",
+        label: "فارسی",
+        dayjsImportFn: async () => await import("dayjs/locale/fa"),
+    },
+    {
+        key: "fi",
+        label: "Suomi",
+        dayjsImportFn: async () => await import("dayjs/locale/fi"),
+    },
+    {
+        key: "fr",
+        label: "Français",
+        dayjsImportFn: async () => await import("dayjs/locale/fr"),
+    },
+    {
+        key: "gl",
+        label: "Galician",
+        dayjsImportFn: async () => await import("dayjs/locale/gl"),
+    },
+    {
+        key: "hu",
+        label: "Magyar",
+        dayjsImportFn: async () => await import("dayjs/locale/hu"),
+    },
+    {
+        key: "id",
+        label: "Indonesian",
+        dayjsImportFn: async () => await import("dayjs/locale/id"),
+    },
+    {
+        key: "it",
+        label: "Italiano",
+        dayjsImportFn: async () => await import("dayjs/locale/it"),
+    },
+    {
+        key: "ja",
+        label: "日本語",
+        dayjsImportFn: async () => await import("dayjs/locale/ja"),
+    },
+    {
+        key: "ko",
+        label: "한국어",
+        dayjsImportFn: async () => await import("dayjs/locale/ko"),
+    },
+    {
+        key: "ms",
+        label: "Bahasa Malaysian",
+        dayjsImportFn: async () => await import("dayjs/locale/ms"),
+    },
+    {
+        key: "nb",
+        label: "Norsk (bokmål)",
+        dayjsImportFn: async () => await import("dayjs/locale/nb"),
+    },
+    {
+        key: "nl",
+        label: "Nederlands",
+        dayjsImportFn: async () => await import("dayjs/locale/nl"),
+    },
+    {
+        key: "nn",
+        label: "Norsk (nynorsk)",
+        dayjsImportFn: async () => await import("dayjs/locale/nn"),
+    },
+    {
+        key: "pl",
+        label: "Polski",
+        dayjsImportFn: async () => await import("dayjs/locale/pl"),
+    },
+    {
+        key: "pt",
+        label: "Português",
+        dayjsImportFn: async () => await import("dayjs/locale/pt"),
+    },
+    {
+        key: "ru",
+        label: "Русский",
+        dayjsImportFn: async () => await import("dayjs/locale/ru"),
+    },
+    {
+        key: "sk",
+        label: "Slovenčina",
+        dayjsImportFn: async () => await import("dayjs/locale/sk"),
+    },
+    {
+        key: "sv",
+        label: "Svenska",
+        dayjsImportFn: async () => await import("dayjs/locale/sv"),
+    },
+    {
+        key: "tr",
+        label: "Türkçe",
+        dayjsImportFn: async () => await import("dayjs/locale/tr"),
+    },
+    {
+        key: "zh",
+        label: "简体中文",
+        dayjsImportFn: async () => await import("dayjs/locale/zh"),
+    },
 ]
 
 function activateLocale(locale: string) {
@@ -57,8 +169,12 @@ function activateLocale(locale: string) {
 }
 
 export const useI18n = () => {
-    const locale = useAppSelector(state => state.user.settings?.language)
+    const locale =
+        useAppSelector(state => state.user.settings?.language) ??
+        navigator.languages.map(l => l.split("-")[0]).find(l => locales.some(locale => locale.key === l)) ??
+        "en"
+
     useEffect(() => {
-        activateLocale(locale ?? "en")
+        activateLocale(locale)
     }, [locale])
 }

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

@@ -17,10 +17,6 @@ msgstr ""
 msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
 msgstr "<0>CommaFeed és un projecte de codi obert. El codi font està allotjat a </0><1>GitHub</1>."
 
-#: src/pages/app/FeedDetailsPage.tsx
-msgid "<0>Complete syntax is available </0><1>here</1>."
-msgstr "<0>La sintaxi completa està disponible </0><1>aquí</1>."
-
 #: src/pages/auth/RegistrationPage.tsx
 msgid "<0>Have an account?</0><1>Log in!</1>"
 msgstr "<0>Teniu un compte?</0><1>Inicieu la sessió!</1>"
@@ -33,18 +29,22 @@ msgstr "<0>Ei,</0><1> sóc la Jérémie de Bèlgica i fa més de 10 anys que tre
 msgid "<0>Need an account?</0><1>Sign up!</1>"
 msgstr "<0>Necessites un compte?</0><1>Registreu-vos!</1>"
 
-#: src/pages/app/AboutPage.tsx
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/app/AboutPage.tsx
 msgid "About"
 msgstr "Sobre"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Access token"
+msgstr "Token d'accés"
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Actions"
 msgstr "Accions"
 
 #: src/components/content/add/AddCategory.tsx
 msgid "Add"
-msgstr "Afegir"
+msgstr "Afegeix"
 
 #: src/pages/app/AddPage.tsx
 msgid "Add category"
@@ -54,19 +54,24 @@ msgstr "Afegeix categoria"
 msgid "Add user"
 msgstr "Afegeix usuari"
 
-#: src/pages/admin/AdminUsersPage.tsx
-#: src/components/header/ProfileMenu.tsx
 #: src/components/admin/UserEdit.tsx
+#: src/components/header/ProfileMenu.tsx
+#: src/pages/admin/AdminUsersPage.tsx
 msgid "Admin"
 msgstr "Administrador"
 
-#: src/components/sidebar/Tree.tsx
-#: src/components/header/Header.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Admin user name"
+msgstr "Nom d'usuari de l'administrador"
+
 #: src/components/content/add/CategorySelect.tsx
+#: src/components/header/Header.tsx
+#: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "All"
 msgstr "Tot"
 
-#: src/components/settings/DisplaySettings.tsx
 #: src/components/settings/DisplaySettings.tsx
 msgid "Always"
 msgstr "Sempre"
@@ -81,7 +86,7 @@ msgstr "Un fitxer opml és un fitxer XML que conté URL i categories de canals.
 
 #: src/components/content/add/Subscribe.tsx
 msgid "Analyze feed"
-msgstr "Analitzar el feed"
+msgstr "Analitza el canal"
 
 #: src/components/AnnouncementDialog.tsx
 msgid "Announcement"
@@ -89,11 +94,19 @@ msgstr "Anunci"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
-msgstr "clau API"
+msgstr "Clau API"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "API token"
+msgstr "Token d'API"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "App token"
+msgstr "Token d'aplicació"
 
 #: src/pages/app/CategoryDetailsPage.tsx
 msgid "Are you sure you want to delete category <0>{categoryName}</0>?"
-msgstr "Estàs segur que vols suprimir la categoria <0>{categoryName}</0>?"
+msgstr "Esteu segur que voleu suprimir la categoria <0>{categoryName}</0>?"
 
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Are you sure you want to delete user <0>{userName}</0> ?"
@@ -103,67 +116,73 @@ msgstr "Esteu segur que voleu suprimir l'usuari <0>{userName}</0>?"
 msgid "Are you sure you want to delete your account? There's no turning back!"
 msgstr "Esteu segur que voleu suprimir el vostre compte? "
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark all entries of <0>{sourceLabel}</0> as read?"
 msgstr "Esteu segur que voleu marcar totes les entrades de <0>{sourceLabel}</0> com a llegides?"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Are you sure you want to mark entries older than {threshold} days of <0>{sourceLabel}</0> as read?"
 msgstr "Esteu segur que voleu marcar les entrades més antigues de {threshold} dies de <0>{sourceLabel}</0> com a llegides?"
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Are you sure you want to unsubscribe from <0>{feedName}</0>?"
-msgstr "Estàs segur que vols cancel·lar la subscripció a <0>{feedName}</0>?"
+msgstr "Esteu segur que voleu cancel·lar la subscripció a <0>{feedName}</0>?"
 
 #: src/components/header/Header.tsx
 msgid "Asc"
 msgstr "Asc"
 
 #: src/pages/app/FeedDetailsPage.tsx
-msgid "Available variables are 'title', 'content', 'url' 'author' and 'categories' and their content is converted to lower case to ease string comparison."
-msgstr "Les variables disponibles són \"títol\", \"contingut\", \"url\" \"autor\" i \"categories\" i el seu contingut es converteix en minúscules per facilitar la comparació de cadenes."
+msgid "Auto-mark as read"
+msgstr "Marcar com a llegit automàticament"
 
 #: src/components/content/add/Subscribe.tsx
 msgid "Back"
 msgstr "Enrere"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
 msgid "Back to log in"
-msgstr "Tornar a iniciar sessió"
+msgstr "Torna a iniciar sessió"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Blue"
+msgstr "Blau"
+
+#: src/pages/app/AboutPage.tsx
+msgid "Browser extension"
+msgstr "Extensió del navegador"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Browser extension required for Chrome"
 msgstr "Extensió del navegador necessària per a Chrome"
 
-#: src/pages/app/AboutPage.tsx
-msgid "Browser extention"
-msgstr "Extensió del navegador"
-
 #: src/components/settings/DisplaySettings.tsx
 msgid "Browser tab"
-msgstr ""
+msgstr "Pestanya del navegador"
 
-#: src/pages/app/TagDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
-#: src/pages/app/FeedDetailsPage.tsx
-#: src/pages/app/CategoryDetailsPage.tsx
-#: src/pages/app/CategoryDetailsPage.tsx
-#: src/pages/admin/AdminUsersPage.tsx
-#: src/components/settings/ProfileSettings.tsx
-#: src/components/settings/ProfileSettings.tsx
-#: src/components/settings/CustomCodeSettings.tsx
-#: src/components/header/MarkAllAsReadButton.tsx
-#: src/components/content/add/ImportOpml.tsx
-#: src/components/content/add/AddCategory.tsx
+msgid "Build a filter expression to indicate what you want to read. Entries that don't match will be marked as read automatically."
+msgstr "Creeu una expressió de filtratge per indicar què voleu llegir. Les entrades que no coincideixin es marcaran com a llegides automàticament."
+
 #: src/components/admin/UserEdit.tsx
+#: src/components/content/add/AddCategory.tsx
+#: src/components/content/add/ImportOpml.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
+#: src/components/settings/CustomCodeSettings.tsx
+#: src/components/settings/ProfileSettings.tsx
+#: src/components/settings/PushNotificationSettings.tsx
+#: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
+#: src/pages/app/TagDetailsPage.tsx
 msgid "Cancel"
 msgstr "Cancel·la"
 
-#: src/pages/app/FeedDetailsPage.tsx
-#: src/pages/app/AboutPage.tsx
+#: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/Subscribe.tsx
-#: src/components/content/add/AddCategory.tsx
-#: src/components/content/add/AddCategory.tsx
+#: src/pages/app/AboutPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
 msgid "Category"
 msgstr "Categoria"
 
@@ -181,7 +200,7 @@ msgstr "Tanca el menu"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Cmd"
-msgstr ""
+msgstr "Cmd"
 
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed browser extension version {browserExtensionVersion}."
@@ -191,6 +210,10 @@ msgstr "Versió de l'extensió del navegador CommaFeed {browserExtensionVersion}
 msgid "CommaFeed is compatible with the Fever API. Use the following URL in your Fever-compatible mobile client. Login with your username and your <0>API key</0>."
 msgstr "CommaFeed és compatible amb l'API Fever. Utilitzeu l'URL següent al vostre client mòbil compatible amb Fever. Inicieu sessió amb el vostre nom d'usuari i la vostra <0>clau API</0>."
 
+#: src/components/settings/ProfileSettings.tsx
+msgid "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 <0>API key</0>."
+msgstr "CommaFeed és compatible amb l'API de Google Reader. Utilitzeu l'URL següent al vostre client mòbil compatible amb Google Reader. Inicieu sessió amb el vostre nom d'usuari i la vostra <0>clau API</0>."
+
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed next unread item"
 msgstr "CommaFeed següent element no llegit"
@@ -203,11 +226,11 @@ msgstr "CommaFeed versió {version} ({version})."
 msgid "Compact"
 msgstr "Compacte"
 
-#: src/pages/app/FeedDetailsPage.tsx
-#: src/pages/app/CategoryDetailsPage.tsx
-#: src/pages/admin/AdminUsersPage.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/settings/ProfileSettings.tsx
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
 msgid "Confirm"
 msgstr "Confirma"
 
@@ -215,10 +238,18 @@ msgstr "Confirma"
 msgid "Confirm password"
 msgstr "Confirmeu la contrasenya"
 
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Confirm Password"
+msgstr "Confirma la contrasenya"
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Cozy"
 msgstr "Acollidor"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Create Admin Account"
+msgstr "Crea un compte d'administrador"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "Ctrl"
@@ -239,7 +270,12 @@ msgstr "Regles CSS personalitzades que s'aplicaran"
 msgid "Custom JS code that will be executed on page load"
 msgstr "Codi JS personalitzat que s'executarà en carregar la pàgina"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Cyan"
+msgstr "Cian"
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 msgid "Dark"
 msgstr "Fosc"
 
@@ -247,11 +283,14 @@ msgstr "Fosc"
 msgid "Date created"
 msgstr "Data de creació"
 
+#: src/pages/app/FeedDetailsPage.tsx
+msgid "days"
+msgstr "dies"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 msgid "Delete"
 msgstr "Eliminar"
 
-#: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 msgid "Delete account"
 msgstr "Suprimeix el compte"
@@ -272,13 +311,18 @@ msgstr "Desc"
 msgid "Detailed"
 msgstr "Detallat"
 
-#: src/pages/app/SettingsPage.tsx
+#: src/components/settings/DisplaySettings.tsx
+msgid "Disable \"Pull to refresh\" browser behavior"
+msgstr "Desactiva el comportament \"Arrossega per actualitzar\"\\ del navegador"
+
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
+#: src/pages/app/SettingsPage.tsx
 msgid "Display"
 msgstr "Mostra"
 
-#: src/pages/app/DonatePage.tsx
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/app/DonatePage.tsx
 msgid "Donate"
 msgstr "Donar"
 
@@ -290,15 +334,14 @@ msgstr "Descarrega"
 msgid "Drag link to bookmark bar"
 msgstr "Arrossegueu l'enllaç a la barra d'adreces d'interès"
 
-#: src/pages/auth/PasswordRecoveryPage.tsx
-#: src/pages/auth/PasswordRecoveryPage.tsx
-#: src/pages/admin/AdminUsersPage.tsx
-#: src/components/settings/ProfileSettings.tsx
 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/ProfileSettings.tsx
+#: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "E-mail"
 msgstr "Correu electrònic"
 
-#: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
 msgid "E-mail address"
 msgstr "Adreça de correu electrònic"
@@ -307,10 +350,10 @@ msgstr "Adreça de correu electrònic"
 msgid "Edit user"
 msgstr "Edita l'usuari"
 
-#: src/pages/admin/AdminUsersPage.tsx
 #: src/components/admin/UserEdit.tsx
+#: src/pages/admin/AdminUsersPage.tsx
 msgid "Enabled"
-msgstr "activat"
+msgstr "Activat"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Enter"
@@ -322,20 +365,16 @@ msgstr "introduïu la vostra contrasenya actual per canviar la configuració del
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Entries to keep above the selected entry when scrolling"
-msgstr ""
+msgstr "Entrades que es mantindran a sobre de l'entrada seleccionada en desplaçar-se"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Entry headers"
-msgstr ""
+msgstr "Encapçalaments d'entrada"
 
 #: src/components/Alert.tsx
 msgid "Error"
 msgstr "Error"
 
-#: src/pages/app/FeedDetailsPage.tsx
-msgid "Example: {example}."
-msgstr "Exemple: {exemple}."
-
 #: src/components/header/ProfileMenu.tsx
 msgid "Expanded"
 msgstr "Ampliat"
@@ -344,8 +383,8 @@ msgstr "Ampliat"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "exporteu les vostres subscripcions i categories com a fitxer OPML que es pot importar a altres serveis de lectura de feeds"
 
-#: src/pages/WelcomePage.tsx
 #: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Extension options"
 msgstr "Opcions de l'extensió"
 
@@ -353,9 +392,8 @@ msgstr "Opcions de l'extensió"
 msgid "Feed name"
 msgstr "Nom del canal"
 
+#: src/components/content/add/Subscribe.tsx
 #: src/pages/app/FeedDetailsPage.tsx
-#: src/components/content/add/Subscribe.tsx
-#: src/components/content/add/Subscribe.tsx
 msgid "Feed URL"
 msgstr "URL del canal"
 
@@ -365,27 +403,31 @@ msgstr "Carrega tots els meus feeds ara"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "Fever API"
-msgstr ""
+msgstr "Fever API"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "Fever API URL"
-msgstr ""
+msgstr "URL de Fever API"
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Filtering expression"
 msgstr "Expressió de filtratge"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Font size"
+msgstr "Mida de la lletra"
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Force fetching feeds is not yet available."
-msgstr ""
+msgstr "La recuperació forçada de feeds encara no està disponible."
 
 #: src/pages/auth/LoginPage.tsx
 msgid "Forgot password?"
 msgstr "Heu oblidat la contrasenya?"
 
-#: src/pages/app/TagDetailsPage.tsx
-#: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
+#: src/pages/app/TagDetailsPage.tsx
 msgid "Generate an API key in your profile first."
 msgstr "primer genereu una clau API al vostre perfil."
 
@@ -393,9 +435,9 @@ msgstr "primer genereu una clau API al vostre perfil."
 msgid "Generate new API key"
 msgstr "Genera una nova clau d'API"
 
-#: src/pages/app/TagDetailsPage.tsx
-#: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
+#: src/pages/app/TagDetailsPage.tsx
 msgid "Generated feed url"
 msgstr "URL del feed generat"
 
@@ -414,16 +456,32 @@ msgstr "Vés a la documentació de l'API."
 
 #: src/pages/app/AboutPage.tsx
 msgid "Goodies"
-msgstr "Bones"
+msgstr "Extres"
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "Google Reader API"
+msgstr ""
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "Google Reader API URL"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Grape"
+msgstr "Raïm"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Gray"
+msgstr "Gris"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Green"
+msgstr "Verd"
 
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Id"
 msgstr "Id"
 
-#: src/pages/app/FeedDetailsPage.tsx
-msgid "If not empty, an expression evaluating to 'true' or 'false'. If false, new entries for this feed will be marked as read automatically."
-msgstr "Si no està buida, una expressió que s'avalua com a \"vertader\" o \"fals\". "
-
 #: src/components/settings/DisplaySettings.tsx
 msgid "If the entry doesn't entirely fit on the screen"
 msgstr "Si l'entrada no encaixa del tot a la pantalla"
@@ -438,15 +496,27 @@ msgstr "Importació"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "In expanded view, scrolling through entries mark them as read"
-msgstr "a la vista ampliada, desplaçant-se per les entrades les marqueu com a llegides"
+msgstr "En la vista ampliada, en desplaçar-se per les entrades, es marquen com a llegides"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Indigo"
+msgstr "Indi"
+
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Initial Setup"
+msgstr "Configuració inicial"
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Invalid password reset link. Please request a new one."
+msgstr "L'enllaç de restabliment de la contrasenya no és vàlid. Sol·liciteu-ne un de nou."
 
-#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryContextMenu.tsx
+#: src/components/content/FeedEntryFooter.tsx
 msgid "Keep unread"
 msgstr "Mantenir sense llegir"
 
-#: src/pages/app/AboutPage.tsx
 #: src/components/content/FeedEntries.tsx
+#: src/pages/app/AboutPage.tsx
 msgid "Keyboard shortcuts"
 msgstr "Dreceres de teclat"
 
@@ -470,12 +540,20 @@ msgstr "últim missatge d'actualització"
 msgid "Light"
 msgstr "Clar"
 
-#: src/pages/app/TagDetailsPage.tsx
-#: src/pages/app/FeedDetailsPage.tsx
+#: src/components/settings/DisplaySettings.tsx
+msgid "Lime"
+msgstr "Llima"
+
 #: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
+#: src/pages/app/TagDetailsPage.tsx
 msgid "Link"
 msgstr "Enllaç"
 
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Link to the documentation"
+msgstr "Enllaç a la documentació"
+
 #: src/hooks/useAppLoading.ts
 msgid "Loading profile..."
 msgstr "Carregant el perfil..."
@@ -492,9 +570,8 @@ msgstr "S'estan carregant les subscripcions..."
 msgid "Loading tags..."
 msgstr "Carregant les etiquetes..."
 
+#: src/pages/auth/LoginPage.tsx
 #: src/pages/WelcomePage.tsx
-#: src/pages/auth/LoginPage.tsx
-#: src/pages/auth/LoginPage.tsx
 msgid "Log in"
 msgstr "Inicia sessió"
 
@@ -504,32 +581,36 @@ msgstr "Tanca sessió"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Long press"
-msgstr ""
+msgstr "Prem llargament la tecla"
 
-#: src/pages/admin/AdminUsersPage.tsx
 #: src/components/header/ProfileMenu.tsx
+#: src/pages/admin/AdminUsersPage.tsx
 msgid "Manage users"
 msgstr "Gestionar usuaris"
 
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/header/Header.tsx
 msgid "Mark all as read"
 msgstr "Marca-ho tot com a llegit"
 
 #: src/components/KeyboardShortcutsHelp.tsx
-#: src/components/header/MarkAllAsReadButton.tsx
+#: src/components/MarkAllAsReadConfirmationDialog.tsx
 msgid "Mark all entries as read"
 msgstr "Marqueu totes les entrades com a llegides"
 
-#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryContextMenu.tsx
+#: src/components/content/FeedEntryFooter.tsx
 msgid "Mark as read"
 msgstr "Marca com a llegit"
 
-#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryContextMenu.tsx
+#: src/components/content/FeedEntryFooter.tsx
 msgid "Mark as read up to here"
 msgstr "Marca com a llegit fins aquí"
 
+#: src/pages/app/FeedDetailsPage.tsx
+msgid "Mark entries in this feed as read after this number of days. Leave empty to disable."
+msgstr "Marca les entrades d'aquest feed com a llegides després d'aquest nombre de dies. Deixeu-ho buit per desactivar-lo."
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Metrics"
 msgstr "mètriques"
@@ -546,15 +627,15 @@ msgstr "Mou la pàgina cap avall"
 msgid "Move the page up"
 msgstr "Mou la pàgina cap amunt"
 
-#: src/pages/app/FeedDetailsPage.tsx
 #: src/components/RelativeDate.tsx
-msgid "N/A"
-msgstr ""
-
 #: src/pages/app/FeedDetailsPage.tsx
-#: src/pages/app/CategoryDetailsPage.tsx
-#: src/pages/admin/AdminUsersPage.tsx
+msgid "N/A"
+msgstr "No es coneix"
+
 #: src/components/admin/UserEdit.tsx
+#: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
 msgid "Name"
 msgstr "Nom"
 
@@ -563,6 +644,9 @@ msgid "Navigate to a subscription by entering its name"
 msgstr "Navegueu a una subscripció introduint-ne el nom"
 
 #: src/components/settings/DisplaySettings.tsx
+msgid "Navigate to the next category/feed with unread entries when marking all entries as read"
+msgstr "Navega a la següent categoria/canal amb entrades no llegides quan es marquen totes les entrades com a llegides"
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Never"
 msgstr "Mai"
@@ -571,12 +655,16 @@ msgstr "Mai"
 msgid "New password"
 msgstr "Contrasenya nova"
 
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "New Password"
+msgstr "Contrasenya nova"
+
 #: src/pages/app/AboutPage.tsx
 msgid "Newest first"
 msgstr "El més nou primer"
 
-#: src/components/header/Header.tsx
 #: src/components/content/add/Subscribe.tsx
+#: src/components/header/Header.tsx
 msgid "Next"
 msgstr "Següent"
 
@@ -594,7 +682,7 @@ msgstr "No hi ha més entrades"
 
 #: src/components/content/ShareButtons.tsx
 msgid "No sharing options available."
-msgstr ""
+msgstr "No hi ha opcions de compartició disponibles."
 
 #: src/components/sidebar/TreeSearch.tsx
 msgid "Nothing found"
@@ -606,11 +694,11 @@ msgstr "el més vell primer"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "On desktop"
-msgstr ""
+msgstr "A l'escriptori"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "On mobile"
-msgstr ""
+msgstr "Al mòbil"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "On mobile, show action buttons at the bottom of the screen"
@@ -618,7 +706,7 @@ msgstr "Al mòbil, mostra els botons d'acció a la part inferior de la pantalla"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Only applies to compact, cozy and detailed modes"
-msgstr ""
+msgstr "Només s'aplica als modes compacte, acollidor i detallat"
 
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
@@ -673,14 +761,17 @@ msgstr "OPML"
 msgid "OPML export"
 msgstr "Exportació OPML"
 
-#: src/components/content/add/ImportOpml.tsx
 #: src/components/content/add/ImportOpml.tsx
 msgid "OPML file"
 msgstr "Fitxer OPML"
 
 #: src/components/content/add/ImportOpml.tsx
 msgid "OPML file is required"
-msgstr ""
+msgstr "Cal un fitxer OPML"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Orange"
+msgstr "Taronja"
 
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
@@ -694,24 +785,31 @@ msgstr "pares"
 msgid "Parent Category"
 msgstr "Categoria pare"
 
-#: src/pages/auth/RegistrationPage.tsx
-#: src/pages/auth/RegistrationPage.tsx
-#: src/pages/auth/LoginPage.tsx
-#: src/pages/auth/LoginPage.tsx
 #: src/components/admin/UserEdit.tsx
+#: src/pages/auth/InitialSetupPage.tsx
+#: src/pages/auth/LoginPage.tsx
+#: src/pages/auth/RegistrationPage.tsx
 msgid "Password"
 msgstr "Contrasenya"
 
+#: src/hooks/useValidationRules.ts
+msgid "Password must be at least {minimumPasswordLength} characters"
+msgstr "La contrasenya ha de tenir almenys {minimumPasswordLength} caràcters"
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Password Recovery"
 msgstr "Recuperació de contrasenya"
 
-#: src/components/settings/ProfileSettings.tsx
+#: src/hooks/useValidationRules.ts
 msgid "Passwords do not match"
 msgstr "Les contrasenyes no coincideixen"
 
-#: src/pages/app/FeedDetailsPage.tsx
+#: src/components/settings/DisplaySettings.tsx
+msgid "Pink"
+msgstr "Rosa"
+
 #: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
 msgid "Position"
 msgstr "Posició"
 
@@ -719,16 +817,49 @@ msgstr "Posició"
 msgid "Previous"
 msgstr "Anterior"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Primary color"
+msgstr "Color primari"
+
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
 msgstr "Perfil"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Push notification service"
+msgstr "Servei de notificacions push"
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Push notifications"
+msgstr "Notificacions push"
+
+#: src/components/ReceivePushNotificationsChechbox.tsx
+msgid "Push notifications are not configured in your user settings."
+msgstr "Les notificacions push no estan configurades a la vostra configuració d'usuari."
+
+#: src/components/ReceivePushNotificationsChechbox.tsx
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Push notifications are not enabled on this CommaFeed instance."
+msgstr "Les notificacions push no estan activades en aquesta instància de CommaFeed."
+
+#: src/components/ReceivePushNotificationsChechbox.tsx
+msgid "Receive push notifications"
+msgstr "Rep notificacions push"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Receive push notifications when new feed entries are discovered. Enable \"Receive push notifications\" in the settings of each feed for which you want to receive notifications."
+msgstr "Rebre notificacions push quan es descobreixin noves entrades de feed. Activeu \"Rep notificacions push\" a la configuració de cada feed per al qual vulgueu rebre notificacions."
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Recover password"
 msgstr "Recuperar la contrasenya"
 
-#: src/components/KeyboardShortcutsHelp.tsx
+#: src/components/settings/DisplaySettings.tsx
+msgid "Red"
+msgstr "Vermell"
+
 #: src/components/header/Header.tsx
+#: src/components/KeyboardShortcutsHelp.tsx
 msgid "Refresh"
 msgstr "Actualitzar"
 
@@ -736,20 +867,24 @@ msgstr "Actualitzar"
 msgid "Registrations are closed on this CommaFeed instance"
 msgstr "Els registres estan tancats en aquesta instància de CommaFeed"
 
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Reset Password"
+msgstr "Restableix la contrasenya"
+
 #: src/pages/app/AboutPage.tsx
 msgid "REST API"
 msgstr "API REST"
 
-#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Right click"
 msgstr "Clic dret"
 
-#: src/pages/app/FeedDetailsPage.tsx
-#: src/pages/app/CategoryDetailsPage.tsx
-#: src/components/settings/ProfileSettings.tsx
-#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/admin/UserEdit.tsx
+#: src/components/settings/CustomCodeSettings.tsx
+#: src/components/settings/ProfileSettings.tsx
+#: src/components/settings/PushNotificationSettings.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
 msgid "Save"
 msgstr "Desa"
 
@@ -765,28 +900,26 @@ msgstr "Desplaceu-vos suaument quan navegueu entre entrades"
 msgid "Scrolling"
 msgstr "Desplaçament"
 
-#: src/components/sidebar/TreeSearch.tsx
-#: src/components/sidebar/TreeSearch.tsx
-#: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
+#: src/components/sidebar/TreeSearch.tsx
 msgid "Search"
 msgstr "Cerca"
 
-#: src/components/header/Header.tsx
-msgid "Search requires at least 3 characters"
-msgstr "la cerca requereix almenys 3 caràcters"
-
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Select next unread feed/category"
-msgstr ""
+msgstr "Selecciona el següent canal/categoria no llegit"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Select previous unread feed/category"
-msgstr ""
+msgstr "Selecciona el canal/categoria anterior sense llegir"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Server URL"
+msgstr "URL del servidor"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Set focus on next entry without opening it"
-msgstr "posa el focus a la següent entrada sense obrir-la"
+msgstr "Posa el focus a la següent entrada sense obrir-la"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Set focus on previous entry without opening it"
@@ -806,10 +939,8 @@ msgstr "Comparteix"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Sharing sites"
-msgstr "Compartir llocs"
+msgstr "Compartir a altres llocs web"
 
-#: src/components/KeyboardShortcutsHelp.tsx
-#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Shift"
 msgstr "canvi"
@@ -832,7 +963,7 @@ msgstr "Mostra el menú d'entrada (mòbil)"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show external link icon"
-msgstr ""
+msgstr "Mostra la icona d'enllaç extern"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show feeds and categories with no unread entries"
@@ -848,19 +979,18 @@ msgstr "Mostra el menú natiu (escriptori)"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show star icon"
-msgstr ""
+msgstr "Mostra la icona d'estrella"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show unread count in tab favicon"
-msgstr ""
+msgstr "Mostra el recompte de no llegits a la icona de favorits de la pestanya"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show unread count in tab title"
-msgstr ""
+msgstr "Mostra el recompte de no llegits al títol de la pestanya"
 
+#: src/pages/auth/RegistrationPage.tsx
 #: src/pages/WelcomePage.tsx
-#: src/pages/auth/RegistrationPage.tsx
-#: src/pages/auth/RegistrationPage.tsx
 msgid "Sign up"
 msgstr "Registra't"
 
@@ -868,25 +998,24 @@ msgstr "Registra't"
 msgid "Something bad just happened..."
 msgstr "Acaba de passar una cosa dolenta..."
 
-#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Space"
 msgstr "Espai"
 
-#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryContextMenu.tsx
+#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/header/Star.tsx
 msgid "Star"
 msgstr "Estrella"
 
-#: src/pages/app/CategoryDetailsPage.tsx
 #: src/components/sidebar/Tree.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedEntriesPage.tsx
 msgid "Starred"
 msgstr "Estrellat"
 
+#: src/components/content/add/Subscribe.tsx
 #: src/pages/app/AddPage.tsx
-#: src/components/content/add/Subscribe.tsx
-#: src/components/content/add/Subscribe.tsx
 msgid "Subscribe"
 msgstr "Subscriu-te"
 
@@ -918,11 +1047,22 @@ msgstr "Canvia al tema clar"
 msgid "System"
 msgstr "Sistema"
 
-#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Tags"
 msgstr "Etiquetes"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Teal"
+msgstr "Blau verdós"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Test"
+msgstr "Prova"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Test notification sent successfully."
+msgstr "La notificació de prova s'ha enviat correctament."
+
 #: src/components/content/add/Subscribe.tsx
 msgid "The URL for the feed you want to subscribe to. You can also use the website's url directly and CommaFeed will try to find the feed in the page."
 msgstr "l'URL del canal al qual us voleu subscriure. "
@@ -931,9 +1071,18 @@ msgstr "l'URL del canal al qual us voleu subscriure. "
 msgid "Theme"
 msgstr "Tema"
 
+#. placeholder {0}: feed.filterLegacy
+#: src/pages/app/FeedDetailsPage.tsx
+msgid "This feed has a legacy filter that cannot be edited and is not applied. Please recreate the filter using the new expression editor. The legacy filter expression was: <0>{0}</0>"
+msgstr "Aquest feed té un filtre heretat que no es pot editar i no s'aplica. Torneu a crear el filtre amb el nou editor d'expressions. L'expressió del filtre heretat era: <0>{0}</0>"
+
 #: src/components/settings/ProfileSettings.tsx
-msgid "This is your API key. It can be used for some read-only API operations and grants access to the Fever API. Use the form at the bottom of the page to generate a new API key"
-msgstr "Aquesta és la vostra clau de l'API. Es pot utilitzar per a algunes operacions de l'API de només lectura i permet accedir a l'API Fever. Utilitzeu el formulari de la part inferior de la pàgina per generar una nova clau d'API."
+msgid "This is your API key. It can be used for some read-only API operations and grants access to the Fever API and the Google Reader API. Use the form at the bottom of the page to generate a new API key"
+msgstr "Aquesta és la vostra clau API. Es pot utilitzar per a algunes operacions de l'API de només lectura i dona accés a l'API Fever i a l'API de Google Reader. Utilitzeu el formulari a la part inferior de la pàgina per generar una nova clau API"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "This setting can cause scrolling issues on some browsers (e.g. Safari)"
+msgstr "Aquesta configuració pot causar problemes de desplaçament en alguns navegadors (per exemple, Safari)"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
@@ -947,6 +1096,10 @@ msgstr "Canvia la barra lateral"
 msgid "Toggle starred status of current entry"
 msgstr "Commuta l'estat destacat de l'entrada actual"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Topic"
+msgstr "Tema"
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Proveu CommaFeed amb el compte de demostració: demo/demo"
@@ -959,26 +1112,32 @@ msgstr "Prova la demostració!"
 msgid "Unread"
 msgstr "Sense llegir"
 
-#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryContextMenu.tsx
+#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/header/Star.tsx
 msgid "Unstar"
 msgstr "Desestrellar"
 
-#: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Unsubscribe"
 msgstr "Donar-se de baixa"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "User key"
+msgstr "Clau d'usuari"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "User name"
 msgstr "Nom d'usuari"
 
-#: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
 msgid "User Name or E-mail"
 msgstr "Nom d'usuari o correu electrònic"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Violet"
+msgstr "Violeta"
+
 #: src/components/Alert.tsx
 msgid "Warning"
 msgstr "Avís"
@@ -987,6 +1146,18 @@ msgstr "Avís"
 msgid "Website"
 msgstr "Lloc web"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Welcome! This appears to be the first time you're running CommaFeed. Please create an administrator account to get started."
+msgstr "Benvingut! Sembla que aquesta és la primera vegada que executeu CommaFeed. Creeu un compte d'administrador per començar."
+
+#: src/app/client.ts
+msgid "Wrong username or password"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Yellow"
+msgstr "Groc"
+
 #: src/pages/app/FeedEntriesPage.tsx
 msgid "You don't have any subscriptions yet. Why not try adding one by clicking on the + sign at the top of the page?"
 msgstr "Encara no teniu cap subscripció. "
@@ -994,3 +1165,7 @@ msgstr "Encara no teniu cap subscripció. "
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
 msgstr "Els vostres feeds s'han posat a la cua per actualitzar-los."
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Your password has been changed. You can now log in with your new password."
+msgstr "La vostra contrasenya s'ha canviat. Ara podeu iniciar la sessió amb la vostra nova contrasenya."