Update docker script to build pgsql variant

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

.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,13 +23,13 @@ jobs:
     steps:
       # Checkout
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
           fetch-depth: 0
 
       # Setup
       - name: Set up GraalVM
-        uses: graalvm/setup-graalvm@01ed653ac833fe80569f1ef9f25585ba2811baab # v1
+        uses: graalvm/setup-graalvm@03e8abf916fd0e281b2efe7b2da3378bb0a1d085 # v1
         with:
           java-version: ${{ env.JAVA_VERSION }}
           distribution: "graalvm"
@@ -48,39 +48,39 @@ jobs:
         run: mkdir -p target/pages/documentation/custom-css
 
       - name: Convert readme file to html
-        uses: jaywcjlove/markdown-to-html-cli@d2c8ffd676de1801e2586904bc540a938e4bc480 # v5.0.3
+        uses: jaywcjlove/markdown-to-html-cli@cff9330af4ca8048b197a76d9eb1db189c2a7cee # v5.0.4
         with:
           source: README.md
           output: target/pages/index.html
 
       - name: Convert config documentation to html
-        uses: jaywcjlove/markdown-to-html-cli@d2c8ffd676de1801e2586904bc540a938e4bc480 # v5.0.3
+        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@d2c8ffd676de1801e2586904bc540a938e4bc480 # v5.0.3
+        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@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
         if: matrix.os == 'ubuntu-latest' # we only need to upload the cross-platform artifact once per database
         with:
           name: commafeed-${{ matrix.database }}-jvm
           path: commafeed-server/target/commafeed-*.zip
 
       - name: Upload native executable
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7
         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@7b1f4a764d45c48632c6b24a0339c27f5614fb0b # v4
         if: matrix.os == 'ubuntu-latest' && matrix.database == 'h2' # we only need to upload the pages once
         with:
           path: target/pages
@@ -98,23 +98,23 @@ jobs:
     steps:
       # Checkout
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
           fetch-depth: 0
 
       # Setup
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3
+        uses: docker/setup-qemu-action@ce360397dd3f832beb865e1373c09c0e9f86d70a # v4
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3
+        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4
 
       - name: Install required packages
         run: sudo apt-get install -y rename unzip
 
       # Prepare artifacts
       - name: Download artifacts
-        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8
         with:
           pattern: commafeed-${{ matrix.database }}-*
           path: ./artifacts
@@ -135,7 +135,7 @@ jobs:
 
       # Docker
       - name: Login to Container Registry
-        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3
+        uses: docker/login-action@b45d80f862d83dbcd57f89517bcf500b2ab88fb2 # v4
         if: ${{ env.DOCKERHUB_USERNAME != '' }}
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -143,7 +143,7 @@ jobs:
 
       ## build but don't push for PRs and renovate
       - name: Docker build - native
-        uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
         with:
           context: .
           file: commafeed-server/src/main/docker/Dockerfile.native
@@ -151,7 +151,7 @@ jobs:
           platforms: linux/amd64,linux/arm64/v8
 
       - name: Docker build - jvm
-        uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
         with:
           context: .
           file: commafeed-server/src/main/docker/Dockerfile.jvm
@@ -160,7 +160,7 @@ jobs:
 
       ## build and push tag
       - name: Docker build and push tag - native
-        uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
         if: ${{ github.ref_type == 'tag' }}
         with:
           context: .
@@ -172,7 +172,7 @@ jobs:
             athou/commafeed:${{ github.ref_name }}-${{ matrix.database }}
 
       - name: Docker build and push tag - jvm
-        uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
         if: ${{ github.ref_type == 'tag' }}
         with:
           context: .
@@ -185,7 +185,7 @@ jobs:
 
       ## build and push master
       - name: Docker build and push master - native
-        uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
         if: ${{ github.ref_name == 'master' }}
         with:
           context: .
@@ -195,7 +195,7 @@ jobs:
           tags: athou/commafeed:master-${{ matrix.database }}
 
       - name: Docker build and push master - jvm
-        uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6
+        uses: docker/build-push-action@d08e5c354a6adb9ed34480a06d141179aa583294 # v7
         if: ${{ github.ref_name == 'master' }}
         with:
           context: .
@@ -215,12 +215,12 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
           fetch-depth: 0
 
       - name: Download artifacts
-        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8
         with:
           pattern: commafeed-*
           path: ./artifacts
@@ -236,7 +236,7 @@ jobs:
           version: ${{ github.ref_name }}
 
       - name: Create GitHub release
-        uses: ncipollo/release-action@440c8c1cb0ed28b9f43e4d1d670870f059653174 # v1
+        uses: ncipollo/release-action@339a81892b84b4eeb0f6e744e4574d79d0d9b8dd # v1
         with:
           name: CommaFeed ${{ github.ref_name }}
           body: ${{ steps.changelog_reader.outputs.changes }}
@@ -249,12 +249,12 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
           fetch-depth: 0
 
       - name: Update Docker Hub Description
-        uses: peter-evans/dockerhub-description@432a30c9e07499fd01da9f8a49f0faf9e0ca5b77 # v4
+        uses: peter-evans/dockerhub-description@1b9a80c056b620d92cedb9d9b5a223409c68ddfa # v5
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}

.mvn/wrapper/maven-wrapper.properties

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

CHANGELOG.md

@@ -1,5 +1,67 @@
 # Changelog
 
+## [7.0.0]
+
+- Replaced the JEXL filter expression for marking feed entries as read automatically with a user-friendly visual query builder. Expressions are now evaluated with Common Expression Language, which is safer than JEXL and sanboxed by default.
+- Added a per-feed setting for sending push notifications to ntfy, Gotify or Pushover when new feed entries are discovered (#1610)
+- Added a per-feed setting for marking entries as read after a number of days (#2041)
+- The default value of `commafeed.http-client.block-local-addresses` is now false, allowing users to subscribe to feeds only available on their local network. This may be a security risk (SSRF) if your instance is accessible by untrusted users, so you may want to set it to true if you host a public instance of CommaFeed with user registeration enabled.
+- When `commafeed.http-client.block-local-addresses` is enabled, SSRF is now also mitigated by blocking public websites redirecting to local ones.
+
+## [6.2.0]
+
+- Starred entries are no longer deleted after a certain amount of time, they are now kept indefinitely. The new `commafeed.database.cleanup.keep-starred-entries` setting can be disabled to restore the previous behavior if you want to keep deleting starred entries during normal entries cleanup (#1581)
+
+## [6.1.1]
+
+- Fix old starred entries not loading if they were marked as read (#2031)
+
+## [6.1.0]
+
+- When clicking on the password reset link, a random password is no longer generated automatically. The user is now redirected to a page where they can set their own password (#2023)
+- Use browser preferred language instead of English when using CommaFeed for the first time (#2018)
+- The profile menu is now closed when scrolling the page (#2019)
+- The "disable pull to refresh" feature is now disabled by default (#2030)
+
+## [6.0.0]
+
+- When booting CommaFeed for the first time, the default "admin" account is no longer created automatically. A setup wizard will guide you through the creation of an admin account
+- Default password complexity requirements have been lowered for local network deployments, where strict password rules are often unnecessary. The `commafeed.users.strict-password-policy` setting has been replaced by `commafeed.users.minimum-password-length` with a default value of `4` (#1916)
+- Email addresses are no longer required when creating users and when they update their profile. The `commafeed.users.email-address-required` setting has been added to restore the previous behavior (#1914)
+- Java 25+ is now required to build and run CommaFeed
+
+## [5.12.1]
+
+- The favicon is now crispier (#1978)
+- The ReadKit iOS app now works via the Fever API (#1602)
+
+## [5.12.0]
+
+- Added a setting to disable the "disable pull to refresh" feature because it messes with some browsers (#1168)
+- Emojis in feeds are now correctly displayed (#1955)
+- Don't show "Star/Unstar" in the context menu if the entry is too old to be starred (#1935)
+- Invalid relative urls in feeds no longer prevent those feeds from being parsed (#1939)
+- Fix an issue that could prevent large feeds from being parsed when using Java 24+ (#1961)
+- Enforce user password validation when created in the admin view (#1937)
+- The process in the docker native image is now called "commafeed" instead of "application"
+
+## [5.11.1]
+
+- The search limit of 3 characters has been removed (#1887)
+- Fix an issue that caused feed filtering expressions to be incorrectly converted to lowercase when saving them (#1899)
+
+## [5.11.0]
+
+- Add an option to navigate to the next unread category/feed when marking all entries as read (#1807)
+- Google Analytics support has been removed
+
+## [5.10.0]
+
+- Add an indicator next to each feed's unread count in the tree to show when new entries are discovered while the app is open (#1762)
+- Feeds with uppercase HTTP:// or HTTPS:// URLs are now correctly handled again
+- The aarch64 native executable now also works on the Raspberry Pi 5 (#1795)
+- Improve general performance of the UI by reducing the number of re-renders, especially when a lot of entries are displayed (#1087)
+
 ## [5.9.0]
 
 - A lot of CSS classes have been added to the elements of the application to ease custom CSS rules (#1757)

README-fork.md

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

README.md

@@ -17,6 +17,7 @@ Google Reader inspired self-hosted RSS reader, based on Quarkus and React/TypeSc
 - REST API
 - Fever-compatible API for native mobile apps
 - Can automatically mark articles as read based on user-defined rules
+- 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
@@ -26,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
 
@@ -103,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.
 
@@ -113,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
 

SECURITY.md

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

commafeed-client/.gitignore

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

commafeed-client/.husky/pre-commit

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

commafeed-client/biome.json

@@ -1,5 +1,5 @@
 {
-    "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+    "$schema": "https://biomejs.dev/schemas/2.4.7/schema.json",
     "formatter": {
         "indentStyle": "space",
         "indentWidth": 4,
@@ -13,15 +13,7 @@
             "arrowParentheses": "asNeeded"
         }
     },
-    "linter": {
-        "rules": {
-            "correctness": {
-                "noUnusedImports": "error",
-                "noUnusedVariables": "error"
-            }
-        }
-    },
     "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/lint-staged.config.js

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

commafeed-client/package.json

@@ -12,73 +12,75 @@
         "test:ci": "vitest run",
         "lint": "biome check",
         "lint:fix": "biome check --write",
-        "i18n:extract": "lingui extract --clean"
+        "i18n:extract": "lingui extract --clean",
+        "prepare": "cd .. && husky ./commafeed-client/.husky"
     },
     "dependencies": {
         "@emotion/react": "^11.14.0",
-        "@fontsource/open-sans": "^5.2.5",
+        "@fontsource/open-sans": "^5.2.7",
-        "@lingui/core": "^5.3.1",
+        "@lingui/core": "^5.9.3",
-        "@lingui/react": "^5.3.1",
+        "@lingui/react": "^5.9.3",
-        "@mantine/core": "^8.0.0",
+        "@mantine/core": "^8.3.16",
-        "@mantine/form": "^8.0.0",
+        "@mantine/form": "^8.3.16",
-        "@mantine/hooks": "^8.0.0",
+        "@mantine/hooks": "^8.3.16",
-        "@mantine/modals": "^8.0.0",
+        "@mantine/modals": "^8.3.16",
-        "@mantine/notifications": "^8.0.0",
+        "@mantine/notifications": "^8.3.16",
-        "@mantine/spotlight": "^8.0.0",
+        "@mantine/spotlight": "^8.3.16",
         "@monaco-editor/react": "^4.7.0",
-        "@reduxjs/toolkit": "^2.8.1",
+        "@react-querybuilder/mantine": "^8.14.0",
-        "axios": "^1.9.0",
+        "@reduxjs/toolkit": "^2.11.2",
-        "dayjs": "^1.11.13",
+        "@rolldown/plugin-babel": "^0.2.2",
+        "axios": "^1.13.6",
+        "dayjs": "^1.11.20",
         "escape-string-regexp": "^5.0.0",
         "interweave": "^13.1.1",
-        "monaco-editor": "^0.52.2",
+        "monaco-editor": "^0.55.1",
         "mousetrap": "^1.6.5",
-        "react": "^19.1.0",
+        "react": "^19.2.4",
         "react-async-hook": "^4.0.0",
         "react-contexify": "^6.0.0",
-        "react-device-detect": "^2.2.3",
+        "react-dom": "^19.2.4",
-        "react-dom": "^19.1.0",
+        "react-draggable": "^4.5.0",
-        "react-draggable": "^4.4.6",
+        "react-icons": "^5.6.0",
-        "react-ga4": "^2.1.0",
-        "react-icons": "^5.5.0",
         "react-infinite-scroller": "^1.2.6",
+        "react-querybuilder": "^8.14.0",
         "react-redux": "^9.2.0",
-        "react-router-dom": "^7.6.0",
+        "react-router-dom": "^7.13.1",
         "react-swipeable": "^7.0.2",
-        "redoc": "^2.5.0",
+        "style-to-object": "^1.0.14",
-        "style-to-object": "^1.0.8",
         "throttle-debounce": "^5.0.2",
         "tinycon": "^0.6.8",
-        "tss-react": "^4.9.18",
+        "tss-react": "^4.9.20",
         "websocket-heartbeat-js": "^1.1.3"
     },
     "devDependencies": {
-        "@biomejs/biome": "^1.9.4",
+        "@biomejs/biome": "^2.4.7",
-        "@lingui/babel-plugin-lingui-macro": "^5.3.1",
+        "@lingui/babel-plugin-lingui-macro": "^5.9.3",
-        "@lingui/cli": "^5.3.1",
+        "@lingui/cli": "^5.9.3",
-        "@lingui/vite-plugin": "^5.3.1",
+        "@lingui/vite-plugin": "^5.9.3",
-        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/react": "^16.3.0",
+        "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",
         "@types/mousetrap": "^1.6.15",
-        "@types/react": "^19.1.4",
+        "@types/react": "^19.2.14",
-        "@types/react-dom": "^19.1.5",
+        "@types/react-dom": "^19.2.3",
         "@types/react-infinite-scroller": "^1.2.5",
         "@types/throttle-debounce": "^5.0.2",
         "@types/tinycon": "^0.6.7",
-        "@vitejs/plugin-react": "^4.4.1",
+        "@vitejs/plugin-react": "^6.0.1",
-        "babel-plugin-macros": "^3.1.0",
+        "babel-plugin-react-compiler": "1.0.0",
-        "jsdom": "^26.1.0",
+        "husky": "^9.1.7",
-        "rollup-plugin-visualizer": "^5.14.0",
+        "jsdom": "^29.0.0",
-        "typescript": "^5.8.3",
+        "lint-staged": "^16.4.0",
-        "vite": "^6.3.5",
+        "typescript": "^5.9.3",
-        "vite-plugin-checker": "^0.9.3",
+        "vite": "^8.0.0",
-        "vite-tsconfig-paths": "^5.1.4",
+        "vite-plugin-checker": "^0.12.0",
-        "vitest": "^3.1.3"
+        "vitest": "^4.1.0",
+        "yaml": "^2.8.2"
     },
     "overrides": {
         "react-infinite-scroller": {
-            "react": "^19.1.0"
+            "react": "^19.2.4"
         }
     }
 }

commafeed-client/pom.xml

@@ -6,16 +6,16 @@
 	<parent>
 		<groupId>com.commafeed</groupId>
 		<artifactId>commafeed</artifactId>
-		<version>5.9.0</version>
+		<version>7.0.0</version>
 	</parent>
 	<artifactId>commafeed-client</artifactId>
 	<name>CommaFeed Client</name>
 
 	<properties>
 		<!-- renovate: datasource=node-version depName=node -->
-		<node.version>v22.15.0</node.version>
+		<node.version>v24.14.0</node.version>
 		<!-- renovate: datasource=npm depName=npm -->
-		<npm.version>11.3.0</npm.version>
+		<npm.version>11.11.1</npm.version>
 	</properties>
 
 	<build>
@@ -23,7 +23,7 @@
 			<plugin>
 				<groupId>com.github.eirslett</groupId>
 				<artifactId>frontend-maven-plugin</artifactId>
-				<version>1.15.1</version>
+				<version>2.0.0</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,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="393.84613"
+   width="393.84613"
+   viewBox="0 0 5.0480766 5.0480766"
+   version="1.1"
+   id="svg3"
+   sodipodi:docname="favicon.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3" />
+  <sodipodi:namedview
+     id="namedview3"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.21875"
+     inkscape:cx="207.17949"
+     inkscape:cy="187.07692"
+     inkscape:window-width="1440"
+     inkscape:window-height="855"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3" />
+  <rect
+     fill="#f88a14"
+     rx="0.53846151"
+     ry="0.53846151"
+     height="5.0480766"
+     width="5.0480766"
+     id="rect1"
+     x="0"
+     y="0"
+     style="stroke-width:0.769231" />
+  <path
+     d="m 1.3450904,0.64548657 c 2.9002,0 2.9002,2.91010003 2.9002,2.91010003"
+     fill="none"
+     stroke="#ffffff"
+     stroke-linecap="round"
+     stroke-width="0.78125"
+     id="path1" />
+  <path
+     d="m 1.3377904,1.9915866 c 1.5705,-0.00908 1.5705,1.5639 1.5705,1.5639"
+     fill="none"
+     stroke="#ffffff"
+     stroke-linecap="round"
+     stroke-width="0.78125"
+     id="path2" />
+  <path
+     d="m 2.0192904,3.5227866 c 0,0.23366 -0.10712,0.47418 -0.24663,0.6537 -0.1814,0.2333 -0.5705,0.5618 -0.6913,0.5653 0.0402,-0.0662 0.263,-0.5654 0.2563,-0.5654 -0.36423004,0 -0.65950004,-0.29265 -0.65950004,-0.65365 0,-0.361 0.29527,-0.65365 0.65950004,-0.65365 0.36423,0 0.68159,0.29265 0.68159,0.65365 z"
+     fill="#ffffff"
+     id="path3" />
+</svg>

commafeed-client/src/App.tsx

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

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

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

commafeed-client/src/app/client.ts

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

commafeed-client/src/app/constants.ts

@@ -18,6 +18,13 @@ const categories: Record<string, Omit<Category, "name">> = {
         feeds: [],
         position: 1,
     },
+    infrequent: {
+        id: "infrequent",
+        expanded: false,
+        children: [],
+        feeds: [],
+        position: 2,
+    },
 }
 
 const sharing: {
@@ -87,17 +94,15 @@ 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,
     },
@@ -107,6 +112,7 @@ export const Constants = {
     tooltip: {
         delay: 500,
     },
+    infrequentThresholdDaysDefault: 7,
     browserExtensionUrl: "https://github.com/Athou/commafeed-browser-extension",
     customCssDocumentationUrl: "https://athou.github.io/commafeed/documentation/custom-css",
     bitcoinWalletAddress: "1dymfUxqCWpyD7a6rQSqNy4rLVDBsAr5e",

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

@@ -1,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 { createSlice, type PayloadAction } from "@reduxjs/toolkit"
-import { Constants } from "app/constants"
+import { Constants } from "@/app/constants"
-import { loadEntries, loadMoreEntries, markAllEntries, markEntry, markMultipleEntries, starEntry, tagEntry } from "app/entries/thunks"
+import { loadEntries, loadMoreEntries, markAllEntries, markEntry, markMultipleEntries, starEntry, tagEntry } from "@/app/entries/thunks"
-import type { Entry } from "app/types"
+import type { Entry } from "@/app/types"
 
 export type EntrySourceType = "category" | "feed" | "tag"
 

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, setMarkAllAsReadConfirmationDialogOpen, 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
@@ -130,11 +138,12 @@ export const markAllAsReadWithConfirmationIfRequired = createAppAsyncThunk(
         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 {
-            thunkApi.dispatch(
+            await thunkApi.dispatch(
                 markAllEntries({
                     sourceType: source.type,
                     req: {
@@ -145,6 +154,9 @@ export const markAllAsReadWithConfirmationIfRequired = createAppAsyncThunk(
                     },
                 })
             )
+            const isAllCategorySelected = source.type === "category" && source.id === Constants.categories.all.id
+            if (markAllAsReadNavigateToNextUnread && !isAllCategorySelected)
+                await thunkApi.dispatch(selectNextUnreadTreeItem({ direction: "forward" }))
         }
     }
 )
@@ -230,7 +242,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 { createAppAsyncThunk } from "@/app/async-thunk"
-import { Constants } from "app/constants"
+import { Constants } from "@/app/constants"
-import { redirectTo } from "app/redirect/slice"
+import { redirectTo } from "@/app/redirect/slice"
 
 export const redirectToLogin = createAppAsyncThunk("redirect/login", (_, thunkApi) => thunkApi.dispatch(redirectTo("/login")))
 
 export const redirectToRegistration = createAppAsyncThunk("redirect/register", (_, thunkApi) => thunkApi.dispatch(redirectTo("/register")))
 
-export const 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 { createSlice, type PayloadAction } from "@reduxjs/toolkit"
-import { reloadServerInfos } from "app/server/thunks"
+import { reloadServerInfos } from "@/app/server/thunks"
-import type { ServerInfo } from "app/types"
+import type { ServerInfo } from "@/app/types"
 
 interface ServerState {
     serverInfos?: ServerInfo

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

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

commafeed-client/src/app/store.ts

@@ -1,11 +1,11 @@
 import { configureStore } from "@reduxjs/toolkit"
-import { entriesSlice } from "app/entries/slice"
+import { shallowEqual, type TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
-import { redirectSlice } from "app/redirect/slice"
+import { entriesSlice } from "@/app/entries/slice"
-import { serverSlice } from "app/server/slice"
+import { redirectSlice } from "@/app/redirect/slice"
-import { treeSlice } from "app/tree/slice"
+import { serverSlice } from "@/app/server/slice"
-import type { LocalSettings } from "app/types"
+import { treeSlice } from "@/app/tree/slice"
-import { initialLocalSettings, userSlice } from "app/user/slice"
+import type { LocalSettings } from "@/app/types"
-import { type TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
+import { initialLocalSettings, userSlice } from "@/app/user/slice"
 
 export const reducers = {
     entries: entriesSlice.reducer,
@@ -41,3 +41,4 @@ export type AppDispatch = typeof store.dispatch
 
 export const useAppDispatch: () => AppDispatch = useDispatch
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+export const useShallowEqualAppSelector: TypedUseSelectorHook<RootState> = selector => useSelector(selector, shallowEqual)

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

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

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

@@ -1,9 +1,10 @@
-import { createAppAsyncThunk } from "app/async-thunk"
+import { createAppAsyncThunk } from "@/app/async-thunk"
-import { client } from "app/client"
+import { client } from "@/app/client"
-import { redirectToCategory, redirectToFeed } from "app/redirect/thunks"
+import { Constants } from "@/app/constants"
-import { incrementUnreadCount } from "app/tree/slice"
+import { redirectToCategory, redirectToFeed } from "@/app/redirect/thunks"
-import type { CollapseRequest, Subscription } from "app/types"
+import { incrementUnreadCount } from "@/app/tree/slice"
-import { flattenCategoryTree, visitCategoryTree } from "app/utils"
+import type { CollapseRequest, Subscription } from "@/app/types"
+import { flattenCategoryTree, visitCategoryTree } from "@/app/utils"
 
 export const reloadTree = createAppAsyncThunk("tree/reload", async () => await client.category.getRoot().then(r => r.data))
 
@@ -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 type { AxiosResponse } from "axios"
-import { selectNextUnreadTreeItem } from "app/tree/thunks"
+import { beforeEach, describe, expect, it, vi } from "vitest"
-import type { Category, Subscription } from "app/types"
+import { client } from "@/app/client"
-import { describe, expect, it } from "vitest"
+import { loadEntries } from "@/app/entries/thunks"
+import { type RootState, reducers } from "@/app/store"
+import { newFeedEntriesDiscovered, selectNextUnreadTreeItem } from "@/app/tree/thunks"
+import type { Category, Entries, Entry, Subscription } from "@/app/types"
+
+vi.mock(import("@/app/client"))
 
 const createCategory = (id: string): Category => ({
     id,
@@ -22,6 +27,7 @@ const createFeed = (id: number, unread: number): Subscription => ({
     feedUrl: "",
     feedLink: "",
     iconUrl: "",
+    pushNotificationsEnabled: true,
 })
 
 const root = createCategory("root")
@@ -117,3 +123,51 @@ describe("selectNextUnreadTreeItem", () => {
         expect(store.getState().redirect.to).toBe("/app/feed/3")
     })
 })
+
+describe("hasNewEntries", () => {
+    beforeEach(() => {
+        vi.resetAllMocks()
+    })
+
+    it("sets and clear flag for a feed", async () => {
+        vi.mocked(client.feed.getEntries).mockResolvedValue({
+            data: {
+                entries: [{ id: "3" } as Entry],
+                hasMore: false,
+                name: "my-feed",
+                errorCount: 3,
+                feedLink: "https://mysite.com/feed",
+                timestamp: 123,
+                ignoredReadStatus: false,
+            },
+        } as AxiosResponse<Entries>)
+
+        const store = configureStore({
+            reducer: reducers,
+            preloadedState: {
+                tree: {
+                    rootCategory: root,
+                },
+                entries: {
+                    source: {
+                        type: "feed",
+                        id: "1",
+                    },
+                },
+            } as RootState,
+        })
+
+        // initial state
+        expect(store.getState().tree.rootCategory?.children[0].feeds[0].unread).toBe(0)
+        expect(store.getState().tree.rootCategory?.children[0].feeds[0].hasNewEntries).toBeFalsy()
+
+        // increments unread count and sets hasNewEntries to true
+        await store.dispatch(newFeedEntriesDiscovered({ feedId: 1, amount: 3 }))
+        expect(store.getState().tree.rootCategory?.children[0].feeds[0].unread).toBe(3)
+        expect(store.getState().tree.rootCategory?.children[0].feeds[0].hasNewEntries).toBe(true)
+
+        // reload entries and sets hasNewEntries to false
+        await store.dispatch(loadEntries({ source: { type: "feed", id: "1" }, clearSearch: true }))
+        expect(store.getState().tree.rootCategory?.children[0].feeds[0].hasNewEntries).toBe(false)
+    })
+})

commafeed-client/src/app/types.ts

@@ -28,6 +28,10 @@ export interface Subscription {
     position: number
     newestItemTime?: number
     filter?: string
+    filterLegacy?: string
+    pushNotificationsEnabled: boolean
+    autoMarkAsReadAfterDays?: number
+    averageEntryIntervalMs?: number
 }
 
 export interface Category {
@@ -109,6 +113,8 @@ export interface FeedModificationRequest {
     categoryId?: string
     position?: number
     filter?: string
+    pushNotificationsEnabled: boolean
+    autoMarkAsReadAfterDays?: number
 }
 
 export interface GetEntriesRequest {
@@ -196,6 +202,12 @@ export interface PasswordResetRequest {
     email: string
 }
 
+export interface PasswordResetConfirmationRequest {
+    email: string
+    token: string
+    password: string
+}
+
 export interface ProfileModificationRequest {
     currentPassword: string
     email: string
@@ -209,18 +221,27 @@ export interface RegistrationRequest {
     email: string
 }
 
+export interface InitialSetupRequest {
+    name: string
+    password: string
+    email?: string
+}
+
 export interface ServerInfo {
     announcement?: string
     version: string
     gitCommit: string
     allowRegistrations: boolean
-    googleAnalyticsCode?: string
+    emailAddressRequired: boolean
     smtpEnabled: boolean
     demoAccountEnabled: boolean
     websocketEnabled: boolean
     websocketPingInterval: number
     treeReloadInterval: number
     forceRefreshCooldownDuration: number
+    initialSetupRequired: boolean
+    minimumPasswordLength: number
+    pushNotificationsEnabled: boolean
 }
 
 export interface SharingSettings {
@@ -234,8 +255,18 @@ export interface SharingSettings {
     buffer: boolean
 }
 
+export type PushNotificationType = "ntfy" | "gotify" | "pushover"
+
+export interface PushNotificationSettings {
+    type?: PushNotificationType
+    serverUrl?: string
+    userId?: string
+    userSecret?: string
+    topic?: string
+}
+
 export interface Settings {
-    language: string
+    language?: string
     readingMode: ReadingMode
     readingOrder: ReadingOrder
     showRead: boolean
@@ -248,12 +279,17 @@ export interface Settings {
     starIconDisplayMode: IconDisplayMode
     externalLinkIconDisplayMode: IconDisplayMode
     markAllAsReadConfirmation: boolean
+    markAllAsReadNavigateToNextUnread: boolean
     customContextMenu: boolean
     mobileFooter: boolean
     unreadCountTitle: boolean
     unreadCountFavicon: boolean
+    disablePullToRefresh: boolean
+    disableMobileSwipe: boolean
+    infrequentThresholdDays: number
     primaryColor?: string
     sharingSettings: SharingSettings
+    pushNotificationSettings: PushNotificationSettings
 }
 
 export interface LocalSettings {

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

@@ -1,15 +1,20 @@
 import { t } from "@lingui/core/macro"
 import { showNotification } from "@mantine/notifications"
-import { type PayloadAction, createSlice, isAnyOf } from "@reduxjs/toolkit"
+import { createSlice, isAnyOf, type PayloadAction } from "@reduxjs/toolkit"
-import type { LocalSettings, Settings, UserModel, ViewMode } from "app/types"
+import type { LocalSettings, Settings, UserModel, ViewMode } from "@/app/types"
 import {
     changeCustomContextMenu,
+    changeDisableMobileSwipe,
+    changeDisablePullToRefresh,
     changeEntriesToKeepOnTopWhenScrolling,
     changeExternalLinkIconDisplayMode,
+    changeInfrequentThresholdDays,
     changeLanguage,
     changeMarkAllAsReadConfirmation,
+    changeMarkAllAsReadNavigateToUnread,
     changeMobileFooter,
     changePrimaryColor,
+    changePushNotificationSettings,
     changeReadingMode,
     changeReadingOrder,
     changeScrollMarks,
@@ -114,6 +119,10 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.markAllAsReadConfirmation = action.meta.arg
         })
+        builder.addCase(changeMarkAllAsReadNavigateToUnread.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.markAllAsReadNavigateToNextUnread = action.meta.arg
+        })
         builder.addCase(changeCustomContextMenu.pending, (state, action) => {
             if (!state.settings) return
             state.settings.customContextMenu = action.meta.arg
@@ -130,6 +139,18 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.unreadCountFavicon = action.meta.arg
         })
+        builder.addCase(changeDisablePullToRefresh.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.disablePullToRefresh = action.meta.arg
+        })
+        builder.addCase(changeDisableMobileSwipe.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.disableMobileSwipe = action.meta.arg
+        })
+        builder.addCase(changeInfrequentThresholdDays.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.infrequentThresholdDays = action.meta.arg
+        })
         builder.addCase(changePrimaryColor.pending, (state, action) => {
             if (!state.settings) return
             state.settings.primaryColor = action.meta.arg
@@ -138,6 +159,11 @@ export const userSlice = createSlice({
             if (!state.settings) return
             state.settings.sharingSettings[action.meta.arg.site] = action.meta.arg.value
         })
+        builder.addCase(changePushNotificationSettings.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.pushNotificationSettings = action.meta.arg
+        })
+
         builder.addMatcher(
             isAnyOf(
                 changeLanguage.fulfilled,
@@ -149,12 +175,17 @@ export const userSlice = createSlice({
                 changeStarIconDisplayMode.fulfilled,
                 changeExternalLinkIconDisplayMode.fulfilled,
                 changeMarkAllAsReadConfirmation.fulfilled,
+                changeMarkAllAsReadNavigateToUnread.fulfilled,
                 changeCustomContextMenu.fulfilled,
                 changeMobileFooter.fulfilled,
                 changeUnreadCountTitle.fulfilled,
                 changeUnreadCountFavicon.fulfilled,
+                changeDisablePullToRefresh.fulfilled,
+                changeDisableMobileSwipe.fulfilled,
+                changeInfrequentThresholdDays.fulfilled,
                 changePrimaryColor.fulfilled,
-                changeSharingSetting.fulfilled
+                changeSharingSetting.fulfilled,
+                changePushNotificationSettings.fulfilled
             ),
             () => {
                 showNotification({

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

@@ -1,7 +1,7 @@
-import { createAppAsyncThunk } from "app/async-thunk"
+import { createAppAsyncThunk } from "@/app/async-thunk"
-import { client } from "app/client"
+import { client } from "@/app/client"
-import { reloadEntries } from "app/entries/thunks"
+import { reloadEntries } from "@/app/entries/thunks"
-import type { IconDisplayMode, ReadingMode, ReadingOrder, ScrollMode, SharingSettings } from "app/types"
+import type { IconDisplayMode, PushNotificationSettings, ReadingMode, ReadingOrder, ScrollMode, SharingSettings } from "@/app/types"
 
 export const reloadSettings = createAppAsyncThunk("settings/reload", async () => await client.user.getSettings().then(r => r.data))
 
@@ -89,6 +89,15 @@ export const changeMarkAllAsReadConfirmation = createAppAsyncThunk(
     }
 )
 
+export const changeMarkAllAsReadNavigateToUnread = createAppAsyncThunk(
+    "settings/markAllAsReadNavigateToUnread",
+    (markAllAsReadNavigateToNextUnread: boolean, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({ ...settings, markAllAsReadNavigateToNextUnread })
+    }
+)
+
 export const changeCustomContextMenu = createAppAsyncThunk("settings/customContextMenu", (customContextMenu: boolean, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
@@ -113,6 +122,21 @@ export const changeUnreadCountFavicon = createAppAsyncThunk("settings/unreadCoun
     client.user.saveSettings({ ...settings, unreadCountFavicon })
 })
 
+export const changeDisablePullToRefresh = createAppAsyncThunk(
+    "settings/disablePullToRefresh",
+    (disablePullToRefresh: boolean, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({ ...settings, disablePullToRefresh })
+    }
+)
+
+export const changeDisableMobileSwipe = createAppAsyncThunk("settings/disableMobileSwipe", (disableMobileSwipe: boolean, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, disableMobileSwipe })
+})
+
 export const changePrimaryColor = createAppAsyncThunk("settings/primaryColor", (primaryColor: string, thunkApi) => {
     const { settings } = thunkApi.getState().user
     if (!settings) return
@@ -139,3 +163,24 @@ export const changeSharingSetting = createAppAsyncThunk(
         })
     }
 )
+
+export const changeInfrequentThresholdDays = createAppAsyncThunk(
+    "settings/infrequentThresholdDays",
+    (infrequentThresholdDays: number, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({ ...settings, infrequentThresholdDays })
+    }
+)
+
+export const changePushNotificationSettings = createAppAsyncThunk(
+    "settings/pushNotificationSettings",
+    (pushNotificationSettings: PushNotificationSettings, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({
+            ...settings,
+            pushNotificationSettings,
+        })
+    }
+)

commafeed-client/src/app/utils.ts

@@ -1,9 +1,10 @@
 import { throttle } from "throttle-debounce"
+import type { TreeCategory } from "@/app/tree/slice"
 import type { Category } from "./types"
 
 export function visitCategoryTree(
-    category: Category,
+    category: TreeCategory,
-    visitor: (category: Category) => void,
+    visitor: (category: TreeCategory) => void,
     options?: {
         childrenFirst?: boolean
     }
@@ -19,21 +20,31 @@ 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, maxFrequencyThresholdMs?: number): number {
     if (!category) return 0
 
     return flattenCategoryTree(category)
         .flatMap(c => c.feeds)
+        .filter(f => !maxFrequencyThresholdMs || (f.averageEntryIntervalMs && f.averageEntryIntervalMs >= maxFrequencyThresholdMs))
         .map(f => f.unread)
         .reduce((total, current) => total + current, 0)
 }
 
+export function categoryHasNewEntries(category?: TreeCategory, maxFrequencyThresholdMs?: number): boolean {
+    if (!category) return false
+
+    return flattenCategoryTree(category)
+        .flatMap(c => c.feeds)
+        .filter(f => !maxFrequencyThresholdMs || (f.averageEntryIntervalMs && f.averageEntryIntervalMs >= maxFrequencyThresholdMs))
+        .some(f => f.hasNewEntries)
+}
+
 export const calculatePlaceholderSize = ({ width, height, maxWidth }: { width?: number; height?: number; maxWidth: number }) => {
     const placeholderWidth = width && Math.min(width, maxWidth)
     const placeholderHeight = height && width && width > maxWidth ? height * (maxWidth / width) : height

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

@@ -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

@@ -2,9 +2,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 { forwardRef, type MouseEventHandler, type ReactNode } from "react"
-import { useActionButton } from "hooks/useActionButton"
+import { Constants } from "@/app/constants"
-import { type MouseEventHandler, type ReactNode, forwardRef } from "react"
+import { useActionButton } from "@/hooks/useActionButton"
 
 interface ActionButtonProps {
     icon: ReactNode

commafeed-client/src/components/Alert.tsx

@@ -10,7 +10,7 @@ export interface ErrorsAlertProps {
     messages: string[]
 }
 
-export function Alert(props: ErrorsAlertProps) {
+export function Alert(props: Readonly<ErrorsAlertProps>) {
     let title: React.ReactNode
     let color: string
     let icon: React.ReactNode

commafeed-client/src/components/AnnouncementDialog.tsx

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

commafeed-client/src/components/DisablePullToRefresh.css

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

commafeed-client/src/components/DisablePullToRefresh.tsx

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

commafeed-client/src/components/ErrorBoundary.tsx

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

commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx

@@ -1,7 +1,7 @@
 import { Box, Center } from "@mantine/core"
 import { useState } from "react"
 import { TbPhoto } from "react-icons/tb"
-import { tss } from "tss"
+import { tss } from "@/tss"
 
 interface ImageWithPlaceholderWhileLoadingProps {
     src: string
@@ -44,7 +44,7 @@ export function ImageWithPlaceholderWhileLoading({
     title,
     width,
     style,
-}: ImageWithPlaceholderWhileLoadingProps) {
+}: Readonly<ImageWithPlaceholderWhileLoadingProps>) {
     const { classes } = useStyles({
         placeholderWidth,
         placeholderHeight,

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

@@ -1,9 +1,11 @@
 import { Trans } from "@lingui/react/macro"
 import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
-import { setMarkAllAsReadConfirmationDialogOpen } from "app/entries/slice"
-import { markAllEntries } from "app/entries/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
 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)
@@ -11,10 +13,12 @@ export function MarkAllAsReadConfirmationDialog() {
     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 = () => {
+    const onConfirm = async () => {
-        dispatch(
+        dispatch(setMarkAllAsReadConfirmationDialogOpen(false))
+        await dispatch(
             markAllEntries({
                 sourceType: source.type,
                 req: {
@@ -25,7 +29,9 @@ export function MarkAllAsReadConfirmationDialog() {
                 },
             })
         )
-        dispatch(setMarkAllAsReadConfirmationDialogOpen(false))
+
+        const isAllCategorySelected = source.type === "category" && source.id === Constants.categories.all.id
+        if (markAllAsReadNavigateToNextUnread && !isAllCategorySelected) await dispatch(selectNextUnreadTreeItem({ direction: "forward" }))
     }
 
     return (

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,7 +1,7 @@
 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
@@ -11,7 +11,7 @@ interface CodeEditorProps {
     onChange: (value: string | undefined) => void
 }
 
-export function CodeEditor(props: CodeEditorProps) {
+export function CodeEditor(props: Readonly<CodeEditorProps>) {
     const mobile = useMobile()
 
     return mobile ? (

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

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

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

@@ -1,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,7 +1,7 @@
 import { MantineProvider } from "@mantine/core"
 import { render } from "@testing-library/react"
-import { Content } from "components/content/Content"
 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: {
+export function Enclosure(
-    enclosureType: string
+    props: Readonly<{
-    enclosureUrl: string
+        enclosureType: string
-}) {
+        enclosureUrl: string
+    }>
+) {
     const hasVideo = props.enclosureType.startsWith("video")
     const hasAudio = props.enclosureType.startsWith("audio")
     const hasImage = props.enclosureType.startsWith("image")

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

@@ -1,8 +1,12 @@
 import { Trans } from "@lingui/react/macro"
 import { Box } from "@mantine/core"
 import { openModal } from "@mantine/modals"
-import { Constants } from "app/constants"
+import { useEffect } from "react"
-import type { ExpendableEntry } from "app/entries/slice"
+import { useContextMenu } from "react-contexify"
+import InfiniteScroll from "react-infinite-scroller"
+import { throttle } from "throttle-debounce"
+import { Constants } from "@/app/constants"
+import type { ExpendableEntry } from "@/app/entries/slice"
 import {
     loadMoreEntries,
     markAllAsReadWithConfirmationIfRequired,
@@ -12,19 +16,15 @@ import {
     selectNextEntry,
     selectPreviousEntry,
     starEntry,
-} from "app/entries/thunks"
+} from "@/app/entries/thunks"
-import { redirectToRootCategory } from "app/redirect/thunks"
+import { redirectToRootCategory } from "@/app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
+import { useAppDispatch, useAppSelector } from "@/app/store"
-import { toggleSidebar } from "app/tree/slice"
+import { toggleSidebar } from "@/app/tree/slice"
-import { selectNextUnreadTreeItem } from "app/tree/thunks"
+import { selectNextUnreadTreeItem } from "@/app/tree/thunks"
-import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
+import { KeyboardShortcutsHelp } from "@/components/KeyboardShortcutsHelp"
-import { Loader } from "components/Loader"
+import { Loader } from "@/components/Loader"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
+import { useBrowserExtension } from "@/hooks/useBrowserExtension"
-import { useMousetrap } from "hooks/useMousetrap"
+import { useMousetrap } from "@/hooks/useMousetrap"
-import { useEffect } from "react"
-import { useContextMenu } from "react-contexify"
-import InfiniteScroll from "react-infinite-scroller"
-import { throttle } from "throttle-debounce"
 import { FeedEntry } from "./FeedEntry"
 
 export function FeedEntries() {
@@ -287,7 +287,6 @@ export function FeedEntries() {
 
     return (
         <InfiniteScroll
-            id="entries"
             className={`cf-entries cf-view-mode-${viewMode}`}
             initialLoad={false}
             loadMore={async () => await (!loading && dispatch(loadMoreEntries()))}

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"
@@ -96,7 +96,7 @@ const useStyles = tss
         }
     })
 
-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({
@@ -145,6 +145,7 @@ export function FeedEntry(props: FeedEntryProps) {
             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, {

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

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

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

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

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

@@ -1,20 +1,20 @@
 import { msg } from "@lingui/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()

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

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

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

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

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

@@ -1,13 +1,13 @@
 import { Trans } from "@lingui/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

@@ -2,10 +2,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 { Constants } from "@/app/constants"
-import { useAppSelector } from "app/store"
+import { useAppSelector } from "@/app/store"
-import type { Category } from "app/types"
+import type { Category } from "@/app/types"
-import { flattenCategoryTree } from "app/utils"
+import { flattenCategoryTree } from "@/app/utils"
 
 type CategorySelectProps = Partial<SelectProps> & {
     withAll?: boolean

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

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

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

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

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 } from "@mantine/core"
-import type { Entry } from "app/types"
+import type { Entry } from "@/app/types"
-import { RelativeDate } from "components/RelativeDate"
+import { FeedFavicon } from "@/components/content/FeedFavicon"
-import { FeedFavicon } from "components/content/FeedFavicon"
+import { OpenExternalLink } from "@/components/content/header/OpenExternalLink"
-import { OpenExternalLink } from "components/content/header/OpenExternalLink"
+import { Star } from "@/components/content/header/Star"
-import { Star } from "components/content/header/Star"
+import { RelativeDate } from "@/components/RelativeDate"
-import { OnDesktop } from "components/responsive/OnDesktop"
+import { OnDesktop } from "@/components/responsive/OnDesktop"
-import { tss } from "tss"
+import { tss } from "@/tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
 
 export interface FeedEntryHeaderProps {
@@ -43,7 +43,7 @@ const useStyles = tss
         },
     }))
 
-export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
+export function FeedEntryCompactHeader(props: Readonly<FeedEntryHeaderProps>) {
     const { classes } = useStyles({
         read: props.entry.read,
     })

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

@@ -1,10 +1,10 @@
 import { Box, Flex, Space } from "@mantine/core"
-import type { Entry } from "app/types"
+import type { Entry } from "@/app/types"
-import { RelativeDate } from "components/RelativeDate"
+import { FeedFavicon } from "@/components/content/FeedFavicon"
-import { FeedFavicon } from "components/content/FeedFavicon"
+import { OpenExternalLink } from "@/components/content/header/OpenExternalLink"
-import { OpenExternalLink } from "components/content/header/OpenExternalLink"
+import { Star } from "@/components/content/header/Star"
-import { Star } from "components/content/header/Star"
+import { RelativeDate } from "@/components/RelativeDate"
-import { tss } from "tss"
+import { tss } from "@/tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
 
 export interface FeedEntryHeaderProps {
@@ -24,7 +24,7 @@ const useStyles = tss
         },
     }))
 
-export function FeedEntryHeader(props: FeedEntryHeaderProps) {
+export function FeedEntryHeader(props: Readonly<FeedEntryHeaderProps>) {
     const { classes } = useStyles({
         read: props.entry.read,
     })

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

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

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

@@ -1,12 +1,16 @@
 import { Trans } from "@lingui/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,14 +2,6 @@ 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 { markAllAsReadWithConfirmationIfRequired, reloadEntries, search, selectNextEntry, selectPreviousEntry } from "app/entries/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { changeReadingMode, changeReadingOrder } from "app/user/thunks"
-import { ActionButton } from "components/ActionButton"
-import { Loader } from "components/Loader"
-import { useActionButton } from "hooks/useActionButton"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
-import { useMobile } from "hooks/useMobile"
 import { useEffect } from "react"
 import {
     TbArrowDown,
@@ -25,6 +17,14 @@ import {
     TbSortDescending,
     TbUser,
 } from "react-icons/tb"
+import { markAllAsReadWithConfirmationIfRequired, reloadEntries, search, selectNextEntry, selectPreviousEntry } from "@/app/entries/thunks"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import { changeReadingMode, changeReadingOrder } from "@/app/user/thunks"
+import { ActionButton } from "@/components/ActionButton"
+import { Loader } from "@/components/Loader"
+import { useActionButton } from "@/hooks/useActionButton"
+import { useBrowserExtension } from "@/hooks/useBrowserExtension"
+import { useMobile } from "@/hooks/useMobile"
 import { ProfileMenu } from "./ProfileMenu"
 
 function HeaderDivider() {
@@ -63,11 +63,7 @@ export function Header() {
     const dispatch = useAppDispatch()
     const { _ } = useLingui()
 
-    const searchForm = useForm<{ search: string }>({
+    const searchForm = useForm<{ search: string }>()
-        validate: {
-            search: value => (value.length > 0 && value.length < 3 ? _(msg`Search requires at least 3 characters`) : null),
-        },
-    })
     const { setValues } = searchForm
 
     useEffect(() => {

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

@@ -11,15 +11,8 @@ import {
     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 { setFontSizePercentage, setViewMode } from "app/user/slice"
-import { reloadProfile } from "app/user/thunks"
 import dayjs from "dayjs"
-import { useNow } from "hooks/useNow"
+import { type ReactNode, useEffect, useState } from "react"
-import { type ReactNode, useState } from "react"
 import {
     TbChartLine,
     TbHeartFilled,
@@ -36,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
@@ -94,8 +95,16 @@ 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)
@@ -145,7 +154,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                                 color: "green",
                                 autoClose: 1000,
                             })
-                        } catch (_) {
+                        } catch {
                             showNotification({
                                 message: <Trans>Force fetching feeds is not yet available.</Trans>,
                                 color: "red",

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,15 +1,15 @@
 import { Trans } from "@lingui/react/macro"
 import { Anchor, Box, Button, Group, Stack } from "@mantine/core"
 import { useForm } from "@mantine/form"
-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"
 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
@@ -60,18 +60,14 @@ export function CustomCodeSettings() {
                     <CodeEditor
                         label={<Trans>Custom CSS rules that will be applied</Trans>}
                         description={
-                            <Trans>
+                            <Anchor
-                                <span>See </span>
+                                href={Constants.customCssDocumentationUrl}
-                                <Anchor
+                                target="_blank"
-                                    href={Constants.customCssDocumentationUrl}
+                                rel="noreferrer"
-                                    target="_blank"
+                                style={{ fontSize: "inherit" }}
-                                    rel="noreferrer"
+                            >
-                                    style={{ fontSize: "inherit" }}
+                                <Trans>Link to the documentation</Trans>
-                                >
+                            </Anchor>
-                                    here
-                                </Anchor>
-                                <span> for more information.</span>
-                            </Trans>
                         }
                         language="css"
                         {...form.getInputProps("customCss")}

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

@@ -3,15 +3,20 @@ import { useLingui } from "@lingui/react"
 import { Trans } from "@lingui/react/macro"
 import { Box, Divider, Group, NumberInput, Radio, Select, type SelectProps, SimpleGrid, Stack, Switch } from "@mantine/core"
 import type { ComboboxData } from "@mantine/core/lib/components/Combobox/Combobox.types"
-import { Constants } from "app/constants"
+import type { ReactNode } from "react"
-import { useAppDispatch, useAppSelector } from "app/store"
+import { Constants } from "@/app/constants"
-import type { IconDisplayMode, ScrollMode, SharingSettings } from "app/types"
+import { useAppDispatch, useAppSelector } from "@/app/store"
+import type { IconDisplayMode, ScrollMode, SharingSettings } from "@/app/types"
 import {
     changeCustomContextMenu,
+    changeDisableMobileSwipe,
+    changeDisablePullToRefresh,
     changeEntriesToKeepOnTopWhenScrolling,
     changeExternalLinkIconDisplayMode,
+    changeInfrequentThresholdDays,
     changeLanguage,
     changeMarkAllAsReadConfirmation,
+    changeMarkAllAsReadNavigateToUnread,
     changeMobileFooter,
     changePrimaryColor,
     changeScrollMarks,
@@ -22,9 +27,8 @@ import {
     changeStarIconDisplayMode,
     changeUnreadCountFavicon,
     changeUnreadCountTitle,
-} from "app/user/thunks"
+} from "@/app/user/thunks"
-import { locales } from "i18n"
+import { locales } from "@/i18n"
-import type { ReactNode } from "react"
 
 export function DisplaySettings() {
     const language = useAppSelector(state => state.user.settings?.language)
@@ -36,10 +40,14 @@ export function DisplaySettings() {
     const starIconDisplayMode = useAppSelector(state => state.user.settings?.starIconDisplayMode)
     const externalLinkIconDisplayMode = useAppSelector(state => state.user.settings?.externalLinkIconDisplayMode)
     const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
+    const markAllAsReadNavigateToNextUnread = useAppSelector(state => state.user.settings?.markAllAsReadNavigateToNextUnread)
     const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
     const mobileFooter = useAppSelector(state => state.user.settings?.mobileFooter)
     const unreadCountTitle = useAppSelector(state => state.user.settings?.unreadCountTitle)
     const unreadCountFavicon = useAppSelector(state => state.user.settings?.unreadCountFavicon)
+    const disablePullToRefresh = useAppSelector(state => state.user.settings?.disablePullToRefresh)
+    const disableMobileSwipe = useAppSelector(state => state.user.settings?.disableMobileSwipe)
+    const infrequentThresholdDays = useAppSelector(state => state.user.settings?.infrequentThresholdDays)
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const primaryColor = useAppSelector(state => state.user.settings?.primaryColor) || Constants.theme.defaultPrimaryColor
     const { _ } = useLingui()
@@ -127,12 +135,73 @@ export function DisplaySettings() {
                 onChange={async e => await dispatch(changeMarkAllAsReadConfirmation(e.currentTarget.checked))}
             />
 
+            <Switch
+                label={<Trans>Navigate to the next category/feed with unread entries when marking all entries as read</Trans>}
+                checked={markAllAsReadNavigateToNextUnread}
+                onChange={async e => await dispatch(changeMarkAllAsReadNavigateToUnread(e.currentTarget.checked))}
+            />
+
             <Switch
                 label={<Trans>On mobile, show action buttons at the bottom of the screen</Trans>}
                 checked={mobileFooter}
                 onChange={async e => await dispatch(changeMobileFooter(e.currentTarget.checked))}
             />
 
+            <Switch
+                label={<Trans>On mobile, disable swipe gesture to open the menu</Trans>}
+                checked={disableMobileSwipe}
+                onChange={async e => await dispatch(changeDisableMobileSwipe(e.currentTarget.checked))}
+            />
+
+            <NumberInput
+                label={<Trans>Infrequent posts threshold (days)</Trans>}
+                description={<Trans>Feeds posting less often than this (on average) will appear in the Infrequent view</Trans>}
+                min={1}
+                value={infrequentThresholdDays}
+                onChange={async value => await dispatch(changeInfrequentThresholdDays(+value))}
+            />
+
+            <Divider label={<Trans>Scrolling</Trans>} labelPosition="center" />
+
+            <Switch
+                label={<Trans>Disable "Pull to refresh" browser behavior</Trans>}
+                description={<Trans>This setting can cause scrolling issues on some browsers (e.g. Safari)</Trans>}
+                checked={disablePullToRefresh}
+                onChange={async e => await dispatch(changeDisablePullToRefresh(e.currentTarget.checked))}
+            />
+
+            <Radio.Group
+                label={<Trans>Scroll selected entry to the top of the page</Trans>}
+                value={scrollMode}
+                onChange={async value => await dispatch(changeScrollMode(value as ScrollMode))}
+            >
+                <Group mt="xs">
+                    {Object.entries(scrollModeOptions).map(e => (
+                        <Radio key={e[0]} value={e[0]} label={e[1]} />
+                    ))}
+                </Group>
+            </Radio.Group>
+
+            <NumberInput
+                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))}
+            />
+
+            <Switch
+                label={<Trans>Scroll smoothly when navigating between entries</Trans>}
+                checked={scrollSpeed ? scrollSpeed > 0 : false}
+                onChange={async e => await dispatch(changeScrollSpeed(e.currentTarget.checked))}
+            />
+
+            <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))}
+            />
+
             <Divider label={<Trans>Browser tab</Trans>} labelPosition="center" />
 
             <Switch
@@ -169,40 +238,6 @@ export function DisplaySettings() {
                 onChange={async e => await dispatch(changeCustomContextMenu(e.currentTarget.checked))}
             />
 
-            <Divider label={<Trans>Scrolling</Trans>} labelPosition="center" />
-
-            <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))}
-            >
-                <Group mt="xs">
-                    {Object.entries(scrollModeOptions).map(e => (
-                        <Radio key={e[0]} value={e[0]} label={e[1]} />
-                    ))}
-                </Group>
-            </Radio.Group>
-
-            <NumberInput
-                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))}
-            />
-
-            <Switch
-                label={<Trans>Scroll smoothly when navigating between entries</Trans>}
-                checked={scrollSpeed ? scrollSpeed > 0 : false}
-                onChange={async e => await dispatch(changeScrollSpeed(e.currentTarget.checked))}
-            />
-
-            <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))}
-            />
-
             <Divider label={<Trans>Sharing sites</Trans>} labelPosition="center" />
 
             <SimpleGrid cols={2}>

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(() => {
@@ -132,7 +138,12 @@ export function ProfileSettings() {
                         required
                         {...form.getInputProps("currentPassword")}
                     />
-                    <TextInput type="email" label={<Trans>E-mail</Trans>} {...form.getInputProps("email")} required />
+                    <TextInput
+                        type="email"
+                        label={<Trans>E-mail</Trans>}
+                        {...form.getInputProps("email")}
+                        required={serverInfos?.emailAddressRequired}
+                    />
                     <PasswordInput
                         label={<Trans>New password</Trans>}
                         description={<Trans>Changing password will generate a new API key</Trans>}

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

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

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

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

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

@@ -1,8 +1,8 @@
 import { Box, Center } from "@mantine/core"
-import type { EntrySourceType } from "app/entries/slice"
-import { FeedFavicon } from "components/content/FeedFavicon"
 import type React from "react"
-import { tss } from "tss"
+import type { EntrySourceType } from "@/app/entries/slice"
+import { FeedFavicon } from "@/components/content/FeedFavicon"
+import { tss } from "@/tss"
 import { UnreadCount } from "./UnreadCount"
 
 interface TreeNodeProps {
@@ -15,6 +15,8 @@ interface TreeNodeProps {
     expanded?: boolean
     level: number
     hasError: boolean
+    hasWarning: boolean
+    hasNewEntries: boolean
     onClick: (e: React.MouseEvent, id: string) => void
     onIconClick?: (e: React.MouseEvent, id: string) => void
 }
@@ -23,15 +25,18 @@ const useStyles = tss
     .withParams<{
         selected: boolean
         hasError: boolean
+        hasWarning: boolean
         hasUnread: boolean
     }>()
-    .create(({ theme, colorScheme, selected, hasError, hasUnread }) => {
+    .create(({ theme, colorScheme, selected, hasError, hasWarning, hasUnread }) => {
         let backgroundColor = "inherit"
         if (selected) backgroundColor = colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
 
         let color: string
         if (hasError) {
             color = theme.colors.red[6]
+        } else if (hasWarning) {
+            color = theme.colors.yellow[6]
         } else if (colorScheme === "dark") {
             color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
         } else {
@@ -58,10 +63,11 @@ 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 (
@@ -80,7 +86,7 @@ export function TreeNode(props: TreeNodeProps) {
             <Box className={classes.nodeText}>{props.name}</Box>
             {!props.expanded && (
                 <Box className="cf-treenode-unread-count">
-                    <UnreadCount unreadCount={props.unread} />
+                    <UnreadCount unreadCount={props.unread} showIndicator={props.hasNewEntries} />
                 </Box>
             )}
         </Box>

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

@@ -3,18 +3,18 @@ import { useLingui } from "@lingui/react"
 import { Trans } from "@lingui/react/macro"
 import { Box, TextInput } from "@mantine/core"
 import { Spotlight, type SpotlightActionData, spotlight } from "@mantine/spotlight"
-import { redirectToFeed } from "app/redirect/thunks"
-import { useAppDispatch } from "app/store"
-import type { Subscription } from "app/types"
-import { FeedFavicon } from "components/content/FeedFavicon"
-import { useMousetrap } from "hooks/useMousetrap"
 import { TbSearch } from "react-icons/tb"
+import { redirectToFeed } from "@/app/redirect/thunks"
+import { useAppDispatch } from "@/app/store"
+import type { Subscription } from "@/app/types"
+import { FeedFavicon } from "@/components/content/FeedFavicon"
+import { useMousetrap } from "@/hooks/useMousetrap"
 
 export interface TreeSearchProps {
     feeds: Subscription[]
 }
 
-export function TreeSearch(props: TreeSearchProps) {
+export function TreeSearch(props: Readonly<TreeSearchProps>) {
     const dispatch = useAppDispatch()
     const { _ } = useLingui()
 

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

@@ -1,16 +1,25 @@
-import { Badge, Tooltip } from "@mantine/core"
+import { Badge, Indicator, Tooltip } from "@mantine/core"
-import { Constants } from "app/constants"
+import { Constants } from "@/app/constants"
-import { tss } from "tss"
+import { tss } from "@/tss"
 
 const useStyles = tss.create(() => ({
     badge: {
         width: "3.2rem",
         // for some reason, mantine Badge has "cursor: 'default'"
-        cursor: "pointer",
+        cursor: "inherit",
+    },
+    indicator: {
+        // ensure the indicator is not shown above the app header
+        zIndex: 0,
     },
 }))
 
-export function UnreadCount(props: { unreadCount: number }) {
+export function UnreadCount(
+    props: Readonly<{
+        unreadCount: number
+        showIndicator: boolean
+    }>
+) {
     const { classes } = useStyles()
 
     if (props.unreadCount <= 0) return null
@@ -18,9 +27,19 @@ export function UnreadCount(props: { unreadCount: number }) {
     const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount
     return (
         <Tooltip label={props.unreadCount} disabled={props.unreadCount === count} openDelay={Constants.tooltip.delay}>
-            <Badge className={`${classes.badge} cf-badge`} variant="light" fullWidth>
+            <Indicator
-                {count}
+                disabled={!props.showIndicator}
-            </Badge>
+                size={4}
+                offset={10}
+                position="middle-start"
+                classNames={{
+                    indicator: classes.indicator,
+                }}
+            >
+                <Badge className={`${classes.badge} cf-badge`} variant="light" fullWidth>
+                    {count}
+                </Badge>
+            </Indicator>
         </Tooltip>
     )
 }

commafeed-client/src/hooks/useActionButton.ts

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

commafeed-client/src/hooks/useAppLoading.ts

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

commafeed-client/src/hooks/useMobile.ts

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

commafeed-client/src/hooks/useValidationRules.ts

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

commafeed-client/src/hooks/useWebSocket.ts

@@ -1,8 +1,8 @@
-import { setWebSocketConnected } from "app/server/slice"
-import { type AppDispatch, useAppDispatch, useAppSelector } from "app/store"
-import { newFeedEntriesDiscovered } from "app/tree/thunks"
 import { useEffect } from "react"
 import WebsocketHeartbeatJs from "websocket-heartbeat-js"
+import { setWebSocketConnected } from "@/app/server/slice"
+import { type AppDispatch, useAppDispatch, useAppSelector } from "@/app/store"
+import { newFeedEntriesDiscovered } from "@/app/tree/thunks"
 
 const handleMessage = (dispatch: AppDispatch, message: string) => {
     const parts = message.split(":")

commafeed-client/src/i18n.ts

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

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,22 +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/components/settings/CustomCodeSettings.tsx
-msgid "<0>See </0><1>here</1><2> for more information.</2>"
-msgstr ""
-
-#: 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"
@@ -58,17 +54,22 @@ 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/pages/app/FeedEntriesPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
-#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/auth/InitialSetupPage.tsx
-#: src/components/sidebar/Tree.tsx
+msgid "Admin user name"
-#: src/components/header/Header.tsx
+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"
 
@@ -87,7 +88,7 @@ msgstr "Un fitxer opml és un fitxer XML que conté URL i categories de canals.
 
 #: src/components/content/add/Subscribe.tsx
 msgid "Analyze feed"
-msgstr "Analitzar el feed"
+msgstr "Analitza el canal"
 
 #: src/components/AnnouncementDialog.tsx
 msgid "Announcement"
@@ -95,11 +96,19 @@ msgstr "Anunci"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
-msgstr "clau API"
+msgstr "Clau API"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "API token"
+msgstr "Token d'API"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "App token"
+msgstr "Token d'aplicació"
 
 #: src/pages/app/CategoryDetailsPage.tsx
 msgid "Are you sure you want to delete category <0>{categoryName}</0>?"
-msgstr "Estàs segur que vols suprimir la categoria <0>{categoryName}</0>?"
+msgstr "Esteu segur que voleu suprimir la categoria <0>{categoryName}</0>?"
 
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Are you sure you want to delete user <0>{userName}</0> ?"
@@ -119,61 +128,67 @@ msgstr "Esteu segur que voleu marcar les entrades més antigues de {threshold} d
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Are you sure you want to unsubscribe from <0>{feedName}</0>?"
-msgstr "Estàs segur que vols cancel·lar la subscripció a <0>{feedName}</0>?"
+msgstr "Esteu segur que voleu cancel·lar la subscripció a <0>{feedName}</0>?"
 
 #: src/components/header/Header.tsx
 msgid "Asc"
 msgstr "Asc"
 
 #: src/pages/app/FeedDetailsPage.tsx
-msgid "Available variables are 'title', 'content', 'url' 'author' and 'categories' and their content is converted to lower case to ease string comparison."
+msgid "Auto-mark as read"
-msgstr "Les variables disponibles són \"títol\", \"contingut\", \"url\" \"autor\" i \"categories\" i el seu contingut es converteix en minúscules per facilitar la comparació de cadenes."
+msgstr "Marcar com a llegit automàticament"
 
 #: src/components/content/add/Subscribe.tsx
 msgid "Back"
 msgstr "Enrere"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
 msgid "Back to log in"
-msgstr "Tornar a iniciar sessió"
+msgstr "Torna a iniciar sessió"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Blue"
-msgstr ""
+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
+msgid "Build a filter expression to indicate what you want to read. Entries that don't match will be marked as read automatically."
-#: src/pages/app/CategoryDetailsPage.tsx
+msgstr "Creeu una expressió de filtratge per indicar què voleu llegir. Les entrades que no coincideixin es marcaran com a llegides automàticament."
-#: src/pages/app/CategoryDetailsPage.tsx
+
-#: src/pages/admin/AdminUsersPage.tsx
-#: src/components/MarkAllAsReadConfirmationDialog.tsx
-#: src/components/settings/ProfileSettings.tsx
-#: src/components/settings/ProfileSettings.tsx
-#: src/components/settings/CustomCodeSettings.tsx
-#: src/components/content/add/ImportOpml.tsx
-#: src/components/content/add/AddCategory.tsx
 #: 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/ProfileSettings.tsx
+#: src/components/settings/PushNotificationSettings.tsx
+#: src/pages/admin/AdminUsersPage.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
+#: src/pages/app/TagDetailsPage.tsx
 msgid "Cancel"
 msgstr "Cancel·la"
 
-#: src/pages/app/FeedDetailsPage.tsx
+#: src/components/content/add/AddCategory.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/pages/app/AboutPage.tsx
-#: src/components/content/add/AddCategory.tsx
+#: src/pages/app/FeedDetailsPage.tsx
 msgid "Category"
 msgstr "Categoria"
 
@@ -191,7 +206,7 @@ msgstr "Tanca el menu"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Cmd"
-msgstr ""
+msgstr "Cmd"
 
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed browser extension version {browserExtensionVersion}."
@@ -213,11 +228,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/pages/admin/AdminUsersPage.tsx
+#: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
 msgid "Confirm"
 msgstr "Confirma"
 
@@ -225,10 +240,19 @@ msgstr "Confirma"
 msgid "Confirm password"
 msgstr "Confirmeu la contrasenya"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Confirm Password"
+msgstr "Confirma la contrasenya"
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Cozy"
 msgstr "Acollidor"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Create Admin Account"
+msgstr "Crea un compte d'administrador"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "Ctrl"
@@ -251,10 +275,10 @@ msgstr "Codi JS personalitzat que s'executarà en carregar la pàgina"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Cyan"
-msgstr ""
+msgstr "Cian"
 
-#: src/components/settings/DisplaySettings.tsx
 #: src/components/header/ProfileMenu.tsx
+#: src/components/settings/DisplaySettings.tsx
 msgid "Dark"
 msgstr "Fosc"
 
@@ -262,6 +286,10 @@ msgstr "Fosc"
 msgid "Date created"
 msgstr "Data de creació"
 
+#: src/pages/app/FeedDetailsPage.tsx
+msgid "days"
+msgstr "dies"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 msgid "Delete"
 msgstr "Eliminar"
@@ -287,14 +315,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"
 
@@ -306,11 +338,13 @@ 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/InitialSetupPage.tsx
+#: src/pages/auth/PasswordRecoveryPage.tsx
+#: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "E-mail"
 msgstr "Correu electrònic"
 
@@ -323,10 +357,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"
@@ -338,20 +372,16 @@ msgstr "introduïu la vostra contrasenya actual per canviar la configuració del
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Entries to keep above the selected entry when scrolling"
-msgstr ""
+msgstr "Entrades que es mantindran a sobre de l'entrada seleccionada en desplaçar-se"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Entry headers"
-msgstr ""
+msgstr "Encapçalaments d'entrada"
 
 #: src/components/Alert.tsx
 msgid "Error"
 msgstr "Error"
 
-#: src/pages/app/FeedDetailsPage.tsx
-msgid "Example: {example}."
-msgstr "Exemple: {exemple}."
-
 #: src/components/header/ProfileMenu.tsx
 msgid "Expanded"
 msgstr "Ampliat"
@@ -360,8 +390,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ó"
 
@@ -369,9 +399,9 @@ msgstr "Opcions de l'extensió"
 msgid "Feed name"
 msgstr "Nom del canal"
 
+#: src/components/content/add/Subscribe.tsx
+#: 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"
 
@@ -381,11 +411,11 @@ 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"
@@ -393,19 +423,19 @@ msgstr "Expressió de filtratge"
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Font size"
-msgstr ""
+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."
 
@@ -413,9 +443,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"
 
@@ -434,28 +464,24 @@ msgstr "Vés a la documentació de l'API."
 
 #: src/pages/app/AboutPage.tsx
 msgid "Goodies"
-msgstr "Bones"
+msgstr "Extres"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Grape"
-msgstr ""
+msgstr "Raïm"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Gray"
-msgstr ""
+msgstr "Gris"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Green"
-msgstr ""
+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"
@@ -470,19 +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 ""
+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"
 
@@ -508,14 +542,18 @@ msgstr "Clar"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Lime"
-msgstr ""
+msgstr "Llima"
 
-#: 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 "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..."
@@ -532,9 +570,9 @@ msgstr "S'estan carregant les subscripcions..."
 msgid "Loading tags..."
 msgstr "Carregant les etiquetes..."
 
+#: src/pages/auth/LoginPage.tsx
+#: 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ó"
 
@@ -544,10 +582,10 @@ 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"
 
@@ -555,21 +593,25 @@ msgstr "Gestionar usuaris"
 msgid "Mark all as read"
 msgstr "Marca-ho tot com a llegit"
 
-#: src/components/MarkAllAsReadConfirmationDialog.tsx
 #: src/components/KeyboardShortcutsHelp.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"
@@ -586,15 +628,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
+msgid "N/A"
-#: src/pages/admin/AdminUsersPage.tsx
+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"
 
@@ -602,6 +644,10 @@ msgstr "Nom"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Navegueu a una subscripció introduint-ne el nom"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Navigate to the next category/feed with unread entries when marking all entries as read"
+msgstr "Navega a la següent categoria/canal amb entrades no llegides quan es marquen totes les entrades com a llegides"
+
 #: src/components/settings/DisplaySettings.tsx
 #: src/components/settings/DisplaySettings.tsx
 msgid "Never"
@@ -611,12 +657,17 @@ msgstr "Mai"
 msgid "New password"
 msgstr "Contrasenya nova"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "New Password"
+msgstr "Contrasenya nova"
+
 #: src/pages/app/AboutPage.tsx
 msgid "Newest first"
 msgstr "El més nou primer"
 
-#: src/components/header/Header.tsx
 #: src/components/content/add/Subscribe.tsx
+#: src/components/header/Header.tsx
 msgid "Next"
 msgstr "Següent"
 
@@ -634,7 +685,7 @@ msgstr "No hi ha més entrades"
 
 #: src/components/content/ShareButtons.tsx
 msgid "No sharing options available."
-msgstr ""
+msgstr "No hi ha opcions de compartició disponibles."
 
 #: src/components/sidebar/TreeSearch.tsx
 msgid "Nothing found"
@@ -646,11 +697,11 @@ msgstr "el més vell primer"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "On desktop"
-msgstr ""
+msgstr "A l'escriptori"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "On mobile"
-msgstr ""
+msgstr "Al mòbil"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "On mobile, show action buttons at the bottom of the screen"
@@ -658,7 +709,7 @@ msgstr "Al mòbil, mostra els botons d'acció a la part inferior de la pantalla"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Only applies to compact, cozy and detailed modes"
-msgstr ""
+msgstr "Només s'aplica als modes compacte, acollidor i detallat"
 
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
@@ -720,11 +771,11 @@ msgstr "Fitxer OPML"
 
 #: src/components/content/add/ImportOpml.tsx
 msgid "OPML file is required"
-msgstr ""
+msgstr "Cal un fitxer OPML"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Orange"
-msgstr ""
+msgstr "Taronja"
 
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
@@ -738,28 +789,34 @@ 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/InitialSetupPage.tsx
+#: src/pages/auth/LoginPage.tsx
+#: src/pages/auth/LoginPage.tsx
+#: src/pages/auth/RegistrationPage.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/components/settings/DisplaySettings.tsx
 msgid "Pink"
-msgstr ""
+msgstr "Rosa"
 
-#: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
+#: src/pages/app/FeedDetailsPage.tsx
 msgid "Position"
 msgstr "Posició"
 
@@ -769,22 +826,47 @@ msgstr "Anterior"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Primary color"
-msgstr ""
+msgstr "Color primari"
 
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
 msgstr "Perfil"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Push notification service"
+msgstr "Servei de notificacions push"
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Push notifications"
+msgstr "Notificacions push"
+
+#: src/components/ReceivePushNotificationsChechbox.tsx
+msgid "Push notifications are not configured in your user settings."
+msgstr "Les notificacions push no estan configurades a la vostra configuració d'usuari."
+
+#: src/components/ReceivePushNotificationsChechbox.tsx
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Push notifications are not enabled on this CommaFeed instance."
+msgstr "Les notificacions push no estan activades en aquesta instància de CommaFeed."
+
+#: src/components/ReceivePushNotificationsChechbox.tsx
+msgid "Receive push notifications"
+msgstr "Rep notificacions push"
+
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Receive push notifications when new feed entries are discovered. Enable \"Receive push notifications\" in the settings of each feed for which you want to receive notifications."
+msgstr "Rebre notificacions push quan es descobreixin noves entrades de feed. Activeu \"Rep notificacions push\" a la configuració de cada feed per al qual vulgueu rebre notificacions."
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Recover password"
 msgstr "Recuperar la contrasenya"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Red"
-msgstr ""
+msgstr "Vermell"
 
-#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/header/Header.tsx
+#: src/components/KeyboardShortcutsHelp.tsx
 msgid "Refresh"
 msgstr "Actualitzar"
 
@@ -792,6 +874,11 @@ msgstr "Actualitzar"
 msgid "Registrations are closed on this CommaFeed instance"
 msgstr "Els registres estan tancats en aquesta instància de CommaFeed"
 
+#: src/pages/auth/PasswordResetPage.tsx
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Reset Password"
+msgstr "Restableix la contrasenya"
+
 #: src/pages/app/AboutPage.tsx
 msgid "REST API"
 msgstr "API REST"
@@ -801,11 +888,12 @@ msgstr "API REST"
 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"
 
@@ -821,28 +909,29 @@ 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
+#: 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
+#: 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"
@@ -862,7 +951,7 @@ msgstr "Comparteix"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Sharing sites"
-msgstr "Compartir llocs"
+msgstr "Compartir a altres llocs web"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
@@ -888,7 +977,7 @@ msgstr "Mostra el menú d'entrada (mòbil)"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show external link icon"
-msgstr ""
+msgstr "Mostra la icona d'enllaç extern"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show feeds and categories with no unread entries"
@@ -904,19 +993,19 @@ msgstr "Mostra el menú natiu (escriptori)"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show star icon"
-msgstr ""
+msgstr "Mostra la icona d'estrella"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show unread count in tab favicon"
-msgstr ""
+msgstr "Mostra el recompte de no llegits a la icona de favorits de la pestanya"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show unread count in tab title"
-msgstr ""
+msgstr "Mostra el recompte de no llegits al títol de la pestanya"
 
+#: src/pages/auth/RegistrationPage.tsx
+#: src/pages/auth/RegistrationPage.tsx
 #: src/pages/WelcomePage.tsx
-#: src/pages/auth/RegistrationPage.tsx
-#: src/pages/auth/RegistrationPage.tsx
 msgid "Sign up"
 msgstr "Registra't"
 
@@ -929,21 +1018,21 @@ msgstr "Acaba de passar una cosa dolenta..."
 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/FeedEntriesPage.tsx
-#: 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/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"
 
@@ -982,7 +1071,15 @@ msgstr "Etiquetes"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Teal"
-msgstr ""
+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."
@@ -992,10 +1089,19 @@ msgstr "l'URL del canal al qual us voleu subscriure. "
 msgid "Theme"
 msgstr "Tema"
 
+#. placeholder {0}: feed.filterLegacy
+#: src/pages/app/FeedDetailsPage.tsx
+msgid "This feed has a legacy filter that cannot be edited and is not applied. Please recreate the filter using the new expression editor. The legacy filter expression was: <0>{0}</0>"
+msgstr "Aquest feed té un filtre heretat que no es pot editar i no s'aplica. Torneu a crear el filtre amb el nou editor d'expressions. L'expressió del filtre heretat era: <0>{0}</0>"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "This is your API key. It can be used for some read-only API operations and grants access to the Fever API. Use the form at the bottom of the page to generate a new API key"
 msgstr "Aquesta és la vostra clau de l'API. Es pot utilitzar per a algunes operacions de l'API de només lectura i permet accedir a l'API Fever. Utilitzeu el formulari de la part inferior de la pàgina per generar una nova clau d'API."
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "This setting can cause scrolling issues on some browsers (e.g. Safari)"
+msgstr "Aquesta configuració pot causar problemes de desplaçament en alguns navegadors (per exemple, Safari)"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "Canvia l'estat de lectura de l'entrada actual"
@@ -1008,6 +1114,10 @@ msgstr "Canvia la barra lateral"
 msgid "Toggle starred status of current entry"
 msgstr "Commuta l'estat destacat de l'entrada actual"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "Topic"
+msgstr "Tema"
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Proveu CommaFeed amb el compte de demostració: demo/demo"
@@ -1020,8 +1130,8 @@ 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"
@@ -1031,6 +1141,10 @@ msgstr "Desestrellar"
 msgid "Unsubscribe"
 msgstr "Donar-se de baixa"
 
+#: src/components/settings/PushNotificationSettings.tsx
+msgid "User key"
+msgstr "Clau d'usuari"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "User name"
 msgstr "Nom d'usuari"
@@ -1042,7 +1156,7 @@ msgstr "Nom d'usuari o correu electrònic"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Violet"
-msgstr ""
+msgstr "Violeta"
 
 #: src/components/Alert.tsx
 msgid "Warning"
@@ -1052,9 +1166,13 @@ msgstr "Avís"
 msgid "Website"
 msgstr "Lloc web"
 
+#: src/pages/auth/InitialSetupPage.tsx
+msgid "Welcome! This appears to be the first time you're running CommaFeed. Please create an administrator account to get started."
+msgstr "Benvingut! Sembla que aquesta és la primera vegada que executeu CommaFeed. Creeu un compte d'administrador per començar."
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Yellow"
-msgstr ""
+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?"
@@ -1063,3 +1181,7 @@ msgstr "Encara no teniu cap subscripció. "
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
 msgstr "Els vostres feeds s'han posat a la cua per actualitzar-los."
+
+#: src/pages/auth/PasswordResetPage.tsx
+msgid "Your password has been changed. You can now log in with your new password."
+msgstr "La vostra contrasenya s'ha canviat. Ara podeu iniciar la sessió amb la vostra nova contrasenya."