release 4.3.1

Bump the mantine group in /commafeed-client with 6 updates

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: [athou]
+custom: ['https://www.paypal.com/donate/?business=9CNQHMJG2ZJVY&no_recurring=0&item_name=CommaFeed&currency_code=EUR']

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,33 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ""
+labels: ""
+assignees: ""
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment (please complete the following information):**
+
+- CommaFeed version (or "commafeed.com"): 3.2.1
+- Browser [e.g. chrome, firefox]:
+- Device [e.g. desktop, mobile]:
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -0,0 +1,24 @@
+version: 2
+updates:
+  - package-ecosystem: "maven"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 10
+  - package-ecosystem: "npm"
+    directory: "/commafeed-client"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 10
+    groups:
+      mantine:
+        patterns:
+          - "@mantine/*"
+      lingui:
+        patterns:
+          - "@lingui/*"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 10

.github/stale.yml

@@ -7,6 +7,7 @@ exemptLabels:
   - pinned
   - security
   - enhancement
+  - bug
 # Label to use when marking an issue as stale
 staleLabel: wontfix
 # Comment to post when marking an issue as stale. Set to `false` to disable

.github/workflows/build.yml

@@ -7,23 +7,23 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        java: [ "8", "11", "17" ]
+        java: [ "17", "21" ]
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       # Setup
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       - name: Set up Java
-        uses: actions/setup-java@v3
+        uses: actions/setup-java@v4
         with:
           java-version: ${{ matrix.java }}
           distribution: "temurin"
@@ -34,51 +34,51 @@ jobs:
         run: mvn --batch-mode --update-snapshots verify
 
       - name: Upload JAR
-        uses: actions/upload-artifact@v3
-        if: ${{ matrix.java == '8' }}
+        uses: actions/upload-artifact@v4
+        if: ${{ matrix.java == '17' }}
         with:
           name: commafeed.jar
           path: commafeed-server/target/commafeed.jar
 
       # Docker
       - name: Login to Container Registry
-        uses: docker/login-action@v2
-        if: ${{ matrix.java == '8' }}
+        uses: docker/login-action@v3
+        if: ${{ matrix.java == '17' && (github.ref_type == 'tag' || github.ref_name == 'master') }}
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Docker build and push tag
-        uses: docker/build-push-action@v4
-        if: ${{ matrix.java == '8' && github.ref_type == 'tag' }}
+        uses: docker/build-push-action@v5
+        if: ${{ matrix.java == '17' && github.ref_type == 'tag' }}
         with:
           context: .
           push: true
-          platforms: linux/amd64,linux/arm/v7
+          platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
           tags: |
             athou/commafeed:latest
             athou/commafeed:${{ github.ref_name }}
 
       - name: Docker build and push master
-        uses: docker/build-push-action@v4
-        if: ${{ matrix.java == '8' && github.ref_name == 'master' }}
+        uses: docker/build-push-action@v5
+        if: ${{ matrix.java == '17' && github.ref_name == 'master' }}
         with:
           context: .
           push: true
-          platforms: linux/amd64,linux/arm/v7
+          platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
           tags: athou/commafeed:master
 
       # Create GitHub release after Docker image has been published
       - name: Extract Changelog Entry
         uses: mindsers/changelog-reader-action@v2
-        if: ${{ matrix.java == '8' && github.ref_type == 'tag' }}
+        if: ${{ matrix.java == '17' && github.ref_type == 'tag' }}
         id: changelog_reader
         with:
           version: ${{ github.ref_name }}
 
       - name: Create GitHub release
         uses: softprops/action-gh-release@v1
-        if: ${{ matrix.java == '8' && github.ref_type == 'tag' }}
+        if: ${{ matrix.java == '17' && github.ref_type == 'tag' }}
         with:
           name: CommaFeed ${{ github.ref_name }}
           body: ${{ steps.changelog_reader.outputs.changes }}
@@ -86,4 +86,4 @@ jobs:
           prerelease: false
           files: |
             commafeed-server/target/commafeed.jar
-            commafeed-server/config.yml.example
+            commafeed-server/config.yml.example

.gitignore

@@ -35,5 +35,8 @@ src/main/app/lib
 # Sublime
 *.sublime*
 
+# VSCode
+.vscode
+
 # Macs
 *.DS_Store

CHANGELOG.md

@@ -1,10 +1,171 @@
 # Changelog
 
+## [4.3.1]
+
+- fix an issue that prevents new feeds from being added when mysql/mariadb is used as the database and the database
+  timezone is not UTC (#1239)
+- videos in enclosures can no longer have a width larger than the page (#1240)
+
+## [4.3.0]
+
+- h2 (the embedded database) has been upgraded to 2.2.224
+    - this version uses a different file format than 2.1.x, the first time you start CommaFeed with this version, the
+      database will be automatically converted to the new format
+- add a setting to completely disable scrolling to selected entry (#1157)
+- add a css class reflecting the current view mode to ease custom css rules (#1232)
+- fix an issue that prevents new feeds from being added when mysql/mariadb is used as the database (#1239)
+
+## [4.2.1]
+
+- fix an issue that caused the tree to show an incorrect unread count after a websocket notification because entries
+  that were already marked as read by a filtering expression were not ignored (#1191)
+
+## [4.2.0]
+
+- add a setting to display the action buttons in the footer instead of in the header on mobile (#1121)
+- the websocket notification now contains everything needed to update the UI, the client no longer needs to make an API
+  call to get the latest data when receiving the notification
+- add a workaround to the Fever API for the Unread iOS app (#1188)
+- fix an issue that caused dates to be saved incorrectly if the database server and the application server were in
+  different timezones (#1187)
+
+## [4.1.0]
+
+- it is now possible to open the sidebar on mobile by swiping to the right (#1098)
+- swiping to mark entries as read/unread changed from swiping right to left because swiping right now opens the sidebar
+- the full hierarchy of categories are now displayed in the category dropdown (#1045)
+- added a setting `maxEntriesAgeDays` to delete old entries based on their age during database cleanup.
+  The setting is disabled by default for existing installations, except for the docker image where it is enabled and set
+  to 365 days
+- if user registrations are disabled on your instance which is the default behavior, users are redirected on the login
+  page instead of the welcome page when not logged in (#1185)
+- the sidebar resizer is no longer shown in the middle of the screen on mobile
+- when using the system color scheme and the system is using a dark theme, feed entries no longer flicker on load
+- the demo account (if enabled) cannot register custom javascript code anymore
+- removed the usage of `toSorted` in the client because older browsers do not support it (#1183)
+- the openapi documentation is no longer cached by the browser so you always have access to the latest version
+- added a memory management section to the readme, reading it is recommended if you are running CommaFeed on a server
+  with limited memory
+- fixed an issue that caused users without an email address set to be unable to edit their profile (#1184)
+
+## [4.0.0]
+
+- migrated from dropwizard 2 to dropwizard 4, Java 17+ is now required
+- entries that were fetched and inserted in the database but not yet shown in the UI are no longer marked as read when
+  marking all entries as read
+- your custom sidebar width is now persisted in the local storage of your browser
+- there is now a third color scheme option in addition to light and dark: system (follows the system color scheme)
+- added support for youtube playlist favicons
+- custom JS code is now executed when the app is done loading instead of when the page is loaded
+- the favicon is now correctly returned for feeds that return an invalid content type
+- the feed refresh engine now uses httpclient5 with connection pooling and no longer creates a new client for each
+  request, reducing CPU usage
+- updated UI library Mantine to 7.0, improving performance
+- the h2 embedded database is now compacted on shutdown to reclaim unused space
+- the admin connector on port 8084 is now disabled in config.yml.example. Disabling it in your config.yml is
+  recommended (see https://github.com/Athou/commafeed/commit/929df60f09cce56020b0962ab111cd8349b271b0)
+- migrated documentation from swagger 2 to openapi 3
+- added a GET method to the fever api to indicate that the endpoint is working correctly when accessed from a browser
+- the websocket connection can now be disabled, the websocket ping interval and the tree reload interval can now be
+  configured (see config.yml.example)
+- the websocket connection now works correctly when the context root of the application is not "/"
+- unstable pubsubhubbub support was removed
+
+## [3.10.1]
+
+- swap next and previous buttons (#1159)
+- unread count for subscriptions will now be shortened starting at 10k instead of 1k
+- increased websocket ping interval to just under a minute to reduce data and battery usage on mobile
+- only refresh subscription tree on a timer if websocket connection is unavailable
+- the Docker image now uses less memory by returning unused memory to the OS
+- add support for Java 21
+
+## [3.10.0]
+
+- added a Fever-compatible API that is usable with mobile clients that support the Fever API (see instructions in
+  Settings -> Profile)
+- long entry titles are no longer shortened in the detailed view
+- added the "s" keyboard shortcut to star/unstar entries
+- http sessions are now stored in the database (they were stored on disk before)
+- fixed an issue that made it impossible to override the database url in a config.yml mounted in the Docker image
+
+## [3.9.0]
+
+- improve performance by disabling the loader when nothing is loading (most noticeable on mobile)
+- added a setting to disable the 'mark all as read' confirmation
+- added a setting to disable the custom context menu
+- if the custom context is enabled, it can still be disabled by pressing the shift key
+- the announcement feature is now working again and supports html ('announcement' configuration element in config.yml)
+- add support for MariaDB 11+
+- fix entry header shortly rendered as mobile on desktop, causing a small visual glitch
+- fix an issue that could cause a feed to not refresh correctly if the url was very long
+- database cleanup batch size is now configurable
+- css parsing errors are no longer logged to the standard output
+- fix small errors in the api documentation
+
+## [3.8.1]
+
+- in expanded mode, don't scroll when clicking on the body of the current entry
+- improve content cleanup task performance for instances with a very large number of feeds
+
+## [3.8.0]
+
+- add previous and next buttons in the toolbar
+- add a setting to always scroll selected entry to the top of the page, even if it fits entirely on screen
+- clicking on the body of an entry in expanded mode selects it and marks it as read
+- add rich text editor with autocomplete for custom css and js code in settings (desktop only)
+- dramatically improve performance while scrolling
+- fix broken welcome page mobile layout
+- format dates in user locale instead of GMT in relative date popups
+
+## [3.7.0]
+
+- the sidebar is now resizable
+- added the "f" keyboard shortcut to hide the sidebar
+- added tooltips to relative dates with the exact date
+- add a setting to hide commafeed from search engines (exposes a robots.txt file, enabled by default)
+- the browser extension unread count now updates when articles are marked as read/unread in the app
+- The "b" keyboard shortcut now works as expected on Chrome but requires the browser extension to be installed
+- dark mode has been disabled on the api documentation page as it was unreadable
+- improvement to the feed refresh queuing logic when "heavy load" mode is enabled
+- fix a bug that could prevent feeds and categories from being edited
+
+## [3.6.0]
+
+- add a button to open CommaFeed in a new tab and a button to open options when using the browser extension
+- clicking on the entry title in expanded mode now opens the link instead of doing nothing
+- add tooltips to buttons when the mobile layout is used on desktop
+- redirect the user to the welcome page if the user was deleted from the database
+- add link to api documentation on welcome page
+- the unread count is now correctly updated when using the "/next" bookmarklet while redis cache is enabled
+
+## [3.5.0]
+
+- add compatibility with the new version of the CommaFeed browser extension
+- disable pull-to-refresh on mobile as it messes with vertical scrolling
+- add css classes to feed entries to help with custom css rules
+- api documentation page no longer requires users to be authenticated
+- add a setting to limit the number of feeds a user can subscribe to
+- add a setting to disable strict password policy
+- add feed refresh engine metrics
+- fix redis timeouts
+
+## [3.4.0]
+
+- add support for arm64 docker images
+- add divider to visually separate read-only information from form on the profile settings page
+- reduce javascript bundle size by 30% by loading only the necessary translations
+- add a standalone donate page with all ways to support CommaFeed
+- fix an issue introduced in 3.1.0 that could make CommaFeed not refresh feeds as fast as before on instances with lots
+  of feeds
+- fix alignment of icon with text for category tree nodes
+- fix alignment of burger button with the rest of the header on mobile
+
 ## [3.3.2]
 
 - restore entry selection indicator (left orange border) that was lost with the mantine 6.x upgrade (3.3.0)
 - add dividers to visually separate read-only information from forms on feed and category details pages
-- reduced js bundle size by 10%
+- reduced javascript bundle size by 10%
 
 ## [3.3.1]
 
@@ -37,10 +198,10 @@
 ## [3.0.1]
 
 - allow env variable substitution in config.yml
-  - e.g. having a custom config.yml file with `app.session.path=${SOME_ENV_VAR}` will substitute `SOME_ENV_VAR` with
-    its value
+- e.g. having a custom config.yml file with `app.session.path=${SOME_ENV_VAR}` will substitute `SOME_ENV_VAR` with its
+  value
 - allow env variable prefixed with `CF_` to override config.yml properties
-  - e.g. setting `CF_APP_ALLOWREGISTRATIONS=true` will set `app.allowRegistrations` to `true`
+- e.g. setting `CF_APP_ALLOWREGISTRATIONS=true` will set `app.allowRegistrations` to `true`
 
 ## [3.0.0]
 

Dockerfile

@@ -4,9 +4,9 @@ EXPOSE 8082
 
 RUN mkdir -p /commafeed/data
 VOLUME /commafeed/data
-ENV CF_SESSION_PATH=/commafeed/data/sessions
 
 COPY commafeed-server/config.yml.example config.yml
 COPY commafeed-server/target/commafeed.jar .
 
-CMD ["java", "-Djava.net.preferIPv4Stack=true", "-jar", "commafeed.jar", "server", "config.yml"]
+ENV JAVA_TOOL_OPTIONS -Djava.net.preferIPv4Stack=true -Xms20m -XX:+UseG1GC -XX:-ShrinkHeapInSteps -XX:G1PeriodicGCInterval=10000 -XX:-G1PeriodicGCInvokesConcurrent -XX:MinHeapFreeRatio=5 -XX:MaxHeapFreeRatio=10
+CMD ["java", "-jar", "commafeed.jar", "server", "config.yml"]

README.md

@@ -7,30 +7,32 @@ Google Reader inspired self-hosted RSS reader, based on Dropwizard and React/Typ
 ## Features
 
 - 4 different layouts
-- Dark theme
+- Light/Dark theme
 - Fully responsive
 - Keyboard shortcuts for almost everything
 - Support for right-to-left feeds
 - Translated in 25+ languages
 - Supports thousands of users and millions of feeds
 - OPML import/export
-- REST API
+- REST API and a Fever-compatible API for native mobile apps
+- [Browser extension](https://github.com/Athou/commafeed-browser-extension)
 
-## Related open-source projects
-
-Browser extensions:
-
-- [Chrome](https://github.com/Athou/commafeed-chrome)
-- [Firefox](https://github.com/Athou/commafeed-firefox)
-- [Opera](https://github.com/Athou/commafeed-opera)
-- [Safari](https://github.com/Athou/commafeed-safari)
-
-## Deployment on your own server
+## Deployment
 
 ### Docker
 
+Docker is the easiest way to get started with CommaFeed.
+
 Docker images are built automatically and are available at https://hub.docker.com/r/athou/commafeed
 
+### Cloud hosting
+
+[PikaPods](https://www.pikapods.com) offers 1-click cloud hosting solutions starting at $1/month with a free $5
+welcome credit and officially supports CommaFeed.
+PikaPods shares 20% of the revenue back to CommaFeed.
+
+[![PikaPods](https://www.pikapods.com/static/run-button.svg)](https://www.pikapods.com/pods?run=commafeed)
+
 ### Download precompiled package
 
     mkdir commafeed && cd commafeed
@@ -52,6 +54,29 @@ user is `admin` and the default password is `admin`.
 The server will listen on http://localhost:8082. The default
 user is `admin` and the default password is `admin`.
 
+### Memory management
+
+The Java Virtual Machine (JVM) is rather greedy by default and will not release unused memory to the
+operating system. This is because acquiring memory from the operating system is a relatively expensive operation.
+However, this can be problematic on systems with limited memory.
+
+#### Hard limit
+
+The JVM can be configured to use a maximum amount of memory with the `-Xmx` parameter.
+For example, to limit the JVM to 256MB of memory, use `-Xmx256m`.
+
+#### Dynamic sizing
+
+The JVM can be configured to release unused memory to the operating system with the following parameters:
+
+    -Xms20m -XX:+UseG1GC -XX:-ShrinkHeapInSteps -XX:G1PeriodicGCInterval=10000 -XX:-G1PeriodicGCInvokesConcurrent -XX:MinHeapFreeRatio=5 -XX:MaxHeapFreeRatio=10
+
+This is how the Docker image is configured.
+See [here](https://docs.oracle.com/en/java/javase/17/gctuning/garbage-first-g1-garbage-collector1.html)
+and [here](https://docs.oracle.com/en/java/javase/17/gctuning/factors-affecting-garbage-collection-performance.html) for
+more
+information.
+
 ## Translation
 
 Files for internationalization are
@@ -59,11 +84,11 @@ located [here](https://github.com/Athou/commafeed/tree/master/commafeed-client/s
 
 To add a new language:
 
-- edit `commafeed-client/src/i18n.ts`
-    - add the new locale to the `locales` array.
-    - import the dayjs locale
-- edit `commafeed-client/.linguirc` and add the new locale to the `locales` array.
-- run `npm run i18n` and add translations to the newly created `commafeed-client/src/locales/[locale]/messages.po` file
+- add the new locale to the `locales` array in:
+    - `commafeed-client/.linguirc`
+    - `commafeed-client/src/i18n.ts`
+- run `npm run i18n:extract`
+- add translations to the newly created `commafeed-client/src/locales/[locale]/messages.po` file
 
 The name of the locale should be the
 two-letters [ISO-639-1 language code](http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes).
@@ -84,19 +109,3 @@ two-letters [ISO-639-1 language code](http://en.wikipedia.org/wiki/List_of_ISO_6
 
 The frontend server is now running at http://localhost:8082 and is proxying REST requests to the backend running on
 port 8083
-
-## Copyright and license
-
-Copyright 2013-2023 CommaFeed.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this work except in compliance with the License.
-You may obtain a copy of the License in the LICENSE file, or 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.

commafeed-client/.eslintignore

@@ -3,4 +3,6 @@ node_modules
 
 vite.config.ts
 
+# compiled linguijs locales
+# they no longer exist but we keep this to avoid issues with people still having those files on disk
 src/locales/**/*.ts

commafeed-client/.eslintrc

@@ -1,85 +0,0 @@
-{
-    "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:react/recommended",
-        "react-app",
-        "airbnb",
-        "airbnb-typescript",
-        "prettier"
-    ],
-    "plugins": ["@typescript-eslint", "prettier", "hooks"],
-    "parserOptions": {
-        "project": "./tsconfig.json"
-    },
-    "rules": {
-        // make eslint check prettier rules
-        "prettier/prettier": "error",
-
-        // enforce consistent curly braces usage
-        "curly": ["error", "multi-line", "consistent"],
-
-        // set "props" to false because it cases false positives with immer
-        "no-param-reassign": ["error", { "props": false }],
-
-        "prefer-destructuring": [
-            "error",
-            {
-                "array": false,
-                "object": true
-            },
-            {
-                "enforceForRenamedProperties": false
-            }
-        ],
-
-        // causes issues in thunks when we want to dispatch an action that is defined in the reducer
-        "@typescript-eslint/no-use-before-define": "off",
-
-        // make sure the key prop is filled when required
-        "react/jsx-key": ["error", { "checkFragmentShorthand": true }],
-
-        // configure additional hooks
-        "react-hooks/exhaustive-deps": [
-            "warn",
-            {
-                "additionalHooks": "(^useAsync$|useDidUpdate)"
-            }
-        ],
-
-        // trigger even if props is used only in createStyles()
-        "react/no-unused-prop-types": "off",
-
-        // no longer required with modern react versions
-        "react/react-in-jsx-scope": "off",
-
-        // not required with typescript
-        "react/prop-types": "off",
-        "react/require-default-props": "off",
-
-        // matter of taste
-        "react/destructuring-assignment": "off",
-        "react/jsx-props-no-spreading": "off",
-        "react/no-unescaped-entities": "off",
-        "import/prefer-default-export": "off",
-
-        // enforce hook call order
-        "hooks/sort": [
-            2,
-            {
-                "groups": [
-                    "useLocation",
-                    "useParams",
-                    "useState",
-                    "useAppSelector",
-                    "useAppDispatch",
-                    "useAsync",
-                    "useForm",
-                    "useAsyncCallback",
-                    "useCallback",
-                    "useEffect"
-                ]
-            }
-        ]
-    }
-}

commafeed-client/.eslintrc.cjs

@@ -0,0 +1,41 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true
+    },
+    extends: ["standard-with-typescript", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:prettier/recommended"],
+    settings: {
+        react: {
+            version: "detect"
+        }
+    },
+    overrides: [
+        {
+            env: {
+                node: true
+            },
+            files: [".eslintrc.{js,cjs}"],
+            parserOptions: {
+                sourceType: "script"
+            }
+        }
+    ],
+    parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module"
+    },
+    plugins: ["react"],
+    rules: {
+        "@typescript-eslint/consistent-type-assertions": ["error", { assertionStyle: "as" }],
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/no-confusing-void-expression": ["error", { ignoreArrowShorthand: true }],
+        "@typescript-eslint/no-floating-promises": "off",
+        "@typescript-eslint/no-misused-promises": "off",
+        "@typescript-eslint/prefer-nullish-coalescing": ["error", { ignoreConditionalTests: true }],
+        "@typescript-eslint/strict-boolean-expressions": "off",
+        "@typescript-eslint/unbound-method": "off",
+        "react/no-unescaped-entities": "off",
+        "react/react-in-jsx-scope": "off",
+        "react-hooks/exhaustive-deps": "error"
+    }
+}

commafeed-client/.gitignore

@@ -29,5 +29,6 @@ dist-ssr
 # vite
 vite.config.ts.timestamp-*.mjs
 
-# compiled locales
+# compiled linguijs locales
+# they no longer exist but we keep this to avoid issues with people still having those files on disk
 src/locales/**/*.ts

commafeed-client/.prettierrc

@@ -3,5 +3,6 @@
     "semi": false,
     "tabWidth": 4,
     "arrowParens": "avoid",
-    "endOfLine": "auto"
+    "endOfLine": "auto",
+    "trailingComma": "es5"
 }

commafeed-client/index.html

@@ -4,13 +4,11 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/x-icon" href="favicon.ico" />
   <link rel="manifest" href="manifest.json" />
-  <link rel="stylesheet" href="custom_css.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <title>CommaFeed</title>
 </head>
 <body>
 <div id="root"></div>
 <script type="module" src="/src/main.tsx"></script>
-<script src="custom_js.js"></script>
 </body>
 </html>

commafeed-client/package.json

@@ -1,84 +1,82 @@
 {
-    "name": "commafeed-client",
-    "private": true,
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "dev": "vite --host",
-        "dev:typescript": "tsc --watch",
-        "build": "npm run i18n:compile && tsc && vite build",
-        "preview": "vite preview",
-        "test": "vitest",
-        "test:ci": "vitest run",
-        "eslint": "eslint --ext=.js,.jsx,.ts,.tsx src",
-        "i18n": "npm run i18n:extract && npm run i18n:compile",
-        "i18n:extract": "lingui extract --clean",
-        "i18n:compile": "lingui compile --typescript",
-        "postinstall": "npm run i18n:compile"
-    },
-    "dependencies": {
-        "@emotion/react": "^11.11.0",
-        "@fontsource/open-sans": "^4.5.14",
-        "@lingui/core": "^4.0.0",
-        "@lingui/macro": "^4.0.0",
-        "@lingui/react": "^4.0.0",
-        "@mantine/core": "^6.0.10",
-        "@mantine/form": "^6.0.10",
-        "@mantine/hooks": "^6.0.10",
-        "@mantine/modals": "^6.0.10",
-        "@mantine/notifications": "^6.0.10",
-        "@mantine/spotlight": "^6.0.10",
-        "@mantine/styles": "^6.0.10",
-        "@reduxjs/toolkit": "^1.9.5",
-        "axios": "^1.4.0",
-        "dayjs": "^1.11.7",
-        "interweave": "^13.1.0",
-        "mousetrap": "^1.6.5",
-        "react": "^18.2.0",
-        "react-async-hook": "^4.0.0",
-        "react-contexify": "^6.0.0",
-        "react-dom": "^18.2.0",
-        "react-ga4": "^2.1.0",
-        "react-icons": "^4.8.0",
-        "react-infinite-scroller": "^1.2.6",
-        "react-redux": "^8.0.5",
-        "react-router-dom": "^6.11.1",
-        "react-swipeable": "^7.0.0",
-        "swagger-ui-react": "^4.18.3",
-        "throttle-debounce": "^5.0.0",
-        "tinycon": "^0.6.8",
-        "use-local-storage": "^3.0.0",
-        "websocket-heartbeat-js": "^1.1.2"
-    },
-    "devDependencies": {
-        "@lingui/cli": "^4.0.0",
-        "@lingui/vite-plugin": "^4.0.0",
-        "@types/eslint": "^8.37.0",
-        "@types/mousetrap": "^1.6.11",
-        "@types/react": "^18.2.6",
-        "@types/react-dom": "^18.2.4",
-        "@types/react-infinite-scroller": "^1.2.3",
-        "@types/swagger-ui-react": "^4.18.0",
-        "@types/throttle-debounce": "^5.0.0",
-        "@types/tinycon": "^0.6.3",
-        "@typescript-eslint/eslint-plugin": "^5.59.2",
-        "@typescript-eslint/parser": "^5.59.2",
-        "@vitejs/plugin-react": "^4.0.0",
-        "babel-plugin-macros": "^3.1.0",
-        "eslint": "^8.40.0",
-        "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-airbnb-typescript": "^17.0.0",
-        "eslint-config-prettier": "^8.8.0",
-        "eslint-config-react-app": "^7.0.1",
-        "eslint-plugin-hooks": "^0.4.3",
-        "eslint-plugin-prettier": "^4.2.1",
-        "prettier": "^2.8.8",
-        "rollup-plugin-visualizer": "^5.9.0",
-        "typescript": "^5.0.4",
-        "vite": "^4.3.5",
-        "vite-plugin-eslint": "^1.8.1",
-        "vite-tsconfig-paths": "^4.2.0",
-        "vitest": "^0.31.0",
-        "vitest-mock-extended": "^1.1.3"
-    }
+  "name": "commafeed-client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "dev:typescript": "tsc --watch",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ci": "vitest run",
+    "eslint": "eslint --ext=.js,.jsx,.ts,.tsx src",
+    "i18n:extract": "lingui extract --clean"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@fontsource/open-sans": "^5.0.23",
+    "@lingui/core": "^4.7.0",
+    "@lingui/macro": "^4.7.0",
+    "@lingui/react": "^4.7.0",
+    "@mantine/core": "^7.5.2",
+    "@mantine/form": "^7.5.2",
+    "@mantine/hooks": "^7.5.2",
+    "@mantine/modals": "^7.5.2",
+    "@mantine/notifications": "^7.5.2",
+    "@mantine/spotlight": "^7.5.2",
+    "@monaco-editor/react": "^4.6.0",
+    "@reduxjs/toolkit": "^2.1.0",
+    "axios": "^1.6.7",
+    "dayjs": "^1.11.10",
+    "escape-string-regexp": "^5.0.0",
+    "interweave": "^13.1.0",
+    "monaco-editor": "^0.46.0",
+    "mousetrap": "^1.6.5",
+    "react": "^18.2.0",
+    "react-async-hook": "^4.0.0",
+    "react-contexify": "^6.0.0",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-ga4": "^2.1.0",
+    "react-icons": "^5.0.1",
+    "react-infinite-scroller": "^1.2.6",
+    "react-redux": "^9.1.0",
+    "react-router-dom": "^6.22.0",
+    "react-swipeable": "^7.0.1",
+    "redoc": "^2.1.3",
+    "throttle-debounce": "^5.0.0",
+    "tinycon": "^0.6.8",
+    "tss-react": "^4.9.4",
+    "use-local-storage": "^3.0.0",
+    "websocket-heartbeat-js": "^1.1.3"
+  },
+  "devDependencies": {
+    "@lingui/cli": "^4.7.0",
+    "@lingui/vite-plugin": "^4.7.0",
+    "@types/mousetrap": "^1.6.15",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@types/react-infinite-scroller": "^1.2.5",
+    "@types/swagger-ui-react": "^4.18.3",
+    "@types/throttle-debounce": "^5.0.2",
+    "@types/tinycon": "^0.6.5",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "babel-plugin-macros": "^3.1.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.2.5",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.1",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-tsconfig-paths": "^4.3.1",
+    "vitest": "^1.2.2",
+    "vitest-mock-extended": "^1.3.1"
+  }
 }

commafeed-client/pom.xml

@@ -5,7 +5,7 @@
 	<parent>
 		<groupId>com.commafeed</groupId>
 		<artifactId>commafeed</artifactId>
-		<version>3.3.2</version>
+		<version>4.3.1</version>
 	</parent>
 	<artifactId>commafeed-client</artifactId>
 	<name>CommaFeed Client</name>
@@ -15,7 +15,7 @@
 			<plugin>
 				<groupId>com.github.eirslett</groupId>
 				<artifactId>frontend-maven-plugin</artifactId>
-				<version>1.12.1</version>
+				<version>1.15.0</version>
 				<?m2e ignore?>
 				<executions>
 					<execution>
@@ -25,8 +25,8 @@
 						</goals>
 						<phase>compile</phase>
 						<configuration>
-							<nodeVersion>v16.16.0</nodeVersion>
-							<npmVersion>8.15.0</npmVersion>
+							<nodeVersion>v20.10.0</nodeVersion>
+							<npmVersion>10.2.5</npmVersion>
 						</configuration>
 					</execution>
 					<execution>
@@ -39,16 +39,6 @@
 							<arguments>ci</arguments>
 						</configuration>
 					</execution>
-					<execution>
-						<id>npm run eslint</id>
-						<goals>
-							<goal>npm</goal>
-						</goals>
-						<phase>compile</phase>
-						<configuration>
-							<arguments>run eslint</arguments>
-						</configuration>
-					</execution>
 					<execution>
 						<id>npm run test</id>
 						<goals>
@@ -73,7 +63,7 @@
 			</plugin>
 			<plugin>
 				<artifactId>maven-resources-plugin</artifactId>
-				<version>3.3.0</version>
+				<version>3.3.1</version>
 				<executions>
 					<execution>
 						<id>copy web interface to resources</id>

commafeed-client/src/App.tsx

@@ -1,23 +1,25 @@
 import { i18n } from "@lingui/core"
 import { I18nProvider } from "@lingui/react"
-import { ColorScheme, ColorSchemeProvider, MantineProvider } from "@mantine/core"
-import { useColorScheme } from "@mantine/hooks"
+import { MantineProvider } from "@mantine/core"
+import { useDidUpdate } from "@mantine/hooks"
 import { ModalsProvider } from "@mantine/modals"
 import { Notifications } from "@mantine/notifications"
 import { Constants } from "app/constants"
-import { redirectTo } from "app/slices/redirect"
-import { reloadServerInfos } from "app/slices/server"
+import { redirectTo } from "app/redirect/slice"
+import { reloadServerInfos } from "app/server/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { categoryUnreadCount } from "app/utils"
 import { ErrorBoundary } from "components/ErrorBoundary"
 import { Header } from "components/header/Header"
 import { Tree } from "components/sidebar/Tree"
+import { useBrowserExtension } from "hooks/useBrowserExtension"
 import { useI18n } from "i18n"
 import { 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"
@@ -27,43 +29,52 @@ import { LoginPage } from "pages/auth/LoginPage"
 import { PasswordRecoveryPage } from "pages/auth/PasswordRecoveryPage"
 import { RegistrationPage } from "pages/auth/RegistrationPage"
 import { WelcomePage } from "pages/WelcomePage"
-import React, { useEffect } from "react"
+import React, { useEffect, useRef } from "react"
 import ReactGA from "react-ga4"
 import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom"
 import Tinycon from "tinycon"
-import useLocalStorage from "use-local-storage"
 
 function Providers(props: { children: React.ReactNode }) {
-    const preferredColorScheme = useColorScheme()
-    const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>("color-scheme", preferredColorScheme)
-    const toggleColorScheme = (value?: ColorScheme) => setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"))
-
     return (
         <I18nProvider i18n={i18n}>
-            <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-                <MantineProvider
-                    withGlobalStyles
-                    withNormalizeCSS
-                    theme={{
-                        primaryColor: "orange",
-                        colorScheme,
-                        fontFamily: "Open Sans",
-                    }}
-                >
-                    <ModalsProvider>
-                        <Notifications position="bottom-right" zIndex={9999} />
-                        <ErrorBoundary>{props.children}</ErrorBoundary>
-                    </ModalsProvider>
-                </MantineProvider>
-            </ColorSchemeProvider>
+            <MantineProvider
+                defaultColorScheme="auto"
+                theme={{
+                    primaryColor: "orange",
+                    fontFamily: "Open Sans",
+                    colors: {
+                        // keep using dark colors from mantine v6
+                        // https://v6.mantine.dev/theming/colors/#default-colors
+                        dark: [
+                            "#C1C2C5",
+                            "#A6A7AB",
+                            "#909296",
+                            "#5c5f66",
+                            "#373A40",
+                            "#2C2E33",
+                            "#25262b",
+                            "#1A1B1E",
+                            "#141517",
+                            "#101113",
+                        ],
+                    },
+                }}
+            >
+                <ModalsProvider>
+                    <Notifications position="bottom-right" zIndex={9999} />
+                    <ErrorBoundary>{props.children}</ErrorBoundary>
+                </ModalsProvider>
+            </MantineProvider>
         </I18nProvider>
     )
 }
 
 // swagger-ui is very large, load only on-demand
-const ApiDocumentationPage = React.lazy(() => import("pages/app/ApiDocumentationPage"))
+const ApiDocumentationPage = React.lazy(async () => await import("pages/app/ApiDocumentationPage"))
 
 function AppRoutes() {
+    const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible)
+
     return (
         <Routes>
             <Route path="/" element={<Navigate to={`/app/category/${Constants.categories.all.id}`} replace />} />
@@ -71,7 +82,8 @@ function AppRoutes() {
             <Route path="login" element={<LoginPage />} />
             <Route path="register" element={<RegistrationPage />} />
             <Route path="passwordRecovery" element={<PasswordRecoveryPage />} />
-            <Route path="app" element={<Layout header={<Header />} sidebar={<Tree />} />}>
+            <Route path="api" element={<ApiDocumentationPage />} />
+            <Route path="app" element={<Layout header={<Header />} sidebar={<Tree />} sidebarVisible={sidebarVisible} />}>
                 <Route path="category">
                     <Route path=":id" element={<FeedEntriesPage sourceType="category" />} />
                     <Route path=":id/details" element={<CategoryDetailsPage />} />
@@ -91,7 +103,7 @@ function AppRoutes() {
                     <Route path="metrics" element={<MetricsPage />} />
                 </Route>
                 <Route path="about" element={<AboutPage />} />
-                <Route path="api" element={<ApiDocumentationPage />} />
+                <Route path="donate" element={<DonatePage />} />
             </Route>
             <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
@@ -132,13 +144,62 @@ function FaviconHandler() {
     const root = useAppSelector(state => state.tree.rootCategory)
     useEffect(() => {
         const unreadCount = categoryUnreadCount(root)
-        if (unreadCount === 0) Tinycon.reset()
-        else Tinycon.setBubble(unreadCount)
+        if (unreadCount === 0) {
+            Tinycon.reset()
+        } else {
+            Tinycon.setBubble(unreadCount)
+        }
     }, [root])
 
     return null
 }
 
+function BrowserExtensionBadgeUnreadCountHandler() {
+    const root = useAppSelector(state => state.tree.rootCategory)
+    const { setBadgeUnreadCount } = useBrowserExtension()
+    useEffect(() => {
+        if (!root) return
+        const unreadCount = categoryUnreadCount(root)
+        setBadgeUnreadCount(unreadCount)
+    }, [root, setBadgeUnreadCount])
+
+    return null
+}
+
+function CustomJs() {
+    const scriptLoaded = useRef(false)
+
+    // useDidUpdate is used instead of useEffect because we want to skip the first render
+    // the first render is the render of react-router, the routes are actually loaded in a second render
+    // we want the script to be executed when the first route is done loading
+    useDidUpdate(() => {
+        if (scriptLoaded.current) {
+            return
+        }
+
+        const script = document.createElement("script")
+        script.src = "custom_js.js"
+        script.async = true
+        document.body.appendChild(script)
+
+        scriptLoaded.current = true
+    })
+
+    return null
+}
+
+function CustomCss() {
+    useEffect(() => {
+        const link = document.createElement("link")
+        link.rel = "stylesheet"
+        link.type = "text/css"
+        link.href = "custom_css.css"
+        document.head.appendChild(link)
+    }, [])
+
+    return null
+}
+
 export function App() {
     useI18n()
     const dispatch = useAppDispatch()
@@ -151,10 +212,13 @@ export function App() {
         <Providers>
             <>
                 <FaviconHandler />
+                <BrowserExtensionBadgeUnreadCountHandler />
                 <HashRouter>
                     <GoogleAnalyticsHandler />
                     <RedirectHandler />
                     <AppRoutes />
+                    <CustomJs />
+                    <CustomCss />
                 </HashRouter>
             </>
         </Providers>

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

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

commafeed-client/src/app/client.ts

@@ -1,37 +1,42 @@
 import axios from "axios"
 import {
-    AddCategoryRequest,
-    Category,
-    CategoryModificationRequest,
-    CollapseRequest,
-    Entries,
-    FeedInfo,
-    FeedInfoRequest,
-    FeedModificationRequest,
-    GetEntriesPaginatedRequest,
-    IDRequest,
-    LoginRequest,
-    MarkRequest,
-    Metrics,
-    MultipleMarkRequest,
-    PasswordResetRequest,
-    ProfileModificationRequest,
-    RegistrationRequest,
-    ServerInfo,
-    Settings,
-    StarRequest,
-    SubscribeRequest,
-    Subscription,
-    TagRequest,
-    UserModel,
+    type AddCategoryRequest,
+    type AdminSaveUserRequest,
+    type Category,
+    type CategoryModificationRequest,
+    type CollapseRequest,
+    type Entries,
+    type FeedInfo,
+    type FeedInfoRequest,
+    type FeedModificationRequest,
+    type GetEntriesPaginatedRequest,
+    type IDRequest,
+    type LoginRequest,
+    type MarkRequest,
+    type Metrics,
+    type MultipleMarkRequest,
+    type PasswordResetRequest,
+    type ProfileModificationRequest,
+    type RegistrationRequest,
+    type ServerInfo,
+    type Settings,
+    type StarRequest,
+    type SubscribeRequest,
+    type Subscription,
+    type TagRequest,
+    type UserModel,
 } from "./types"
 
 const axiosInstance = axios.create({ baseURL: "./rest", withCredentials: true })
 axiosInstance.interceptors.response.use(
     response => response,
     error => {
-        if (error.response.status === 401 && error.response.data === "Credentials are required to access this resource.") {
-            window.location.hash = "/welcome"
+        const { status, data } = error.response
+        if (
+            (status === 401 && data?.message === "Credentials are required to access this resource.") ||
+            (status === 403 && data?.message === "You don't have the required role to access this resource.")
+        ) {
+            window.location.hash = data?.allowRegistrations ? "/welcome" : "/login"
         }
         throw error
     }
@@ -39,34 +44,34 @@ axiosInstance.interceptors.response.use(
 
 export const client = {
     category: {
-        getRoot: () => axiosInstance.get<Category>("category/get"),
-        modify: (req: CategoryModificationRequest) => axiosInstance.post("category/modify", req),
-        collapse: (req: CollapseRequest) => axiosInstance.post("category/collapse", req),
-        getEntries: (req: GetEntriesPaginatedRequest) => axiosInstance.get<Entries>("category/entries", { params: req }),
-        markEntries: (req: MarkRequest) => axiosInstance.post("category/mark", req),
-        add: (req: AddCategoryRequest) => axiosInstance.post("category/add", req),
-        delete: (req: IDRequest) => axiosInstance.post("category/delete", req),
+        getRoot: async () => await axiosInstance.get<Category>("category/get"),
+        modify: async (req: CategoryModificationRequest) => await axiosInstance.post("category/modify", req),
+        collapse: async (req: CollapseRequest) => await axiosInstance.post("category/collapse", req),
+        getEntries: async (req: GetEntriesPaginatedRequest) => await axiosInstance.get<Entries>("category/entries", { params: req }),
+        markEntries: async (req: MarkRequest) => await axiosInstance.post("category/mark", req),
+        add: async (req: AddCategoryRequest) => await axiosInstance.post("category/add", req),
+        delete: async (req: IDRequest) => await axiosInstance.post("category/delete", req),
     },
     entry: {
-        mark: (req: MarkRequest) => axiosInstance.post("entry/mark", req),
-        markMultiple: (req: MultipleMarkRequest) => axiosInstance.post("entry/markMultiple", req),
-        star: (req: StarRequest) => axiosInstance.post("entry/star", req),
-        getTags: () => axiosInstance.get<string[]>("entry/tags"),
-        tag: (req: TagRequest) => axiosInstance.post("entry/tag", req),
+        mark: async (req: MarkRequest) => await axiosInstance.post("entry/mark", req),
+        markMultiple: async (req: MultipleMarkRequest) => await axiosInstance.post("entry/markMultiple", req),
+        star: async (req: StarRequest) => await axiosInstance.post("entry/star", req),
+        getTags: async () => await axiosInstance.get<string[]>("entry/tags"),
+        tag: async (req: TagRequest) => await axiosInstance.post("entry/tag", req),
     },
     feed: {
-        get: (id: string) => axiosInstance.get<Subscription>(`feed/get/${id}`),
-        modify: (req: FeedModificationRequest) => axiosInstance.post("feed/modify", req),
-        getEntries: (req: GetEntriesPaginatedRequest) => axiosInstance.get<Entries>("feed/entries", { params: req }),
-        markEntries: (req: MarkRequest) => axiosInstance.post("feed/mark", req),
-        fetchFeed: (req: FeedInfoRequest) => axiosInstance.post<FeedInfo>("feed/fetch", req),
-        refreshAll: () => axiosInstance.get("feed/refreshAll"),
-        subscribe: (req: SubscribeRequest) => axiosInstance.post<number>("feed/subscribe", req),
-        unsubscribe: (req: IDRequest) => axiosInstance.post("feed/unsubscribe", req),
-        importOpml: (req: File) => {
+        get: async (id: string) => await axiosInstance.get<Subscription>(`feed/get/${id}`),
+        modify: async (req: FeedModificationRequest) => await axiosInstance.post("feed/modify", req),
+        getEntries: async (req: GetEntriesPaginatedRequest) => await axiosInstance.get<Entries>("feed/entries", { params: req }),
+        markEntries: async (req: MarkRequest) => await axiosInstance.post("feed/mark", req),
+        fetchFeed: async (req: FeedInfoRequest) => await axiosInstance.post<FeedInfo>("feed/fetch", req),
+        refreshAll: async () => await axiosInstance.get("feed/refreshAll"),
+        subscribe: async (req: SubscribeRequest) => await axiosInstance.post<number>("feed/subscribe", req),
+        unsubscribe: async (req: IDRequest) => await axiosInstance.post("feed/unsubscribe", req),
+        importOpml: async (req: File) => {
             const formData = new FormData()
             formData.append("file", req)
-            return axiosInstance.post("feed/import", formData, {
+            return await axiosInstance.post("feed/import", formData, {
                 headers: {
                     "Content-Type": "multipart/form-data",
                 },
@@ -74,23 +79,23 @@ export const client = {
         },
     },
     user: {
-        login: (req: LoginRequest) => axiosInstance.post("user/login", req),
-        register: (req: RegistrationRequest) => axiosInstance.post("user/register", req),
-        passwordReset: (req: PasswordResetRequest) => axiosInstance.post("user/passwordReset", req),
-        getSettings: () => axiosInstance.get<Settings>("user/settings"),
-        saveSettings: (settings: Settings) => axiosInstance.post("user/settings", settings),
-        getProfile: () => axiosInstance.get<UserModel>("user/profile"),
-        saveProfile: (req: ProfileModificationRequest) => axiosInstance.post("user/profile", req),
-        deleteProfile: () => axiosInstance.post("user/profile/deleteAccount"),
+        login: async (req: LoginRequest) => await axiosInstance.post("user/login", req),
+        register: async (req: RegistrationRequest) => await axiosInstance.post("user/register", req),
+        passwordReset: async (req: PasswordResetRequest) => await axiosInstance.post("user/passwordReset", req),
+        getSettings: async () => await axiosInstance.get<Settings>("user/settings"),
+        saveSettings: async (settings: Settings) => await axiosInstance.post("user/settings", 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"),
     },
     server: {
-        getServerInfos: () => axiosInstance.get<ServerInfo>("server/get"),
+        getServerInfos: async () => await axiosInstance.get<ServerInfo>("server/get"),
     },
     admin: {
-        getAllUsers: () => axiosInstance.get<UserModel[]>("admin/user/getAll"),
-        saveUser: (req: UserModel) => axiosInstance.post("admin/user/save", req),
-        deleteUser: (req: IDRequest) => axiosInstance.post("admin/user/delete", req),
-        getMetrics: () => axiosInstance.get<Metrics>("admin/metrics"),
+        getAllUsers: async () => await axiosInstance.get<UserModel[]>("admin/user/getAll"),
+        saveUser: async (req: AdminSaveUserRequest) => await axiosInstance.post("admin/user/save", req),
+        deleteUser: async (req: IDRequest) => await axiosInstance.post("admin/user/delete", req),
+        getMetrics: async () => await axiosInstance.get<Metrics>("admin/metrics"),
     },
 }
 
@@ -106,7 +111,7 @@ export const errorToStrings = (err: unknown) => {
         if (err.response) {
             const { data } = err.response
             if (typeof data === "string") strings.push(data)
-            if (typeof data === "object" && data.message) strings.push(data.message)
+            if (typeof data === "object" && data.message) strings.push(data.message as string)
             if (typeof data === "object" && data.errors) strings = [...strings, ...data.errors]
         }
     }

commafeed-client/src/app/constants.ts

@@ -1,11 +1,10 @@
 import { t } from "@lingui/macro"
-import { DEFAULT_THEME } from "@mantine/core"
-import { IconType } from "react-icons"
+import { type IconType } from "react-icons"
 import { FaAt } from "react-icons/fa"
 import { SiBuffer, SiFacebook, SiGmail, SiInstapaper, SiPocket, SiTumblr, SiTwitter } from "react-icons/si"
-import { Category, Entry, SharingSettings } from "./types"
+import { type Category, type Entry, type SharingSettings } from "./types"
 
-const categories: { [key: string]: Category } = {
+const categories: Record<string, Category> = {
     all: {
         id: "all",
         name: t`All`,
@@ -86,16 +85,25 @@ export const Constants = {
     categories,
     sharing,
     layout: {
-        mobileBreakpoint: DEFAULT_THEME.breakpoints.md,
+        mobileBreakpoint: 992,
+        mobileBreakpointName: "md",
         headerHeight: 60,
-        sidebarWidth: 350,
         entryMaxWidth: 650,
-        isTopVisible: (div: HTMLElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight,
-        isBottomVisible: (div: HTMLElement) => div.getBoundingClientRect().bottom <= window.innerHeight,
+        isTopVisible: (div: HTMLElement) => {
+            const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
+            return div.getBoundingClientRect().top >= (header?.bottom ?? 0)
+        },
+        isBottomVisible: (div: HTMLElement) => {
+            const footer = document.getElementById(Constants.dom.footerId)?.getBoundingClientRect()
+            return div.getBoundingClientRect().bottom <= (footer?.top ?? window.innerHeight)
+        },
     },
     dom: {
-        mainScrollAreaId: "main-scroll-area-id",
+        headerId: "header",
+        footerId: "footer",
         entryId: (entry: Entry) => `entry-id-${entry.id}`,
+        entryContextMenuId: (entry: Entry) => entry.id,
     },
+    browserExtensionUrl: "https://github.com/Athou/commafeed-browser-extension",
     bitcoinWalletAddress: "1dymfUxqCWpyD7a6rQSqNy4rLVDBsAr5e",
 }

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

@@ -1,12 +1,12 @@
 /* eslint-disable import/first */
 import { configureStore } from "@reduxjs/toolkit"
-import { client } from "app/client"
-import { reducers } from "app/store"
-import { Entries, Entry } from "app/types"
-import { AxiosResponse } from "axios"
+import { type client } from "app/client"
+import { loadEntries, loadMoreEntries, markAllEntries, markEntry } from "app/entries/thunks"
+import { reducers, type RootState } from "app/store"
+import { type Entries, type Entry } from "app/types"
+import { type AxiosResponse } from "axios"
 import { beforeEach, describe, expect, it, vi } from "vitest"
 import { mockReset } from "vitest-mock-extended"
-import { loadEntries, loadMoreEntries, markAllEntries, markEntry } from "./entries"
 
 const mockClient = await vi.hoisted(async () => {
     const mockModule = await import("vitest-mock-extended")
@@ -78,9 +78,10 @@ describe("entries", () => {
                     sourceWebsiteUrl: "",
                     entries: [{ id: "3" } as Entry],
                     hasMore: true,
+                    loading: false,
                     scrollingToEntry: false,
                 },
-            },
+            } as RootState,
         })
         const promise = store.dispatch(loadMoreEntries())
 
@@ -102,9 +103,10 @@ describe("entries", () => {
                     sourceWebsiteUrl: "",
                     entries: [{ id: "3", read: false } as Entry, { id: "4", read: false } as Entry],
                     hasMore: true,
+                    loading: false,
                     scrollingToEntry: false,
                 },
-            },
+            } as RootState,
         })
 
         store.dispatch(markEntry({ entry: { id: "3" } as Entry, read: true }))
@@ -128,9 +130,10 @@ describe("entries", () => {
                     sourceWebsiteUrl: "",
                     entries: [{ id: "3", read: false } as Entry, { id: "4", read: false } as Entry],
                     hasMore: true,
+                    loading: false,
                     scrollingToEntry: false,
                 },
-            },
+            } as RootState,
         })
 
         store.dispatch(markAllEntries({ sourceType: "category", req: { id: "all", read: true } }))

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

@@ -0,0 +1,134 @@
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
+import { Constants } from "app/constants"
+import { loadEntries, loadMoreEntries, markAllEntries, markEntry, markMultipleEntries, starEntry, tagEntry } from "app/entries/thunks"
+import { type Entry } from "app/types"
+
+export type EntrySourceType = "category" | "feed" | "tag"
+
+export interface EntrySource {
+    type: EntrySourceType
+    id: string
+}
+
+export type ExpendableEntry = Entry & { expanded?: boolean }
+
+interface EntriesState {
+    /** selected source */
+    source: EntrySource
+    sourceLabel: string
+    sourceWebsiteUrl: string
+    entries: ExpendableEntry[]
+    /** stores when the first batch of entries were retrieved
+     *
+     * this is used when marking all entries of a feed/category to only mark entries up to that timestamp as newer entries were potentially never shown
+     */
+    timestamp?: number
+    selectedEntryId?: string
+    hasMore: boolean
+    loading: boolean
+    search?: string
+    scrollingToEntry: boolean
+}
+
+const initialState: EntriesState = {
+    source: {
+        type: "category",
+        id: Constants.categories.all.id,
+    },
+    sourceLabel: "",
+    sourceWebsiteUrl: "",
+    entries: [],
+    hasMore: true,
+    loading: false,
+    scrollingToEntry: false,
+}
+
+export const entriesSlice = createSlice({
+    name: "entries",
+    initialState,
+    reducers: {
+        setSelectedEntry: (state, action: PayloadAction<Entry>) => {
+            state.selectedEntryId = action.payload.id
+        },
+        setEntryExpanded: (state, action: PayloadAction<{ entry: Entry; expanded: boolean }>) => {
+            state.entries
+                .filter(e => e.id === action.payload.entry.id)
+                .forEach(e => {
+                    e.expanded = action.payload.expanded
+                })
+        },
+        setScrollingToEntry: (state, action: PayloadAction<boolean>) => {
+            state.scrollingToEntry = action.payload
+        },
+        setSearch: (state, action: PayloadAction<string>) => {
+            state.search = action.payload
+        },
+    },
+    extraReducers: builder => {
+        builder.addCase(markEntry.pending, (state, action) => {
+            state.entries
+                .filter(e => e.id === action.meta.arg.entry.id)
+                .forEach(e => {
+                    e.read = action.meta.arg.read
+                })
+        })
+        builder.addCase(markMultipleEntries.pending, (state, action) => {
+            state.entries
+                .filter(e => action.meta.arg.entries.some(e2 => e2.id === e.id))
+                .forEach(e => {
+                    e.read = action.meta.arg.read
+                })
+        })
+        builder.addCase(markAllEntries.pending, (state, action) => {
+            state.entries
+                .filter(e => (action.meta.arg.req.olderThan ? e.date < action.meta.arg.req.olderThan : true))
+                .forEach(e => {
+                    e.read = true
+                })
+        })
+        builder.addCase(starEntry.pending, (state, action) => {
+            state.entries
+                .filter(e => action.meta.arg.entry.id === e.id && action.meta.arg.entry.feedId === e.feedId)
+                .forEach(e => {
+                    e.starred = action.meta.arg.starred
+                })
+        })
+        builder.addCase(loadEntries.pending, (state, action) => {
+            state.source = action.meta.arg.source
+            state.entries = []
+            state.timestamp = undefined
+            state.sourceLabel = ""
+            state.sourceWebsiteUrl = ""
+            state.hasMore = true
+            state.selectedEntryId = undefined
+            state.loading = true
+        })
+        builder.addCase(loadMoreEntries.pending, state => {
+            state.loading = true
+        })
+        builder.addCase(loadEntries.fulfilled, (state, action) => {
+            state.entries = action.payload.entries
+            state.timestamp = action.payload.timestamp
+            state.sourceLabel = action.payload.name
+            state.sourceWebsiteUrl = action.payload.feedLink
+            state.hasMore = action.payload.hasMore
+            state.loading = false
+        })
+        builder.addCase(loadMoreEntries.fulfilled, (state, action) => {
+            // remove already existing entries
+            const entriesToAdd = action.payload.entries.filter(e => !state.entries.some(e2 => e.id === e2.id))
+            state.entries = [...state.entries, ...entriesToAdd]
+            state.hasMore = action.payload.hasMore
+            state.loading = false
+        })
+        builder.addCase(tagEntry.pending, (state, action) => {
+            state.entries
+                .filter(e => +e.id === action.meta.arg.entryId)
+                .forEach(e => {
+                    e.tags = action.meta.arg.tags
+                })
+        })
+    },
+})
+
+export const { setSearch } = entriesSlice.actions

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

@@ -0,0 +1,241 @@
+import { createAppAsyncThunk } from "app/async-thunk"
+import { client } from "app/client"
+import { Constants } from "app/constants"
+import { entriesSlice, type EntrySource, type EntrySourceType, 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"
+
+const getEndpoint = (sourceType: EntrySourceType) =>
+    sourceType === "category" || sourceType === "tag" ? client.category.getEntries : client.feed.getEntries
+export const loadEntries = createAppAsyncThunk(
+    "entries/load",
+    async (
+        arg: {
+            source: EntrySource
+            clearSearch: boolean
+        },
+        thunkApi
+    ) => {
+        if (arg.clearSearch) thunkApi.dispatch(setSearch(""))
+
+        const state = thunkApi.getState()
+        const endpoint = getEndpoint(arg.source.type)
+        const result = await endpoint(buildGetEntriesPaginatedRequest(state, arg.source, 0))
+        return result.data
+    }
+)
+export const loadMoreEntries = createAppAsyncThunk("entries/loadMore", async (_, thunkApi) => {
+    const state = thunkApi.getState()
+    const { source } = state.entries
+    const offset =
+        state.user.settings?.readingMode === "all" ? state.entries.entries.length : state.entries.entries.filter(e => !e.read).length
+    const endpoint = getEndpoint(state.entries.source.type)
+    const result = await endpoint(buildGetEntriesPaginatedRequest(state, source, offset))
+    return result.data
+})
+const buildGetEntriesPaginatedRequest = (state: RootState, source: EntrySource, offset: number) => ({
+    id: source.type === "tag" ? Constants.categories.all.id : source.id,
+    order: state.user.settings?.readingOrder,
+    readType: state.user.settings?.readingMode,
+    offset,
+    limit: 50,
+    tag: source.type === "tag" ? source.id : undefined,
+    keywords: state.entries.search,
+})
+export const reloadEntries = createAppAsyncThunk("entries/reload", async (arg, thunkApi) => {
+    const state = thunkApi.getState()
+    thunkApi.dispatch(loadEntries({ source: state.entries.source, clearSearch: false }))
+})
+export const search = createAppAsyncThunk("entries/search", async (arg: string, thunkApi) => {
+    const state = thunkApi.getState()
+    thunkApi.dispatch(setSearch(arg))
+    thunkApi.dispatch(loadEntries({ source: state.entries.source, clearSearch: false }))
+})
+export const markEntry = createAppAsyncThunk(
+    "entries/entry/mark",
+    (arg: { entry: Entry; read: boolean }) => {
+        client.entry.mark({
+            id: arg.entry.id,
+            read: arg.read,
+        })
+    },
+    {
+        condition: arg => arg.entry.read !== arg.read,
+    }
+)
+export const markMultipleEntries = createAppAsyncThunk(
+    "entries/entry/markMultiple",
+    async (
+        arg: {
+            entries: Entry[]
+            read: boolean
+        },
+        thunkApi
+    ) => {
+        const requests: MarkRequest[] = arg.entries.map(e => ({
+            id: e.id,
+            read: arg.read,
+        }))
+        await client.entry.markMultiple({ requests })
+        thunkApi.dispatch(reloadTree())
+    }
+)
+export const markEntriesUpToEntry = createAppAsyncThunk("entries/entry/upToEntry", async (arg: Entry, thunkApi) => {
+    const state = thunkApi.getState()
+    const { entries } = state.entries
+
+    const index = entries.findIndex(e => e.id === arg.id)
+    if (index === -1) return
+
+    thunkApi.dispatch(
+        markMultipleEntries({
+            entries: entries.slice(0, index + 1),
+            read: true,
+        })
+    )
+})
+export const markAllEntries = createAppAsyncThunk(
+    "entries/entry/markAll",
+    async (
+        arg: {
+            sourceType: EntrySourceType
+            req: MarkRequest
+        },
+        thunkApi
+    ) => {
+        const endpoint = arg.sourceType === "category" ? client.category.markEntries : client.feed.markEntries
+        await endpoint(arg.req)
+        thunkApi.dispatch(reloadEntries())
+        thunkApi.dispatch(reloadTree())
+    }
+)
+export const starEntry = createAppAsyncThunk("entries/entry/star", (arg: { entry: Entry; starred: boolean }) => {
+    client.entry.star({
+        id: arg.entry.id,
+        feedId: +arg.entry.feedId,
+        starred: arg.starred,
+    })
+})
+export const selectEntry = createAppAsyncThunk(
+    "entries/entry/select",
+    (
+        arg: {
+            entry: Entry
+            expand: boolean
+            markAsRead: boolean
+            scrollToEntry: boolean
+        },
+        thunkApi
+    ) => {
+        const state = thunkApi.getState()
+        const entry = state.entries.entries.find(e => e.id === arg.entry.id)
+        if (!entry) return
+
+        // flushSync is required because we need the newly selected entry to be expanded
+        // and the previously selected entry to be collapsed to be able to scroll to the right position
+        flushSync(() => {
+            // mark as read if requested
+            if (arg.markAsRead) {
+                thunkApi.dispatch(markEntry({ entry, read: true }))
+            }
+
+            // set entry as selected
+            thunkApi.dispatch(entriesSlice.actions.setSelectedEntry(entry))
+
+            // expand if requested
+            const previouslySelectedEntry = state.entries.entries.find(e => e.id === state.entries.selectedEntryId)
+            if (previouslySelectedEntry) {
+                thunkApi.dispatch(
+                    entriesSlice.actions.setEntryExpanded({
+                        entry: previouslySelectedEntry,
+                        expanded: false,
+                    })
+                )
+            }
+            thunkApi.dispatch(entriesSlice.actions.setEntryExpanded({ entry, expanded: arg.expand }))
+        })
+
+        if (arg.scrollToEntry) {
+            const entryElement = document.getElementById(Constants.dom.entryId(entry))
+            if (entryElement) {
+                const scrollMode = state.user.settings?.scrollMode
+                const entryEntirelyVisible = Constants.layout.isTopVisible(entryElement) && Constants.layout.isBottomVisible(entryElement)
+                if (scrollMode === "always" || (scrollMode === "if_needed" && !entryEntirelyVisible)) {
+                    const scrollSpeed = state.user.settings?.scrollSpeed
+                    thunkApi.dispatch(entriesSlice.actions.setScrollingToEntry(true))
+                    scrollToEntry(entryElement, scrollSpeed, () => thunkApi.dispatch(entriesSlice.actions.setScrollingToEntry(false)))
+                }
+            }
+        }
+    }
+)
+const scrollToEntry = (entryElement: HTMLElement, scrollSpeed: number | undefined, onScrollEnded: () => void) => {
+    const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
+    const offset = (header?.bottom ?? 0) + 3
+    scrollToWithCallback({
+        options: {
+            top: entryElement.offsetTop - offset,
+            behavior: scrollSpeed && scrollSpeed > 0 ? "smooth" : "auto",
+        },
+        onScrollEnded,
+    })
+}
+
+export const selectPreviousEntry = createAppAsyncThunk(
+    "entries/entry/selectPrevious",
+    (
+        arg: {
+            expand: boolean
+            markAsRead: boolean
+            scrollToEntry: boolean
+        },
+        thunkApi
+    ) => {
+        const state = thunkApi.getState()
+        const { entries } = state.entries
+        const previousIndex = entries.findIndex(e => e.id === state.entries.selectedEntryId) - 1
+        if (previousIndex >= 0) {
+            thunkApi.dispatch(
+                selectEntry({
+                    entry: entries[previousIndex],
+                    expand: arg.expand,
+                    markAsRead: arg.markAsRead,
+                    scrollToEntry: arg.scrollToEntry,
+                })
+            )
+        }
+    }
+)
+export const selectNextEntry = createAppAsyncThunk(
+    "entries/entry/selectNext",
+    (
+        arg: {
+            expand: boolean
+            markAsRead: boolean
+            scrollToEntry: boolean
+        },
+        thunkApi
+    ) => {
+        const state = thunkApi.getState()
+        const { entries } = state.entries
+        const nextIndex = entries.findIndex(e => e.id === state.entries.selectedEntryId) + 1
+        if (nextIndex < entries.length) {
+            thunkApi.dispatch(
+                selectEntry({
+                    entry: entries[nextIndex],
+                    expand: arg.expand,
+                    markAsRead: arg.markAsRead,
+                    scrollToEntry: arg.scrollToEntry,
+                })
+            )
+        }
+    }
+)
+export const tagEntry = createAppAsyncThunk("entries/entry/tag", async (arg: TagRequest, thunkApi) => {
+    await client.entry.tag(arg)
+    thunkApi.dispatch(reloadTags())
+})

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

@@ -1,6 +1,6 @@
+import { redirectToCategory } from "app/redirect/thunks"
 import { store } from "app/store"
 import { describe, expect, it } from "vitest"
-import { redirectToCategory } from "./redirect"
 
 describe("redirects", () => {
     it("redirects to category", async () => {

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

@@ -0,0 +1,19 @@
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
+
+interface RedirectState {
+    to?: string
+}
+
+const initialState: RedirectState = {}
+
+export const redirectSlice = createSlice({
+    name: "redirect",
+    initialState,
+    reducers: {
+        redirectTo: (state, action: PayloadAction<string | undefined>) => {
+            state.to = action.payload
+        },
+    },
+})
+
+export const { redirectTo } = redirectSlice.actions

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

@@ -0,0 +1,45 @@
+import { createAppAsyncThunk } from "app/async-thunk"
+import { Constants } from "app/constants"
+import { redirectTo } from "app/redirect/slice"
+
+export const redirectToLogin = createAppAsyncThunk("redirect/login", (_, thunkApi) => thunkApi.dispatch(redirectTo("/login")))
+export const redirectToRegistration = createAppAsyncThunk("redirect/register", (_, thunkApi) => thunkApi.dispatch(redirectTo("/register")))
+export const redirectToPasswordRecovery = createAppAsyncThunk("redirect/passwordRecovery", (_, thunkApi) =>
+    thunkApi.dispatch(redirectTo("/passwordRecovery"))
+)
+export const redirectToApiDocumentation = createAppAsyncThunk("redirect/api", (_, thunkApi) => thunkApi.dispatch(redirectTo("/api")))
+
+export const redirectToSelectedSource = createAppAsyncThunk("redirect/selectedSource", (_, thunkApi) => {
+    const { source } = thunkApi.getState().entries
+    thunkApi.dispatch(redirectTo(`/app/${source.type}/${source.id}`))
+})
+export const redirectToCategory = createAppAsyncThunk("redirect/category", (id: string, thunkApi) =>
+    thunkApi.dispatch(redirectTo(`/app/category/${id}`))
+)
+export const redirectToRootCategory = createAppAsyncThunk(
+    "redirect/category/root",
+    async (_, thunkApi) => await thunkApi.dispatch(redirectToCategory(Constants.categories.all.id))
+)
+export const redirectToCategoryDetails = createAppAsyncThunk("redirect/category/details", (id: string, thunkApi) =>
+    thunkApi.dispatch(redirectTo(`/app/category/${id}/details`))
+)
+export const redirectToFeed = createAppAsyncThunk("redirect/feed", (id: string | number, thunkApi) =>
+    thunkApi.dispatch(redirectTo(`/app/feed/${id}`))
+)
+export const redirectToFeedDetails = createAppAsyncThunk("redirect/feed/details", (id: string, thunkApi) =>
+    thunkApi.dispatch(redirectTo(`/app/feed/${id}/details`))
+)
+export const redirectToTag = createAppAsyncThunk("redirect/tag", (id: string, thunkApi) => thunkApi.dispatch(redirectTo(`/app/tag/${id}`)))
+export const redirectToTagDetails = createAppAsyncThunk("redirect/tag/details", (id: string, thunkApi) =>
+    thunkApi.dispatch(redirectTo(`/app/tag/${id}/details`))
+)
+export const redirectToAdd = createAppAsyncThunk("redirect/add", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/add")))
+export const redirectToSettings = createAppAsyncThunk("redirect/settings", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/settings")))
+export const redirectToAdminUsers = createAppAsyncThunk("redirect/admin/users", (_, thunkApi) =>
+    thunkApi.dispatch(redirectTo("/app/admin/users"))
+)
+export const redirectToMetrics = createAppAsyncThunk("redirect/admin/metrics", (_, thunkApi) =>
+    thunkApi.dispatch(redirectTo("/app/admin/metrics"))
+)
+export const redirectToDonate = createAppAsyncThunk("redirect/donate", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/donate")))
+export const redirectToAbout = createAppAsyncThunk("redirect/about", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/about")))

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

@@ -0,0 +1,29 @@
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
+import { reloadServerInfos } from "app/server/thunks"
+import { type ServerInfo } from "app/types"
+
+interface ServerState {
+    serverInfos?: ServerInfo
+    webSocketConnected: boolean
+}
+
+const initialState: ServerState = {
+    webSocketConnected: false,
+}
+
+export const serverSlice = createSlice({
+    name: "server",
+    initialState,
+    reducers: {
+        setWebSocketConnected: (state, action: PayloadAction<boolean>) => {
+            state.webSocketConnected = action.payload
+        },
+    },
+    extraReducers: builder => {
+        builder.addCase(reloadServerInfos.fulfilled, (state, action) => {
+            state.serverInfos = action.payload
+        })
+    },
+})
+
+export const { setWebSocketConnected } = serverSlice.actions

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

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

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

@@ -1,339 +0,0 @@
-import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"
-import { client } from "app/client"
-import { Constants } from "app/constants"
-import { RootState } from "app/store"
-import { Entries, Entry, MarkRequest, TagRequest } from "app/types"
-import { scrollToWithCallback } from "app/utils"
-import { flushSync } from "react-dom"
-// eslint-disable-next-line import/no-cycle
-import { reloadTree } from "./tree"
-// eslint-disable-next-line import/no-cycle
-import { reloadTags } from "./user"
-
-export type EntrySourceType = "category" | "feed" | "tag"
-export type EntrySource = { type: EntrySourceType; id: string }
-export type ExpendableEntry = Entry & { expanded?: boolean }
-
-interface EntriesState {
-    /** selected source */
-    source: EntrySource
-    sourceLabel: string
-    sourceWebsiteUrl: string
-    entries: ExpendableEntry[]
-    /** stores when the first batch of entries were retrieved
-     *
-     * this is used when marking all entries of a feed/category to only mark entries up to that timestamp as newer entries were potentially never shown
-     */
-    timestamp?: number
-    selectedEntryId?: string
-    hasMore: boolean
-    search?: string
-    scrollingToEntry: boolean
-}
-
-const initialState: EntriesState = {
-    source: {
-        type: "category",
-        id: Constants.categories.all.id,
-    },
-    sourceLabel: "",
-    sourceWebsiteUrl: "",
-    entries: [],
-    hasMore: true,
-    scrollingToEntry: false,
-}
-
-const getEndpoint = (sourceType: EntrySourceType) =>
-    sourceType === "category" || sourceType === "tag" ? client.category.getEntries : client.feed.getEntries
-export const loadEntries = createAsyncThunk<Entries, { source: EntrySource; clearSearch: boolean }, { state: RootState }>(
-    "entries/load",
-    async (arg, thunkApi) => {
-        if (arg.clearSearch) thunkApi.dispatch(setSearch(""))
-
-        const state = thunkApi.getState()
-        const endpoint = getEndpoint(arg.source.type)
-        const result = await endpoint(buildGetEntriesPaginatedRequest(state, arg.source, 0))
-        return result.data
-    }
-)
-export const loadMoreEntries = createAsyncThunk<Entries, void, { state: RootState }>("entries/loadMore", async (_, thunkApi) => {
-    const state = thunkApi.getState()
-    const { source } = state.entries
-    const offset =
-        state.user.settings?.readingMode === "all" ? state.entries.entries.length : state.entries.entries.filter(e => !e.read).length
-    const endpoint = getEndpoint(state.entries.source.type)
-    const result = await endpoint(buildGetEntriesPaginatedRequest(state, source, offset))
-    return result.data
-})
-const buildGetEntriesPaginatedRequest = (state: RootState, source: EntrySource, offset: number) => ({
-    id: source.type === "tag" ? Constants.categories.all.id : source.id,
-    order: state.user.settings?.readingOrder,
-    readType: state.user.settings?.readingMode,
-    offset,
-    limit: 50,
-    tag: source.type === "tag" ? source.id : undefined,
-    keywords: state.entries.search,
-})
-export const reloadEntries = createAsyncThunk<void, void, { state: RootState }>("entries/reload", async (arg, thunkApi) => {
-    const state = thunkApi.getState()
-    thunkApi.dispatch(loadEntries({ source: state.entries.source, clearSearch: false }))
-})
-export const search = createAsyncThunk<void, string, { state: RootState }>("entries/search", async (arg, thunkApi) => {
-    const state = thunkApi.getState()
-    thunkApi.dispatch(setSearch(arg))
-    thunkApi.dispatch(loadEntries({ source: state.entries.source, clearSearch: false }))
-})
-export const markEntry = createAsyncThunk(
-    "entries/entry/mark",
-    (arg: { entry: Entry; read: boolean }) => {
-        client.entry.mark({
-            id: arg.entry.id,
-            read: arg.read,
-        })
-    },
-    {
-        condition: arg => arg.entry.read !== arg.read,
-    }
-)
-export const markMultipleEntries = createAsyncThunk(
-    "entries/entry/markMultiple",
-    async (arg: { entries: Entry[]; read: boolean }, thunkApi) => {
-        const requests: MarkRequest[] = arg.entries.map(e => ({
-            id: e.id,
-            read: arg.read,
-        }))
-        await client.entry.markMultiple({ requests })
-        thunkApi.dispatch(reloadTree())
-    }
-)
-export const markEntriesUpToEntry = createAsyncThunk<void, Entry, { state: RootState }>(
-    "entries/entry/upToEntry",
-    async (arg, thunkApi) => {
-        const state = thunkApi.getState()
-        const { entries } = state.entries
-
-        const index = entries.findIndex(e => e.id === arg.id)
-        if (index === -1) return
-
-        thunkApi.dispatch(
-            markMultipleEntries({
-                entries: entries.slice(0, index + 1),
-                read: true,
-            })
-        )
-    }
-)
-export const markAllEntries = createAsyncThunk<void, { sourceType: EntrySourceType; req: MarkRequest }, { state: RootState }>(
-    "entries/entry/markAll",
-    async (arg, thunkApi) => {
-        const endpoint = arg.sourceType === "category" ? client.category.markEntries : client.feed.markEntries
-        await endpoint(arg.req)
-        thunkApi.dispatch(reloadEntries())
-        thunkApi.dispatch(reloadTree())
-    }
-)
-export const starEntry = createAsyncThunk("entries/entry/star", (arg: { entry: Entry; starred: boolean }) => {
-    client.entry.star({
-        id: arg.entry.id,
-        feedId: +arg.entry.feedId,
-        starred: arg.starred,
-    })
-})
-export const selectEntry = createAsyncThunk<
-    void,
-    {
-        entry: Entry
-        expand: boolean
-        markAsRead: boolean
-        scrollToEntry: boolean
-    },
-    { state: RootState }
->("entries/entry/select", (arg, thunkApi) => {
-    const state = thunkApi.getState()
-    const entry = state.entries.entries.find(e => e.id === arg.entry.id)
-    if (!entry) return
-
-    // flushSync is required because we need the newly selected entry to be expanded
-    // and the previously selected entry to be collapsed to be able to scroll to the right position
-    flushSync(() => {
-        // mark as read if requested
-        if (arg.markAsRead) {
-            thunkApi.dispatch(markEntry({ entry, read: true }))
-        }
-
-        // set entry as selected
-        thunkApi.dispatch(entriesSlice.actions.setSelectedEntry(entry))
-
-        // expand if requested
-        const previouslySelectedEntry = state.entries.entries.find(e => e.id === state.entries.selectedEntryId)
-        if (previouslySelectedEntry) {
-            thunkApi.dispatch(entriesSlice.actions.setEntryExpanded({ entry: previouslySelectedEntry, expanded: false }))
-        }
-        thunkApi.dispatch(entriesSlice.actions.setEntryExpanded({ entry, expanded: arg.expand }))
-    })
-
-    if (arg.scrollToEntry) {
-        const entryElement = document.getElementById(Constants.dom.entryId(entry))
-        if (entryElement) {
-            const scrollSpeed = state.user.settings?.scrollSpeed
-            thunkApi.dispatch(entriesSlice.actions.setScrollingToEntry(true))
-            scrollToEntry(entryElement, scrollSpeed, () => thunkApi.dispatch(entriesSlice.actions.setScrollingToEntry(false)))
-        }
-    }
-})
-const scrollToEntry = (entryElement: HTMLElement, scrollSpeed: number | undefined, onScrollEnded: () => void) => {
-    // the entry is entirely visible, no need to scroll
-    if (Constants.layout.isTopVisible(entryElement) && Constants.layout.isBottomVisible(entryElement)) {
-        onScrollEnded()
-        return
-    }
-
-    const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
-    if (scrollArea) {
-        scrollToWithCallback({
-            element: scrollArea,
-            options: {
-                // add a small gap between the top of the content and the top of the page
-                top: entryElement.offsetTop - 3,
-                behavior: scrollSpeed && scrollSpeed > 0 ? "smooth" : "auto",
-            },
-            onScrollEnded,
-        })
-    }
-}
-
-export const selectPreviousEntry = createAsyncThunk<
-    void,
-    {
-        expand: boolean
-        markAsRead: boolean
-        scrollToEntry: boolean
-    },
-    { state: RootState }
->("entries/entry/selectPrevious", (arg, thunkApi) => {
-    const state = thunkApi.getState()
-    const { entries } = state.entries
-    const previousIndex = entries.findIndex(e => e.id === state.entries.selectedEntryId) - 1
-    if (previousIndex >= 0) {
-        thunkApi.dispatch(
-            selectEntry({
-                entry: entries[previousIndex],
-                expand: arg.expand,
-                markAsRead: arg.markAsRead,
-                scrollToEntry: arg.scrollToEntry,
-            })
-        )
-    }
-})
-export const selectNextEntry = createAsyncThunk<
-    void,
-    {
-        expand: boolean
-        markAsRead: boolean
-        scrollToEntry: boolean
-    },
-    { state: RootState }
->("entries/entry/selectNext", (arg, thunkApi) => {
-    const state = thunkApi.getState()
-    const { entries } = state.entries
-    const nextIndex = entries.findIndex(e => e.id === state.entries.selectedEntryId) + 1
-    if (nextIndex < entries.length) {
-        thunkApi.dispatch(
-            selectEntry({
-                entry: entries[nextIndex],
-                expand: arg.expand,
-                markAsRead: arg.markAsRead,
-                scrollToEntry: arg.scrollToEntry,
-            })
-        )
-    }
-})
-export const tagEntry = createAsyncThunk<void, TagRequest, { state: RootState }>("entries/entry/tag", async (arg, thunkApi) => {
-    await client.entry.tag(arg)
-    thunkApi.dispatch(reloadTags())
-})
-
-export const entriesSlice = createSlice({
-    name: "entries",
-    initialState,
-    reducers: {
-        setSelectedEntry: (state, action: PayloadAction<Entry>) => {
-            state.selectedEntryId = action.payload.id
-        },
-        setEntryExpanded: (state, action: PayloadAction<{ entry: Entry; expanded: boolean }>) => {
-            state.entries
-                .filter(e => e.id === action.payload.entry.id)
-                .forEach(e => {
-                    e.expanded = action.payload.expanded
-                })
-        },
-        setScrollingToEntry: (state, action: PayloadAction<boolean>) => {
-            state.scrollingToEntry = action.payload
-        },
-        setSearch: (state, action: PayloadAction<string>) => {
-            state.search = action.payload
-        },
-    },
-    extraReducers: builder => {
-        builder.addCase(markEntry.pending, (state, action) => {
-            state.entries
-                .filter(e => e.id === action.meta.arg.entry.id)
-                .forEach(e => {
-                    e.read = action.meta.arg.read
-                })
-        })
-        builder.addCase(markMultipleEntries.pending, (state, action) => {
-            state.entries
-                .filter(e => action.meta.arg.entries.some(e2 => e2.id === e.id))
-                .forEach(e => {
-                    e.read = action.meta.arg.read
-                })
-        })
-        builder.addCase(markAllEntries.pending, (state, action) => {
-            state.entries
-                .filter(e => (action.meta.arg.req.olderThan ? e.date < action.meta.arg.req.olderThan : true))
-                .forEach(e => {
-                    e.read = true
-                })
-        })
-        builder.addCase(starEntry.pending, (state, action) => {
-            state.entries
-                .filter(e => action.meta.arg.entry.id === e.id && action.meta.arg.entry.feedId === e.feedId)
-                .forEach(e => {
-                    e.starred = action.meta.arg.starred
-                })
-        })
-        builder.addCase(loadEntries.pending, (state, action) => {
-            state.source = action.meta.arg.source
-            state.entries = []
-            state.timestamp = undefined
-            state.sourceLabel = ""
-            state.sourceWebsiteUrl = ""
-            state.hasMore = true
-            state.selectedEntryId = undefined
-        })
-        builder.addCase(loadEntries.fulfilled, (state, action) => {
-            state.entries = action.payload.entries
-            state.timestamp = action.payload.timestamp
-            state.sourceLabel = action.payload.name
-            state.sourceWebsiteUrl = action.payload.feedLink
-            state.hasMore = action.payload.hasMore
-        })
-        builder.addCase(loadMoreEntries.fulfilled, (state, action) => {
-            // remove already existing entries
-            const entriesToAdd = action.payload.entries.filter(e => !state.entries.some(e2 => e.id === e2.id))
-            state.entries = [...state.entries, ...entriesToAdd]
-            state.hasMore = action.payload.hasMore
-        })
-        builder.addCase(tagEntry.pending, (state, action) => {
-            state.entries
-                .filter(e => +e.id === action.meta.arg.entryId)
-                .forEach(e => {
-                    e.tags = action.meta.arg.tags
-                })
-        })
-    },
-})
-
-export const { setSearch } = entriesSlice.actions
-export default entriesSlice.reducer

commafeed-client/src/app/slices/redirect.ts

@@ -1,61 +0,0 @@
-import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"
-import { Constants } from "app/constants"
-import { RootState } from "app/store"
-
-interface RedirectState {
-    to?: string
-}
-
-const initialState: RedirectState = {}
-
-export const redirectToLogin = createAsyncThunk("redirect/login", (_, thunkApi) => thunkApi.dispatch(redirectTo("/login")))
-export const redirectToRegistration = createAsyncThunk("redirect/register", (_, thunkApi) => thunkApi.dispatch(redirectTo("/register")))
-export const redirectToPasswordRecovery = createAsyncThunk("redirect/passwordRecovery", (_, thunkApi) =>
-    thunkApi.dispatch(redirectTo("/passwordRecovery"))
-)
-export const redirectToSelectedSource = createAsyncThunk<void, void, { state: RootState }>("redirect/selectedSource", (_, thunkApi) => {
-    const { source } = thunkApi.getState().entries
-    thunkApi.dispatch(redirectTo(`/app/${source.type}/${source.id}`))
-})
-export const redirectToCategory = createAsyncThunk("redirect/category", (id: string, thunkApi) =>
-    thunkApi.dispatch(redirectTo(`/app/category/${id}`))
-)
-export const redirectToRootCategory = createAsyncThunk("redirect/category/root", (_, thunkApi) =>
-    thunkApi.dispatch(redirectToCategory(Constants.categories.all.id))
-)
-export const redirectToCategoryDetails = createAsyncThunk("redirect/category/details", (id: string, thunkApi) =>
-    thunkApi.dispatch(redirectTo(`/app/category/${id}/details`))
-)
-export const redirectToFeed = createAsyncThunk("redirect/feed", (id: string | number, thunkApi) =>
-    thunkApi.dispatch(redirectTo(`/app/feed/${id}`))
-)
-export const redirectToFeedDetails = createAsyncThunk("redirect/feed/details", (id: string, thunkApi) =>
-    thunkApi.dispatch(redirectTo(`/app/feed/${id}/details`))
-)
-export const redirectToTag = createAsyncThunk("redirect/tag", (id: string, thunkApi) => thunkApi.dispatch(redirectTo(`/app/tag/${id}`)))
-export const redirectToTagDetails = createAsyncThunk("redirect/tag/details", (id: string, thunkApi) =>
-    thunkApi.dispatch(redirectTo(`/app/tag/${id}/details`))
-)
-export const redirectToAdd = createAsyncThunk("redirect/add", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/add")))
-export const redirectToSettings = createAsyncThunk("redirect/settings", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/settings")))
-export const redirectToAdminUsers = createAsyncThunk("redirect/admin/users", (_, thunkApi) =>
-    thunkApi.dispatch(redirectTo("/app/admin/users"))
-)
-export const redirectToMetrics = createAsyncThunk("redirect/admin/metrics", (_, thunkApi) =>
-    thunkApi.dispatch(redirectTo("/app/admin/metrics"))
-)
-export const redirectToAbout = createAsyncThunk("redirect/about", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/about")))
-export const redirectToApiDocumentation = createAsyncThunk("redirect/api", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/api")))
-
-export const redirectSlice = createSlice({
-    name: "redirect",
-    initialState,
-    reducers: {
-        redirectTo: (state, action: PayloadAction<string | undefined>) => {
-            state.to = action.payload
-        },
-    },
-})
-
-export const { redirectTo } = redirectSlice.actions
-export default redirectSlice.reducer

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

@@ -1,23 +0,0 @@
-import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"
-import { client } from "app/client"
-import { ServerInfo } from "app/types"
-
-interface ServerState {
-    serverInfos?: ServerInfo
-}
-
-const initialState: ServerState = {}
-
-export const reloadServerInfos = createAsyncThunk("server/infos", () => client.server.getServerInfos().then(r => r.data))
-export const serverSlice = createSlice({
-    name: "server",
-    initialState,
-    reducers: {},
-    extraReducers: builder => {
-        builder.addCase(reloadServerInfos.fulfilled, (state, action) => {
-            state.serverInfos = action.payload
-        })
-    },
-})
-
-export default serverSlice.reducer

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

@@ -1,161 +0,0 @@
-import { t } from "@lingui/macro"
-import { showNotification } from "@mantine/notifications"
-import { createAsyncThunk, createSlice, isAnyOf } from "@reduxjs/toolkit"
-import { client } from "app/client"
-import { RootState } from "app/store"
-import { ReadingMode, ReadingOrder, Settings, SharingSettings, UserModel } from "app/types"
-// eslint-disable-next-line import/no-cycle
-import { reloadEntries } from "./entries"
-
-interface UserState {
-    settings?: Settings
-    profile?: UserModel
-    tags?: string[]
-}
-
-const initialState: UserState = {}
-
-export const reloadSettings = createAsyncThunk("settings/reload", () => client.user.getSettings().then(r => r.data))
-export const reloadProfile = createAsyncThunk("profile/reload", () => client.user.getProfile().then(r => r.data))
-export const reloadTags = createAsyncThunk("entries/tags", () => client.entry.getTags().then(r => r.data))
-export const changeReadingMode = createAsyncThunk<void, ReadingMode, { state: RootState }>(
-    "settings/readingMode",
-    (readingMode, thunkApi) => {
-        const { settings } = thunkApi.getState().user
-        if (!settings) return
-        client.user.saveSettings({ ...settings, readingMode })
-        thunkApi.dispatch(reloadEntries())
-    }
-)
-export const changeReadingOrder = createAsyncThunk<void, ReadingOrder, { state: RootState }>(
-    "settings/readingOrder",
-    (readingOrder, thunkApi) => {
-        const { settings } = thunkApi.getState().user
-        if (!settings) return
-        client.user.saveSettings({ ...settings, readingOrder })
-        thunkApi.dispatch(reloadEntries())
-    }
-)
-export const changeLanguage = createAsyncThunk<
-    void,
-    string,
-    {
-        state: RootState
-    }
->("settings/language", (language, thunkApi) => {
-    const { settings } = thunkApi.getState().user
-    if (!settings) return
-    client.user.saveSettings({ ...settings, language })
-})
-export const changeScrollSpeed = createAsyncThunk<
-    void,
-    boolean,
-    {
-        state: RootState
-    }
->("settings/scrollSpeed", (speed, thunkApi) => {
-    const { settings } = thunkApi.getState().user
-    if (!settings) return
-    client.user.saveSettings({ ...settings, scrollSpeed: speed ? 400 : 0 })
-})
-export const changeShowRead = createAsyncThunk<
-    void,
-    boolean,
-    {
-        state: RootState
-    }
->("settings/showRead", (showRead, thunkApi) => {
-    const { settings } = thunkApi.getState().user
-    if (!settings) return
-    client.user.saveSettings({ ...settings, showRead })
-})
-export const changeScrollMarks = createAsyncThunk<
-    void,
-    boolean,
-    {
-        state: RootState
-    }
->("settings/scrollMarks", (scrollMarks, thunkApi) => {
-    const { settings } = thunkApi.getState().user
-    if (!settings) return
-    client.user.saveSettings({ ...settings, scrollMarks })
-})
-export const changeSharingSetting = createAsyncThunk<
-    void,
-    { site: keyof SharingSettings; value: boolean },
-    {
-        state: RootState
-    }
->("settings/sharingSetting", (sharingSetting, thunkApi) => {
-    const { settings } = thunkApi.getState().user
-    if (!settings) return
-    client.user.saveSettings({
-        ...settings,
-        sharingSettings: {
-            ...settings.sharingSettings,
-            [sharingSetting.site]: sharingSetting.value,
-        },
-    })
-})
-
-export const userSlice = createSlice({
-    name: "user",
-    initialState,
-    reducers: {},
-    extraReducers: builder => {
-        builder.addCase(reloadSettings.fulfilled, (state, action) => {
-            state.settings = action.payload
-        })
-        builder.addCase(reloadProfile.fulfilled, (state, action) => {
-            state.profile = action.payload
-        })
-        builder.addCase(reloadTags.fulfilled, (state, action) => {
-            state.tags = action.payload
-        })
-        builder.addCase(changeReadingMode.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.readingMode = action.meta.arg
-        })
-        builder.addCase(changeReadingOrder.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.readingOrder = action.meta.arg
-        })
-        builder.addCase(changeLanguage.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.language = action.meta.arg
-        })
-        builder.addCase(changeScrollSpeed.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.scrollSpeed = action.meta.arg ? 400 : 0
-        })
-        builder.addCase(changeShowRead.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.showRead = action.meta.arg
-        })
-        builder.addCase(changeScrollMarks.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.scrollMarks = action.meta.arg
-        })
-        builder.addCase(changeSharingSetting.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.sharingSettings[action.meta.arg.site] = action.meta.arg.value
-        })
-        builder.addMatcher(
-            isAnyOf(
-                changeLanguage.fulfilled,
-                changeScrollSpeed.fulfilled,
-                changeShowRead.fulfilled,
-                changeScrollMarks.fulfilled,
-                changeSharingSetting.fulfilled
-            ),
-            () => {
-                showNotification({
-                    message: t`Settings saved.`,
-                    color: "green",
-                })
-            }
-        )
-    },
-})
-
-export default userSlice.reducer

commafeed-client/src/app/store.ts

@@ -1,24 +1,21 @@
 import { configureStore } from "@reduxjs/toolkit"
-import { setupListeners } from "@reduxjs/toolkit/query"
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
-import entriesReducer from "./slices/entries"
-import redirectReducer from "./slices/redirect"
-import serverReducer from "./slices/server"
-import treeReducer from "./slices/tree"
-import userReducer from "./slices/user"
+import { entriesSlice } from "app/entries/slice"
+import { redirectSlice } from "app/redirect/slice"
+import { serverSlice } from "app/server/slice"
+import { treeSlice } from "app/tree/slice"
+import { userSlice } from "app/user/slice"
+import { type TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
 
 export const reducers = {
-    entries: entriesReducer,
-    redirect: redirectReducer,
-    tree: treeReducer,
-    server: serverReducer,
-    user: userReducer,
+    entries: entriesSlice.reducer,
+    redirect: redirectSlice.reducer,
+    tree: treeSlice.reducer,
+    server: serverSlice.reducer,
+    user: userSlice.reducer,
 }
 
 export const store = configureStore({ reducer: reducers })
 
-setupListeners(store.dispatch)
-
 export type RootState = ReturnType<typeof store.getState>
 export type AppDispatch = typeof store.dispatch
 

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

@@ -1,25 +1,21 @@
-import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"
-import { client } from "app/client"
-import { Category, CollapseRequest } from "app/types"
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit"
+import { markEntry } from "app/entries/thunks"
+import { redirectTo } from "app/redirect/slice"
+import { collapseTreeCategory, reloadTree } from "app/tree/thunks"
+import { type Category } from "app/types"
 import { visitCategoryTree } from "app/utils"
-// eslint-disable-next-line import/no-cycle
-import { markEntry } from "./entries"
-import { redirectTo } from "./redirect"
 
 interface TreeState {
     rootCategory?: Category
     mobileMenuOpen: boolean
+    sidebarVisible: boolean
 }
 
 const initialState: TreeState = {
     mobileMenuOpen: false,
+    sidebarVisible: true,
 }
 
-export const reloadTree = createAsyncThunk("tree/reload", () => client.category.getRoot().then(r => r.data))
-export const collapseTreeCategory = createAsyncThunk("tree/category/collapse", async (req: CollapseRequest) =>
-    client.category.collapse(req)
-)
-
 export const treeSlice = createSlice({
     name: "tree",
     initialState,
@@ -27,6 +23,25 @@ export const treeSlice = createSlice({
         setMobileMenuOpen: (state, action: PayloadAction<boolean>) => {
             state.mobileMenuOpen = action.payload
         },
+        toggleSidebar: state => {
+            state.sidebarVisible = !state.sidebarVisible
+        },
+        incrementUnreadCount: (
+            state,
+            action: PayloadAction<{
+                feedId: number
+                amount: number
+            }>
+        ) => {
+            if (!state.rootCategory) return
+            visitCategoryTree(state.rootCategory, c =>
+                c.feeds
+                    .filter(f => f.id === action.payload.feedId)
+                    .forEach(f => {
+                        f.unread += action.payload.amount
+                    })
+            )
+        },
     },
     extraReducers: builder => {
         builder.addCase(reloadTree.fulfilled, (state, action) => {
@@ -54,5 +69,4 @@ export const treeSlice = createSlice({
     },
 })
 
-export const { setMobileMenuOpen } = treeSlice.actions
-export default treeSlice.reducer
+export const { setMobileMenuOpen, toggleSidebar, incrementUnreadCount } = treeSlice.actions

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

@@ -0,0 +1,9 @@
+import { createAppAsyncThunk } from "app/async-thunk"
+import { client } from "app/client"
+import type { CollapseRequest } from "app/types"
+
+export const reloadTree = createAppAsyncThunk("tree/reload", async () => await client.category.getRoot().then(r => r.data))
+export const collapseTreeCategory = createAppAsyncThunk(
+    "tree/category/collapse",
+    async (req: CollapseRequest) => await client.category.collapse(req)
+)

commafeed-client/src/app/types.ts

@@ -3,38 +3,6 @@ export interface AddCategoryRequest {
     parentId?: string
 }
 
-export interface ApplicationSettings {
-    publicUrl: string
-    allowRegistrations: boolean
-    createDemoAccount: boolean
-    googleAnalyticsTrackingCode?: string
-    googleAuthKey?: string
-    backgroundThreads: number
-    databaseUpdateThreads: number
-    smtpHost?: string
-    smtpPort?: number
-    smtpTls?: boolean
-    smtpUserName?: string
-    smtpPassword?: string
-    smtpFromAddress?: string
-    graphiteEnabled?: boolean
-    graphitePrefix?: string
-    graphiteHost?: string
-    graphitePort?: number
-    graphiteInterval?: number
-    heavyLoad: boolean
-    pubsubhubbub: boolean
-    imageProxyEnabled: boolean
-    queryTimeout: number
-    keepStatusDays: number
-    maxFeedCapacity: number
-    refreshIntervalMinutes: number
-    cache: ApplicationSettingsCache
-    announcement?: string
-    userAgent?: string
-    unreadThreshold?: Date
-}
-
 export interface Category {
     id: string
     parentId?: string
@@ -145,6 +113,7 @@ export interface MarkRequest {
     id: string
     read: boolean
     olderThan?: number
+    insertedBefore?: number
     keywords?: string
     excludedSubscriptions?: number[]
 }
@@ -166,7 +135,7 @@ export interface MetricMeter {
     units: string
 }
 
-export type MetricTimer = {
+export interface MetricTimer {
     count: number
     max: number
     mean: number
@@ -187,10 +156,10 @@ export type MetricTimer = {
 }
 
 export interface Metrics {
-    counters: { [key: string]: MetricCounter }
-    gauges: { [key: string]: MetricGauge }
-    meters: { [key: string]: MetricMeter }
-    timers: { [key: string]: MetricTimer }
+    counters: Record<string, MetricCounter>
+    gauges: Record<string, MetricGauge>
+    meters: Record<string, MetricMeter>
+    timers: Record<string, MetricTimer>
 }
 
 export interface MultipleMarkRequest {
@@ -222,6 +191,9 @@ export interface ServerInfo {
     googleAnalyticsCode?: string
     smtpEnabled: boolean
     demoAccountEnabled: boolean
+    websocketEnabled: boolean
+    websocketPingInterval: number
+    treeReloadInterval: number
 }
 
 export interface Settings {
@@ -233,6 +205,10 @@ export interface Settings {
     customCss?: string
     customJs?: string
     scrollSpeed: number
+    scrollMode: ScrollMode
+    markAllAsReadConfirmation: boolean
+    customContextMenu: boolean
+    mobileFooter: boolean
     sharingSettings: SharingSettings
 }
 
@@ -271,7 +247,7 @@ export interface Subscription {
     iconUrl: string
     unread: number
     categoryId?: string
-    position?: number
+    position: number
     newestItemTime?: number
     filter?: string
 }
@@ -299,10 +275,19 @@ export interface UserModel {
     admin: boolean
 }
 
-export type ApplicationSettingsCache = "NOOP" | "REDIS"
+export interface AdminSaveUserRequest {
+    id?: number
+    name: string
+    email?: string
+    password?: string
+    enabled: boolean
+    admin: boolean
+}
 
 export type ReadingMode = "all" | "unread"
 
 export type ReadingOrder = "asc" | "desc"
 
 export type ViewMode = "title" | "cozy" | "detailed" | "expanded"
+
+export type ScrollMode = "always" | "never" | "if_needed"

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

@@ -0,0 +1,108 @@
+import { t } from "@lingui/macro"
+import { showNotification } from "@mantine/notifications"
+import { createSlice, isAnyOf } from "@reduxjs/toolkit"
+import { type Settings, type UserModel } from "app/types"
+import {
+    changeCustomContextMenu,
+    changeLanguage,
+    changeMarkAllAsReadConfirmation,
+    changeMobileFooter,
+    changeReadingMode,
+    changeReadingOrder,
+    changeScrollMarks,
+    changeScrollMode,
+    changeScrollSpeed,
+    changeSharingSetting,
+    changeShowRead,
+    reloadProfile,
+    reloadSettings,
+    reloadTags,
+} from "./thunks"
+
+interface UserState {
+    settings?: Settings
+    profile?: UserModel
+    tags?: string[]
+}
+
+const initialState: UserState = {}
+
+export const userSlice = createSlice({
+    name: "user",
+    initialState,
+    reducers: {},
+    extraReducers: builder => {
+        builder.addCase(reloadSettings.fulfilled, (state, action) => {
+            state.settings = action.payload
+        })
+        builder.addCase(reloadProfile.fulfilled, (state, action) => {
+            state.profile = action.payload
+        })
+        builder.addCase(reloadTags.fulfilled, (state, action) => {
+            state.tags = action.payload
+        })
+        builder.addCase(changeReadingMode.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.readingMode = action.meta.arg
+        })
+        builder.addCase(changeReadingOrder.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.readingOrder = action.meta.arg
+        })
+        builder.addCase(changeLanguage.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.language = action.meta.arg
+        })
+        builder.addCase(changeScrollSpeed.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.scrollSpeed = action.meta.arg ? 400 : 0
+        })
+        builder.addCase(changeShowRead.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.showRead = action.meta.arg
+        })
+        builder.addCase(changeScrollMarks.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.scrollMarks = action.meta.arg
+        })
+        builder.addCase(changeScrollMode.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.scrollMode = action.meta.arg
+        })
+        builder.addCase(changeMarkAllAsReadConfirmation.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.markAllAsReadConfirmation = action.meta.arg
+        })
+        builder.addCase(changeCustomContextMenu.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.customContextMenu = action.meta.arg
+        })
+        builder.addCase(changeMobileFooter.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.mobileFooter = action.meta.arg
+        })
+        builder.addCase(changeSharingSetting.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.sharingSettings[action.meta.arg.site] = action.meta.arg.value
+        })
+        builder.addMatcher(
+            isAnyOf(
+                changeLanguage.fulfilled,
+                changeScrollSpeed.fulfilled,
+                changeShowRead.fulfilled,
+                changeScrollMarks.fulfilled,
+                changeScrollMode.fulfilled,
+                changeMarkAllAsReadConfirmation.fulfilled,
+                changeCustomContextMenu.fulfilled,
+                changeMobileFooter.fulfilled,
+                changeSharingSetting.fulfilled
+            ),
+            () => {
+                showNotification({
+                    message: t`Settings saved.`,
+                    color: "green",
+                })
+            }
+        )
+    },
+})

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

@@ -0,0 +1,83 @@
+import { createAppAsyncThunk } from "app/async-thunk"
+import { client } from "app/client"
+import { reloadEntries } from "app/entries/thunks"
+import type { ReadingMode, ReadingOrder, ScrollMode, SharingSettings } from "app/types"
+
+export const reloadSettings = createAppAsyncThunk("settings/reload", async () => await client.user.getSettings().then(r => r.data))
+export const reloadProfile = createAppAsyncThunk("profile/reload", async () => await client.user.getProfile().then(r => r.data))
+export const reloadTags = createAppAsyncThunk("entries/tags", async () => await client.entry.getTags().then(r => r.data))
+export const changeReadingMode = createAppAsyncThunk("settings/readingMode", (readingMode: ReadingMode, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, readingMode })
+    thunkApi.dispatch(reloadEntries())
+})
+export const changeReadingOrder = createAppAsyncThunk("settings/readingOrder", (readingOrder: ReadingOrder, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, readingOrder })
+    thunkApi.dispatch(reloadEntries())
+})
+export const changeLanguage = createAppAsyncThunk("settings/language", (language: string, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, language })
+})
+export const changeScrollSpeed = createAppAsyncThunk("settings/scrollSpeed", (speed: boolean, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, scrollSpeed: speed ? 400 : 0 })
+})
+export const changeShowRead = createAppAsyncThunk("settings/showRead", (showRead: boolean, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, showRead })
+})
+export const changeScrollMarks = createAppAsyncThunk("settings/scrollMarks", (scrollMarks: boolean, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, scrollMarks })
+})
+export const changeScrollMode = createAppAsyncThunk("settings/scrollMode", (scrollMode: ScrollMode, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, scrollMode })
+})
+export const changeMarkAllAsReadConfirmation = createAppAsyncThunk(
+    "settings/markAllAsReadConfirmation",
+    (markAllAsReadConfirmation: boolean, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({ ...settings, markAllAsReadConfirmation })
+    }
+)
+export const changeCustomContextMenu = createAppAsyncThunk("settings/customContextMenu", (customContextMenu: boolean, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, customContextMenu })
+})
+export const changeMobileFooter = createAppAsyncThunk("settings/mobileFooter", (mobileFooter: boolean, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, mobileFooter })
+})
+export const changeSharingSetting = createAppAsyncThunk(
+    "settings/sharingSetting",
+    (
+        sharingSetting: {
+            site: keyof SharingSettings
+            value: boolean
+        },
+        thunkApi
+    ) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({
+            ...settings,
+            sharingSettings: {
+                ...settings.sharingSettings,
+                [sharingSetting.site]: sharingSetting.value,
+            },
+        })
+    }
+)

commafeed-client/src/app/utils.ts

@@ -1,4 +1,5 @@
-import { Category } from "./types"
+import { throttle } from "throttle-debounce"
+import { type Category } from "./types"
 
 export function visitCategoryTree(category: Category, visitor: (category: Category) => void): void {
     visitor(category)
@@ -26,43 +27,21 @@ export const calculatePlaceholderSize = ({ width, height, maxWidth }: { width?:
     return { width: placeholderWidth, height: placeholderHeight }
 }
 
-export const scrollToWithCallback = ({
-    element,
-    options,
-    onScrollEnded,
-}: {
-    element: HTMLElement
-    options: ScrollToOptions
-    onScrollEnded: () => void
-}) => {
+export const scrollToWithCallback = ({ options, onScrollEnded }: { options: ScrollToOptions; onScrollEnded: () => void }) => {
     const offset = (options.top ?? 0).toFixed()
 
-    const onScroll = () => {
-        if (element.offsetTop.toFixed() === offset) {
-            element.removeEventListener("scroll", onScroll)
+    const onScroll = throttle(100, () => {
+        if (window.scrollY.toFixed() === offset) {
+            window.removeEventListener("scroll", onScroll)
             onScrollEnded()
         }
-    }
-
-    element.addEventListener("scroll", onScroll)
+    })
+    window.addEventListener("scroll", onScroll)
 
     // scrollTo does not trigger if there's nothing to do, trigger it manually
     onScroll()
 
-    element.scrollTo(options)
-}
-
-export const openLinkInBackgroundTab = (url: string) => {
-    // simulate ctrl+click to open tab in background
-    const a = document.createElement("a")
-    a.href = url
-    a.rel = "noreferrer"
-    a.dispatchEvent(
-        new MouseEvent("click", {
-            ctrlKey: true,
-            metaKey: true,
-        })
-    )
+    window.scrollTo(options)
 }
 
 export const truncate = (str: string, n: number) => (str.length > n ? `${str.slice(0, n - 1)}\u2026` : str)

commafeed-client/src/assets/logo.svg

@@ -1,20 +1,10 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg height="512" width="512" viewBox="0 0 6.5625 6.5625" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd">
- <sodipodi:namedview guidetolerance="10">
-  <sodipodi:guide position="154.17325,117.15254" orientation="0,1"/>
-  <sodipodi:guide position="154.17325,166.44575" orientation="0,1"/>
-  <sodipodi:guide position="154.17325,288.40369" orientation="0,1"/>
-  <sodipodi:guide position="380.44742,392.71992" orientation="0,1"/>
-  <sodipodi:guide position="101.9661,166.44575" orientation="1,0"/>
-  <sodipodi:guide position="276.13119,288.40369" orientation="1,0"/>
-  <sodipodi:guide position="380.44742,165.67871" orientation="1,0"/>
-  <sodipodi:guide position="154.17325,288.40369" orientation="1,0"/>
-  <sodipodi:guide position="154.17325,166.44575" orientation="-0.70710678,0.70710678"/>
-  <sodipodi:guide position="123.21968,135.49218" orientation="1,0"/>
-  <sodipodi:guide position="123.21968,135.49218" orientation="0,1"/>
- </sodipodi:namedview>
- <rect fill="#f88a14" rx="0.7" ry="0.7" height="6.5625" width="6.5625"/>
- <path d="m1.9761,1.5289c2.9002,0,2.9002,2.9101,2.9002,2.9101" fill="none" stroke="#FFF" stroke-linecap="round" stroke-width="0.78125"/>
- <path d="m1.9688,2.875c1.5705-0.00908,1.5705,1.5639,1.5705,1.5639" fill="none" stroke="#FFF" stroke-linecap="round" stroke-width="0.78125"/>
- <path d="m2.6503,4.4062c0,0.23366-0.10712,0.47418-0.24663,0.6537-0.1814,0.2333-0.5705,0.5618-0.6913,0.5653,0.0402-0.0662,0.263-0.5654,0.2563-0.5654-0.36423,0-0.6595-0.29265-0.6595-0.65365s0.29527-0.65365,0.6595-0.65365,0.68159,0.29265,0.68159,0.65365z" fill="#FFF"/>
+<svg height="512" width="512" viewBox="0 0 6.5625 6.5625" xmlns="http://www.w3.org/2000/svg">
+	<rect fill="#f88a14" rx="0.7" ry="0.7" height="6.5625" width="6.5625" />
+	<path d="m1.9761,1.5289c2.9002,0,2.9002,2.9101,2.9002,2.9101" fill="none" stroke="#FFF" stroke-linecap="round"
+		  stroke-width="0.78125" />
+	<path d="m1.9688,2.875c1.5705-0.00908,1.5705,1.5639,1.5705,1.5639" fill="none" stroke="#FFF" stroke-linecap="round"
+		  stroke-width="0.78125" />
+	<path d="m2.6503,4.4062c0,0.23366-0.10712,0.47418-0.24663,0.6537-0.1814,0.2333-0.5705,0.5618-0.6913,0.5653,0.0402-0.0662,0.263-0.5654,0.2563-0.5654-0.36423,0-0.6595-0.29265-0.6595-0.65365s0.29527-0.65365,0.6595-0.65365,0.68159,0.29265,0.68159,0.65365z"
+		  fill="#FFF" />
 </svg>

commafeed-client/src/components/ActionButton.tsx

@@ -0,0 +1,36 @@
+import { ActionIcon, Button, type ButtonVariant, Tooltip, useMantineTheme } from "@mantine/core"
+import { type ActionIconVariant } from "@mantine/core/lib/components/ActionIcon/ActionIcon"
+import { useActionButton } from "hooks/useActionButton"
+import { forwardRef, type MouseEventHandler, type ReactNode } from "react"
+
+interface ActionButtonProps {
+    className?: string
+    icon?: ReactNode
+    label: ReactNode
+    onClick?: MouseEventHandler
+    variant?: ActionIconVariant & ButtonVariant
+    hideLabelOnDesktop?: boolean
+    showLabelOnMobile?: boolean
+}
+
+/**
+ * Switches between Button with label (desktop) and ActionIcon (mobile)
+ */
+export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
+    const { mobile } = useActionButton()
+    const theme = useMantineTheme()
+    const variant = props.variant ?? "subtle"
+    const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
+    return iconOnly ? (
+        <Tooltip label={props.label} openDelay={500}>
+            <ActionIcon ref={ref} color={theme.primaryColor} variant={variant} className={props.className} onClick={props.onClick}>
+                {props.icon}
+            </ActionIcon>
+        </Tooltip>
+    ) : (
+        <Button ref={ref} variant={variant} size="xs" className={props.className} leftSection={props.icon} onClick={props.onClick}>
+            {props.label}
+        </Button>
+    )
+})
+ActionButton.displayName = "HeaderButton"

commafeed-client/src/components/ActionButtton.tsx

@@ -1,34 +0,0 @@
-import { ActionIcon, Button, useMantineTheme } from "@mantine/core"
-import { ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon"
-import { ButtonProps } from "@mantine/core/lib/Button/Button"
-import { useMediaQuery } from "@mantine/hooks"
-import { forwardRef, MouseEventHandler, ReactNode } from "react"
-
-interface ActionButtonProps {
-    className?: string
-    icon?: ReactNode
-    label?: ReactNode
-    onClick?: MouseEventHandler
-    variant?: ActionIconProps["variant"] & ButtonProps["variant"]
-    showLabelOnMobile?: boolean
-}
-
-/**
- * Switches between Button with label (desktop) and ActionIcon (mobile)
- */
-export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
-    const theme = useMantineTheme()
-    const variant = props.variant ?? "subtle"
-    const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg})`)
-    const iconOnly = !props.showLabelOnMobile && (mobile || !props.label)
-    return iconOnly ? (
-        <ActionIcon ref={ref} color={theme.primaryColor} variant={variant} className={props.className} onClick={props.onClick}>
-            {props.icon}
-        </ActionIcon>
-    ) : (
-        <Button ref={ref} variant={variant} size="xs" className={props.className} leftIcon={props.icon} onClick={props.onClick}>
-            {props.label}
-        </Button>
-    )
-})
-ActionButton.displayName = "HeaderButton"

commafeed-client/src/components/Alert.tsx

@@ -1,9 +1,10 @@
 import { Trans } from "@lingui/macro"
-import { Box, Alert as MantineAlert } from "@mantine/core"
+import { Alert as MantineAlert, Box } from "@mantine/core"
 import { Fragment } from "react"
 import { TbAlertCircle, TbAlertTriangle, TbCircleCheck } from "react-icons/tb"
 
 type Level = "error" | "warning" | "success"
+
 export interface ErrorsAlertProps {
     level?: Level
     messages: string[]
@@ -31,8 +32,6 @@ export function Alert(props: ErrorsAlertProps) {
             color = "green"
             icon = <TbCircleCheck />
             break
-        default:
-            throw Error(`unsupported level: ${level}`)
     }
 
     return (

commafeed-client/src/components/AnnouncementDialog.tsx

@@ -0,0 +1,36 @@
+import { Trans } from "@lingui/macro"
+import { Box, Dialog, Text } from "@mantine/core"
+import { useAppSelector } from "app/store"
+import { Content } from "components/content/Content"
+import { useAsync } from "react-async-hook"
+import useLocalStorage from "use-local-storage"
+
+const sha256Hex = async (input: string | undefined) => {
+    const data = new TextEncoder().encode(input)
+    const buffer = await crypto.subtle.digest("SHA-256", data)
+    const array = Array.from(new Uint8Array(buffer))
+    return array.map(b => b.toString(16).padStart(2, "0")).join("")
+}
+
+export function AnnouncementDialog() {
+    const announcement = useAppSelector(state => state.server.serverInfos?.announcement)
+    const announcementHash = useAsync(sha256Hex, [announcement]).result
+    const [localStorageHash, setLocalStorageHash] = useLocalStorage("announcement-hash", "no-hash")
+
+    const opened = !!announcementHash && announcementHash !== localStorageHash
+    const onClosed = () => setLocalStorageHash(announcementHash)
+
+    if (!announcement) return null
+    return (
+        <Dialog opened={opened} withCloseButton onClose={onClosed} size="xl" radius="md">
+            <Box>
+                <Text fw="bold">
+                    <Trans>Announcement</Trans>
+                </Text>
+            </Box>
+            <Box>
+                <Content content={announcement} />
+            </Box>
+        </Dialog>
+    )
+}

commafeed-client/src/components/ButtonToolbar.tsx

@@ -1,5 +0,0 @@
-import { Group } from "@mantine/core"
-
-export function ButtonToolbar(props: { children: React.ReactNode }) {
-    return <Group spacing={14}>{props.children}</Group>
-}

commafeed-client/src/components/ErrorBoundary.tsx

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

commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx

@@ -1,6 +1,7 @@
-import { Box, Center, createStyles } from "@mantine/core"
+import { Box, Center } from "@mantine/core"
 import { useState } from "react"
 import { TbPhoto } from "react-icons/tb"
+import { tss } from "tss"
 
 interface ImageWithPlaceholderWhileLoadingProps {
     src: string
@@ -12,21 +13,41 @@ interface ImageWithPlaceholderWhileLoadingProps {
     placeholderHeight?: number
     placeholderBackgroundColor?: string
     placeholderIconSize?: number
-    placeholderIconColor?: string
 }
 
-const useStyles = createStyles((theme, props: ImageWithPlaceholderWhileLoadingProps) => ({
-    placeholder: {
-        width: props.placeholderWidth ?? 400,
-        height: props.placeholderHeight ?? 600,
-        maxWidth: "100%",
-        color: props.placeholderIconColor ?? theme.fn.variant({ color: theme.primaryColor, variant: "subtle" }).color,
-        backgroundColor: props.placeholderBackgroundColor ?? (theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]),
-    },
-}))
+const useStyles = tss
+    .withParams<{
+        placeholderWidth?: number
+        placeholderHeight?: number
+        placeholderBackgroundColor?: string
+    }>()
+    .create(props => ({
+        placeholder: {
+            width: props.placeholderWidth ?? 400,
+            height: props.placeholderHeight ?? 600,
+            maxWidth: "100%",
+            backgroundColor:
+                props.placeholderBackgroundColor ??
+                (props.colorScheme === "dark" ? props.theme.colors.dark[5] : props.theme.colors.gray[1]),
+        },
+    }))
 
-export function ImageWithPlaceholderWhileLoading(props: ImageWithPlaceholderWhileLoadingProps) {
-    const { classes } = useStyles(props)
+export function ImageWithPlaceholderWhileLoading({
+    alt,
+    height,
+    placeholderBackgroundColor,
+    placeholderHeight,
+    placeholderIconSize,
+    placeholderWidth,
+    src,
+    title,
+    width,
+}: ImageWithPlaceholderWhileLoadingProps) {
+    const { classes } = useStyles({
+        placeholderWidth,
+        placeholderHeight,
+        placeholderBackgroundColor,
+    })
     const [loading, setLoading] = useState(true)
 
     return (
@@ -35,17 +56,17 @@ export function ImageWithPlaceholderWhileLoading(props: ImageWithPlaceholderWhil
                 <Box>
                     <Center className={classes.placeholder}>
                         <div>
-                            <TbPhoto size={props.placeholderIconSize ?? 48} />
+                            <TbPhoto size={placeholderIconSize ?? 48} />
                         </div>
                     </Center>
                 </Box>
             )}
             <img
-                src={props.src}
-                alt={props.alt}
-                title={props.title}
-                width={props.width}
-                height={props.height}
+                src={src}
+                alt={alt}
+                title={title}
+                width={width}
+                height={height}
                 onLoad={() => setLoading(false)}
                 style={{ display: loading ? "none" : "block" }}
             />

commafeed-client/src/components/KeyboardShortcutsHelp.tsx

@@ -1,183 +1,222 @@
 import { Trans } from "@lingui/macro"
-import { Kbd, Table } from "@mantine/core"
+import { Anchor, Box, Kbd, Stack, Table } from "@mantine/core"
+import { Constants } from "app/constants"
 
 export function KeyboardShortcutsHelp() {
     return (
-        <Table striped highlightOnHover>
-            <tbody>
-                <tr>
-                    <td>
-                        <Trans>Refresh</Trans>
-                    </td>
-                    <td>
-                        <Kbd>R</Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Open next entry</Trans>
-                    </td>
-                    <td>
-                        <Kbd>J</Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Open previous entry</Trans>
-                    </td>
-                    <td>
-                        <Kbd>K</Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Set focus on next entry without opening it</Trans>
-                    </td>
-                    <td>
-                        <Kbd>N</Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Set focus on previous entry without opening it</Trans>
-                    </td>
-                    <td>
-                        <Kbd>P</Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Move the page down</Trans>
-                    </td>
-                    <td>
-                        <Kbd>
-                            <Trans>Space</Trans>
-                        </Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Move the page up</Trans>
-                    </td>
-                    <td>
-                        <Kbd>
-                            <Trans>Shift</Trans>
-                        </Kbd>
-                        <span> + </span>
-                        <Kbd>
-                            <Trans>Space</Trans>
-                        </Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Open/close current entry</Trans>
-                    </td>
-                    <td>
-                        <Kbd>O</Kbd>
-                        <span>, </span>
-                        <Kbd>
-                            <Trans>Enter</Trans>
-                        </Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Open current entry in a new tab</Trans>
-                    </td>
-                    <td>
-                        <Kbd>V</Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Open current entry in a new tab in the background</Trans>
-                    </td>
-                    <td>
-                        <Kbd>B</Kbd>
-                        <span>, </span>
-                        <Kbd>
-                            <Trans>Middle click</Trans>
-                        </Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Toggle read status of current entry</Trans>
-                    </td>
-                    <td>
-                        <Kbd>M</Kbd>
-                        <span>, </span>
-                        <Trans>Swipe header to the right</Trans>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Mark all entries as read</Trans>
-                    </td>
-                    <td>
-                        <Kbd>
-                            <Trans>Shift</Trans>
-                        </Kbd>
-                        <span> + </span>
-                        <Kbd>A</Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Go to the All view</Trans>
-                    </td>
-                    <td>
-                        <Kbd>G</Kbd>
-                        <span> </span>
-                        <Kbd>A</Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Navigate to a subscription by entering its name</Trans>
-                    </td>
-                    <td>
-                        <Kbd>
-                            <Trans>Ctrl</Trans>
-                        </Kbd>
-                        <span> + </span>
-                        <Kbd>K</Kbd>
-                        <span>, </span>
-                        <Kbd>G</Kbd>
-                        <span> </span>
-                        <Kbd>U</Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Show entry menu (desktop)</Trans>
-                    </td>
-                    <td>
-                        <Kbd>
-                            <Trans>Right click</Trans>
-                        </Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Show entry menu (mobile)</Trans>
-                    </td>
-                    <td>
-                        <Kbd>
-                            <Trans>Long press</Trans>
-                        </Kbd>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Trans>Show keyboard shortcut help</Trans>
-                    </td>
-                    <td>
-                        <Kbd>?</Kbd>
-                    </td>
-                </tr>
-            </tbody>
-        </Table>
+        <Stack gap="xs">
+            <Table striped highlightOnHover>
+                <Table.Tbody>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Refresh</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>R</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Open next entry</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>J</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Open previous entry</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>K</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Set focus on next entry without opening it</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>N</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Set focus on previous entry without opening it</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>P</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Move the page down</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>
+                                <Trans>Space</Trans>
+                            </Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Move the page up</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>
+                                <Trans>Shift</Trans>
+                            </Kbd>
+                            <span> + </span>
+                            <Kbd>
+                                <Trans>Space</Trans>
+                            </Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Open/close current entry</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>O</Kbd>
+                            <span>, </span>
+                            <Kbd>
+                                <Trans>Enter</Trans>
+                            </Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Open current entry in a new tab</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>V</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Open current entry in a new tab in the background</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>B</Kbd>
+                            <span>*, </span>
+                            <Kbd>
+                                <Trans>Middle click</Trans>
+                            </Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Toggle read status of current entry</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>M</Kbd>
+                            <span>, </span>
+                            <Trans>Swipe header to the left</Trans>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Toggle starred status of current entry</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>S</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Mark all entries as read</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>
+                                <Trans>Shift</Trans>
+                            </Kbd>
+                            <span> + </span>
+                            <Kbd>A</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Go to the All view</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>G</Kbd>
+                            <span> </span>
+                            <Kbd>A</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Navigate to a subscription by entering its name</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>
+                                <Trans>Ctrl</Trans>
+                            </Kbd>
+                            <span> + </span>
+                            <Kbd>K</Kbd>
+                            <span>, </span>
+                            <Kbd>G</Kbd>
+                            <span> </span>
+                            <Kbd>U</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Show entry menu (desktop)</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>
+                                <Trans>Right click</Trans>
+                            </Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Show native menu (desktop)</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>
+                                <Trans>Shift</Trans>
+                            </Kbd>
+                            <span> + </span>
+                            <Kbd>
+                                <Trans>Right click</Trans>
+                            </Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Show entry menu (mobile)</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>
+                                <Trans>Long press</Trans>
+                            </Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Toggle sidebar</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>F</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Trans>Show keyboard shortcut help</Trans>
+                        </Table.Td>
+                        <Table.Td>
+                            <Kbd>?</Kbd>
+                        </Table.Td>
+                    </Table.Tr>
+                </Table.Tbody>
+            </Table>
+            <Box>
+                <span>* </span>
+                <Anchor href={Constants.browserExtensionUrl} target="_blank" rel="noreferrer">
+                    <Trans>Browser extension required for Chrome</Trans>
+                </Anchor>
+            </Box>
+        </Stack>
     )
 }

commafeed-client/src/components/Loader.tsx

@@ -3,7 +3,7 @@ import { Center, Loader as MantineLoader } from "@mantine/core"
 export function Loader() {
     return (
         <Center>
-            <MantineLoader size="xl" variant="bars" />
+            <MantineLoader size="lg" type="bars" />
         </Center>
     )
 }

commafeed-client/src/components/Logo.tsx

@@ -6,5 +6,5 @@ export interface LogoProps {
 }
 
 export function Logo(props: LogoProps) {
-    return <Image src={logo} width={props.size} />
+    return <Image src={logo} w={props.size} />
 }

commafeed-client/src/components/RelativeDate.tsx

@@ -1,4 +1,5 @@
 import { Trans } from "@lingui/macro"
+import { Tooltip } from "@mantine/core"
 import dayjs from "dayjs"
 import { useEffect, useState } from "react"
 
@@ -10,5 +11,10 @@ export function RelativeDate(props: { date: Date | number | undefined }) {
     }, [])
 
     if (!props.date) return <Trans>N/A</Trans>
-    return <>{dayjs(props.date).from(dayjs(now))}</>
+    const date = dayjs(props.date)
+    return (
+        <Tooltip label={date.toDate().toLocaleString()} openDelay={500}>
+            <span>{date.from(dayjs(now))}</span>
+        </Tooltip>
+    )
 }

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

@@ -2,7 +2,7 @@ import { Trans } from "@lingui/macro"
 import { Box, Button, Checkbox, Group, PasswordInput, Stack, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { client, errorToStrings } from "app/client"
-import { UserModel } from "app/types"
+import { type AdminSaveUserRequest, type UserModel } from "app/types"
 import { Alert } from "components/Alert"
 import { useAsyncCallback } from "react-async-hook"
 import { TbDeviceFloppy } from "react-icons/tb"
@@ -14,8 +14,12 @@ interface UserEditProps {
 }
 
 export function UserEdit(props: UserEditProps) {
-    const form = useForm<UserModel>({
-        initialValues: props.user ?? ({ enabled: true } as UserModel),
+    const form = useForm<AdminSaveUserRequest>({
+        initialValues: props.user ?? {
+            name: "",
+            enabled: true,
+            admin: false,
+        },
     })
     const saveUser = useAsyncCallback(client.admin.saveUser, { onSuccess: props.onSave })
 
@@ -35,11 +39,11 @@ export function UserEdit(props: UserEditProps) {
                     <Checkbox label={<Trans>Admin</Trans>} {...form.getInputProps("admin", { type: "checkbox" })} />
                     <Checkbox label={<Trans>Enabled</Trans>} {...form.getInputProps("enabled", { type: "checkbox" })} />
 
-                    <Group>
+                    <Group justify="right">
                         <Button variant="default" onClick={props.onCancel}>
                             <Trans>Cancel</Trans>
                         </Button>
-                        <Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveUser.loading}>
+                        <Button type="submit" leftSection={<TbDeviceFloppy size={16} />} loading={saveUser.loading}>
                             <Trans>Save</Trans>
                         </Button>
                     </Group>

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

@@ -0,0 +1,36 @@
+import { Input, Textarea } from "@mantine/core"
+import RichCodeEditor from "components/code/RichCodeEditor"
+import { useMobile } from "hooks/useMobile"
+import { type ReactNode } from "react"
+
+interface CodeEditorProps {
+    description?: ReactNode
+    language: "css" | "javascript"
+    value?: string
+    onChange: (value: string | undefined) => void
+}
+
+export function CodeEditor(props: CodeEditorProps) {
+    const mobile = useMobile()
+
+    return mobile ? (
+        // monaco mobile support is poor, fallback to textarea
+        <Textarea
+            autosize
+            minRows={4}
+            maxRows={15}
+            description={props.description}
+            styles={{
+                input: {
+                    fontFamily: "monospace",
+                },
+            }}
+            value={props.value}
+            onChange={e => props.onChange(e.currentTarget.value)}
+        />
+    ) : (
+        <Input.Wrapper description={props.description}>
+            <RichCodeEditor height="30vh" language={props.language} value={props.value} onChange={props.onChange} />
+        </Input.Wrapper>
+    )
+}

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

@@ -0,0 +1,52 @@
+import { Loader } from "components/Loader"
+import { useColorScheme } from "hooks/useColorScheme"
+import { useAsync } from "react-async-hook"
+
+const init = async () => {
+    window.MonacoEnvironment = {
+        async getWorker(_, label) {
+            let worker
+            if (label === "css") {
+                worker = await import("monaco-editor/esm/vs/language/css/css.worker?worker")
+            } else if (label === "javascript") {
+                worker = await import("monaco-editor/esm/vs/language/typescript/ts.worker?worker")
+            } else {
+                worker = await import("monaco-editor/esm/vs/editor/editor.worker?worker")
+            }
+            // eslint-disable-next-line new-cap
+            return new worker.default()
+        },
+    }
+
+    const monacoReact = await import("@monaco-editor/react")
+    const monaco = await import("monaco-editor")
+    monacoReact.loader.config({ monaco })
+    return monacoReact.Editor
+}
+
+interface RichCodeEditorProps {
+    height: number | string
+    language: "css" | "javascript"
+    value?: string
+    onChange: (value: string | undefined) => void
+}
+
+function RichCodeEditor(props: RichCodeEditorProps) {
+    const colorScheme = useColorScheme()
+    const editorTheme = colorScheme === "dark" ? "vs-dark" : "light"
+
+    const { result: Editor } = useAsync(init, [])
+    if (!Editor) return <Loader />
+    return (
+        <Editor
+            height={props.height}
+            defaultLanguage={props.language}
+            theme={editorTheme}
+            options={{ minimap: { enabled: false } }}
+            value={props.value}
+            onChange={props.onChange}
+        />
+    )
+}
+
+export default RichCodeEditor

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

@@ -0,0 +1,11 @@
+import { TypographyStylesProvider } from "@mantine/core"
+import { type ReactNode } from "react"
+
+/**
+ * This component is used to provide basic styles to html typography elements.
+ *
+ * see https://mantine.dev/core/typography-styles-provider/
+ */
+export const BasicHtmlStyles = (props: { children: ReactNode }) => {
+    return <TypographyStylesProvider pl={0}>{props.children}</TypographyStylesProvider>
+}

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

@@ -1,20 +1,25 @@
-import { Box, createStyles, Mark, TypographyStylesProvider } from "@mantine/core"
+import { Box, Mark } from "@mantine/core"
 import { Constants } from "app/constants"
-import { useAppSelector } from "app/store"
 import { calculatePlaceholderSize } from "app/utils"
+import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
 import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
-import { ChildrenNode, Interweave, Matcher, MatchResponse, Node, TransformCallback } from "interweave"
+import escapeStringRegexp from "escape-string-regexp"
+import { type ChildrenNode, Interweave, Matcher, type MatchResponse, type Node, type TransformCallback } from "interweave"
+import React from "react"
+import { tss } from "tss"
 
 export interface ContentProps {
     content: string
+    highlight?: string
 }
 
-const useStyles = createStyles(theme => ({
+const useStyles = tss.create(() => ({
     content: {
         // break long links or long words
         overflowWrap: "anywhere",
         "& a": {
-            color: theme.fn.variant({ color: theme.primaryColor, variant: "subtle" }).color,
+            color: "inherit",
+            textDecoration: "underline",
         },
         "& iframe": {
             maxWidth: "100%",
@@ -59,11 +64,11 @@ const transform: TransformCallback = node => {
 }
 
 class HighlightMatcher extends Matcher {
-    private search: string
+    private readonly search: string
 
     constructor(search: string) {
         super("highlight")
-        this.search = search
+        this.search = escapeStringRegexp(search)
     }
 
     match(string: string): MatchResponse<unknown> | null {
@@ -71,27 +76,28 @@ class HighlightMatcher extends Matcher {
         return this.doMatch(string, new RegExp(pattern, "i"), () => ({}))
     }
 
-    // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
     replaceWith(children: ChildrenNode, props: unknown): Node {
         return <Mark>{children}</Mark>
     }
 
-    // eslint-disable-next-line class-methods-use-this
     asTag(): string {
         return "span"
     }
 }
 
-export function Content(props: ContentProps) {
+// memoize component because Interweave is costly
+const Content = React.memo((props: ContentProps) => {
     const { classes } = useStyles()
-    const search = useAppSelector(state => state.entries.search)
-    const matchers = search ? [new HighlightMatcher(search)] : []
+    const matchers = props.highlight ? [new HighlightMatcher(props.highlight)] : []
 
     return (
-        <TypographyStylesProvider>
+        <BasicHtmlStyles>
             <Box className={classes.content}>
                 <Interweave content={props.content} transform={transform} matchers={matchers} />
             </Box>
-        </TypographyStylesProvider>
+        </BasicHtmlStyles>
     )
-}
+})
+Content.displayName = "Content"
+
+export { Content }

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

@@ -1,26 +1,24 @@
-import { TypographyStylesProvider } from "@mantine/core"
+import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
 import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
 
 export function Enclosure(props: { enclosureType: string; enclosureUrl: string }) {
-    const hasVideo = props.enclosureType && props.enclosureType.indexOf("video") === 0
-    const hasAudio = props.enclosureType && props.enclosureType.indexOf("audio") === 0
-    const hasImage = props.enclosureType && props.enclosureType.indexOf("image") === 0
+    const hasVideo = props.enclosureType?.startsWith("video")
+    const hasAudio = props.enclosureType?.startsWith("audio")
+    const hasImage = props.enclosureType?.startsWith("image")
 
     return (
-        <TypographyStylesProvider>
+        <BasicHtmlStyles>
             {hasVideo && (
-                // eslint-disable-next-line jsx-a11y/media-has-caption
-                <video controls>
+                <video controls width="100%">
                     <source src={props.enclosureUrl} type={props.enclosureType} />
                 </video>
             )}
             {hasAudio && (
-                // eslint-disable-next-line jsx-a11y/media-has-caption
                 <audio controls>
                     <source src={props.enclosureUrl} type={props.enclosureType} />
                 </audio>
             )}
             {hasImage && <ImageWithPlaceholderWhileLoading src={props.enclosureUrl} alt="enclosure" />}
-        </TypographyStylesProvider>
+        </BasicHtmlStyles>
     )
 }

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

@@ -1,8 +1,9 @@
 import { Trans } from "@lingui/macro"
+import { Box } from "@mantine/core"
 import { openModal } from "@mantine/modals"
 import { Constants } from "app/constants"
+import { type ExpendableEntry } from "app/entries/slice"
 import {
-    ExpendableEntry,
     loadMoreEntries,
     markAllEntries,
     markEntry,
@@ -10,15 +11,18 @@ import {
     selectEntry,
     selectNextEntry,
     selectPreviousEntry,
-} from "app/slices/entries"
-import { redirectToRootCategory } from "app/slices/redirect"
+    starEntry,
+} from "app/entries/thunks"
+import { redirectToRootCategory } from "app/redirect/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { openLinkInBackgroundTab } from "app/utils"
+import { toggleSidebar } from "app/tree/slice"
 import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
 import { Loader } from "components/Loader"
+import { useBrowserExtension } from "hooks/useBrowserExtension"
 import { useMousetrap } from "hooks/useMousetrap"
 import { useViewMode } from "hooks/useViewMode"
 import { useEffect } from "react"
+import { useContextMenu } from "react-contexify"
 import InfiniteScroll from "react-infinite-scroller"
 import { throttle } from "throttle-debounce"
 import { FeedEntry } from "./FeedEntry"
@@ -29,16 +33,20 @@ export function FeedEntries() {
     const entriesTimestamp = useAppSelector(state => state.entries.timestamp)
     const selectedEntryId = useAppSelector(state => state.entries.selectedEntryId)
     const hasMore = useAppSelector(state => state.entries.hasMore)
-    const { viewMode } = useViewMode()
+    const loading = useAppSelector(state => state.entries.loading)
     const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
     const scrollingToEntry = useAppSelector(state => state.entries.scrollingToEntry)
+    const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible)
+    const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
+    const { viewMode } = useViewMode()
     const dispatch = useAppDispatch()
+    const { openLinkInBackgroundTab } = useBrowserExtension()
 
     const selectedEntry = entries.find(e => e.id === selectedEntryId)
 
     const headerClicked = (entry: ExpendableEntry, event: React.MouseEvent) => {
-        if (event.button === 1 || event.ctrlKey || event.metaKey) {
-            // middle click
+        const middleClick = event.button === 1 || event.ctrlKey || event.metaKey
+        if (middleClick || viewMode === "expanded") {
             dispatch(markEntry({ entry, read: true }))
         } else if (event.button === 0) {
             // main click
@@ -56,10 +64,44 @@ export function FeedEntries() {
         }
     }
 
-    useEffect(() => {
-        const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
+    const contextMenu = useContextMenu()
+    const headerRightClicked = (entry: ExpendableEntry, event: React.MouseEvent) => {
+        if (event.shiftKey || !customContextMenu) return
 
-        const listener = () => {
+        event.preventDefault()
+        contextMenu.show({
+            id: Constants.dom.entryContextMenuId(entry),
+            event,
+        })
+    }
+
+    const bodyClicked = (entry: ExpendableEntry) => {
+        if (viewMode !== "expanded") return
+
+        // entry is already selected
+        if (entry.id === selectedEntryId) return
+
+        dispatch(
+            selectEntry({
+                entry,
+                expand: true,
+                markAsRead: true,
+                scrollToEntry: true,
+            })
+        )
+    }
+
+    const swipedLeft = async (entry: ExpendableEntry) => await dispatch(markEntry({ entry, read: !entry.read }))
+
+    // close context menu on scroll
+    useEffect(() => {
+        const listener = throttle(100, () => contextMenu.hideAll())
+        window.addEventListener("scroll", listener)
+        return () => window.removeEventListener("scroll", listener)
+    }, [contextMenu])
+
+    useEffect(() => {
+        const listener = throttle(100, () => {
             if (viewMode !== "expanded") return
             if (scrollingToEntry) return
 
@@ -81,48 +123,55 @@ export function FeedEntries() {
                     })
                 )
             }
-        }
-        const throttledListener = throttle(100, listener)
-        scrollArea?.addEventListener("scroll", throttledListener)
-        return () => scrollArea?.removeEventListener("scroll", throttledListener)
-    }, [dispatch, entries, viewMode, scrollMarks, scrollingToEntry])
+        })
+        window.addEventListener("scroll", listener)
+        return () => window.removeEventListener("scroll", listener)
+    }, [dispatch, contextMenu, entries, viewMode, scrollMarks, scrollingToEntry])
 
-    useMousetrap("r", () => dispatch(reloadEntries()))
-    useMousetrap("j", () =>
-        dispatch(
-            selectNextEntry({
-                expand: true,
-                markAsRead: true,
-                scrollToEntry: true,
-            })
-        )
+    useMousetrap("r", async () => await dispatch(reloadEntries()))
+    useMousetrap(
+        "j",
+        async () =>
+            await dispatch(
+                selectNextEntry({
+                    expand: true,
+                    markAsRead: true,
+                    scrollToEntry: true,
+                })
+            )
     )
-    useMousetrap("n", () =>
-        dispatch(
-            selectNextEntry({
-                expand: false,
-                markAsRead: false,
-                scrollToEntry: true,
-            })
-        )
+    useMousetrap(
+        "n",
+        async () =>
+            await dispatch(
+                selectNextEntry({
+                    expand: false,
+                    markAsRead: false,
+                    scrollToEntry: true,
+                })
+            )
     )
-    useMousetrap("k", () =>
-        dispatch(
-            selectPreviousEntry({
-                expand: true,
-                markAsRead: true,
-                scrollToEntry: true,
-            })
-        )
+    useMousetrap(
+        "k",
+        async () =>
+            await dispatch(
+                selectPreviousEntry({
+                    expand: true,
+                    markAsRead: true,
+                    scrollToEntry: true,
+                })
+            )
     )
-    useMousetrap("p", () =>
-        dispatch(
-            selectPreviousEntry({
-                expand: false,
-                markAsRead: false,
-                scrollToEntry: true,
-            })
-        )
+    useMousetrap(
+        "p",
+        async () =>
+            await dispatch(
+                selectPreviousEntry({
+                    expand: false,
+                    markAsRead: false,
+                    scrollToEntry: true,
+                })
+            )
     )
     useMousetrap("space", () => {
         if (selectedEntry) {
@@ -137,9 +186,8 @@ export function FeedEntries() {
                         })
                     )
                 } else {
-                    const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
-                    scrollArea?.scrollTo({
-                        top: scrollArea.scrollTop + scrollArea.clientHeight * 0.8,
+                    window.scrollTo({
+                        top: window.scrollY + document.documentElement.clientHeight * 0.8,
                         behavior: "smooth",
                     })
                 }
@@ -176,9 +224,8 @@ export function FeedEntries() {
                         })
                     )
                 } else {
-                    const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
-                    scrollArea?.scrollTo({
-                        top: scrollArea.scrollTop - scrollArea.clientHeight * 0.8,
+                    window.scrollTo({
+                        top: window.scrollY - document.documentElement.clientHeight * 0.8,
                         behavior: "smooth",
                     })
                 }
@@ -211,7 +258,6 @@ export function FeedEntries() {
         window.open(selectedEntry.url, "_blank", "noreferrer")
     })
     useMousetrap("b", () => {
-        // simulate ctrl+click to open tab in background
         if (!selectedEntry) return
         openLinkInBackgroundTab(selectedEntry.url)
     })
@@ -220,6 +266,11 @@ export function FeedEntries() {
         if (!selectedEntry) return
         dispatch(markEntry({ entry: selectedEntry, read: !selectedEntry.read }))
     })
+    useMousetrap("s", () => {
+        // toggle starred status
+        if (!selectedEntry) return
+        dispatch(starEntry({ entry: selectedEntry, starred: !selectedEntry.starred }))
+    })
     useMousetrap("shift+a", () => {
         // mark all entries as read
         dispatch(
@@ -228,12 +279,14 @@ export function FeedEntries() {
                 req: {
                     id: source.id,
                     read: true,
-                    olderThan: entriesTimestamp,
+                    olderThan: Date.now(),
+                    insertedBefore: entriesTimestamp,
                 },
             })
         )
     })
-    useMousetrap("g a", () => dispatch(redirectToRootCategory()))
+    useMousetrap("g a", async () => await dispatch(redirectToRootCategory()))
+    useMousetrap("f", () => dispatch(toggleSidebar()))
     useMousetrap("?", () =>
         openModal({
             title: <Trans>Keyboard shortcuts</Trans>,
@@ -246,12 +299,11 @@ export function FeedEntries() {
     return (
         <InfiniteScroll
             id="entries"
+            className={`view-mode-${viewMode}`}
             initialLoad={false}
-            loadMore={() => dispatch(loadMoreEntries())}
+            loadMore={async () => await (!loading && dispatch(loadMoreEntries()))}
             hasMore={hasMore}
-            loader={<Loader key={0} />}
-            useWindow={false}
-            getScrollParent={() => document.getElementById(Constants.dom.mainScrollAreaId)}
+            loader={<Box key={0}>{loading && <Loader />}</Box>}
         >
             {entries.map(entry => (
                 <div
@@ -263,8 +315,13 @@ export function FeedEntries() {
                     <FeedEntry
                         entry={entry}
                         expanded={!!entry.expanded || viewMode === "expanded"}
+                        selected={entry.id === selectedEntryId}
                         showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
+                        maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
                         onHeaderClick={event => headerClicked(entry, event)}
+                        onHeaderRightClick={event => headerRightClicked(entry, event)}
+                        onBodyClick={() => bodyClicked(entry)}
+                        onSwipedLeft={async () => await swipedLeft(entry)}
                     />
                 </div>
             ))}

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

@@ -1,101 +1,142 @@
-import { Box, createStyles, Divider, Paper } from "@mantine/core"
-import { MantineNumberSize } from "@mantine/styles"
+import { Box, Divider, type MantineRadius, type MantineSpacing, Paper } from "@mantine/core"
 import { Constants } from "app/constants"
-import { markEntry } from "app/slices/entries"
-import { useAppDispatch } from "app/store"
-import { Entry, ViewMode } from "app/types"
+import { type Entry, type ViewMode } from "app/types"
 import { useViewMode } from "hooks/useViewMode"
 import React from "react"
 import { useSwipeable } from "react-swipeable"
+import { tss } from "tss"
 import { FeedEntryBody } from "./FeedEntryBody"
 import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader"
-import { FeedEntryContextMenu, useFeedEntryContextMenu } from "./FeedEntryContextMenu"
+import { FeedEntryContextMenu } from "./FeedEntryContextMenu"
 import { FeedEntryFooter } from "./FeedEntryFooter"
 import { FeedEntryHeader } from "./FeedEntryHeader"
 
 interface FeedEntryProps {
     entry: Entry
     expanded: boolean
+    selected: boolean
     showSelectionIndicator: boolean
+    maxWidth?: number
     onHeaderClick: (e: React.MouseEvent) => void
+    onHeaderRightClick: (e: React.MouseEvent) => void
+    onBodyClick: (e: React.MouseEvent) => void
+    onSwipedLeft: () => void
 }
 
-const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: ViewMode }) => {
-    let backgroundColor
-    if (theme.colorScheme === "dark") backgroundColor = props.entry.read ? "inherit" : theme.colors.dark[5]
-    else backgroundColor = props.entry.read && !props.expanded ? theme.colors.gray[0] : "inherit"
+const useStyles = tss
+    .withParams<{
+        read: boolean
+        expanded: boolean
+        viewMode: ViewMode
+        rtl: boolean
+        showSelectionIndicator: boolean
+        maxWidth?: number
+    }>()
+    .create(({ theme, colorScheme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth }) => {
+        let backgroundColor
+        if (colorScheme === "dark") {
+            backgroundColor = read ? "inherit" : theme.colors.dark[5]
+        } else {
+            backgroundColor = read && !expanded ? theme.colors.gray[0] : "inherit"
+        }
 
-    let marginY = 10
-    if (props.viewMode === "title") marginY = 2
-    else if (props.viewMode === "cozy") marginY = 6
+        let marginY = 10
+        if (viewMode === "title") {
+            marginY = 2
+        } else if (viewMode === "cozy") {
+            marginY = 6
+        }
 
-    let mobileMarginY = 6
-    if (props.viewMode === "title") mobileMarginY = 2
-    else if (props.viewMode === "cozy") mobileMarginY = 4
+        let mobileMarginY = 6
+        if (viewMode === "title") {
+            mobileMarginY = 2
+        } else if (viewMode === "cozy") {
+            mobileMarginY = 4
+        }
 
-    let backgroundHoverColor = backgroundColor
-    if (!props.expanded && !props.entry.read) {
-        backgroundHoverColor = theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
-    }
+        let backgroundHoverColor = backgroundColor
+        if (!expanded && !read) {
+            backgroundHoverColor = colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
+        }
 
-    const styles = {
-        paper: {
-            backgroundColor,
-            marginTop: marginY,
-            marginBottom: marginY,
-            [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: {
-                marginTop: mobileMarginY,
-                marginBottom: mobileMarginY,
-            },
-            "@media (hover: hover)": {
-                "&:hover": {
-                    backgroundColor: backgroundHoverColor,
+        let paperBorderLeftColor
+        if (showSelectionIndicator) {
+            const borderLeftColor = colorScheme === "dark" ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6]
+            paperBorderLeftColor = `${borderLeftColor} !important`
+        }
+
+        return {
+            paper: {
+                backgroundColor,
+                borderLeftColor: paperBorderLeftColor,
+                marginTop: marginY,
+                marginBottom: marginY,
+                [`@media (max-width: ${Constants.layout.mobileBreakpoint}px)`]: {
+                    marginTop: mobileMarginY,
+                    marginBottom: mobileMarginY,
+                },
+                "@media (hover: hover)": {
+                    "&:hover": {
+                        backgroundColor: backgroundHoverColor,
+                    },
                 },
             },
-        },
-        headerLink: {
-            color: "inherit",
-            textDecoration: "none",
-        },
-        body: {
-            maxWidth: Constants.layout.entryMaxWidth,
-        },
-    }
-
-    if (props.showSelectionIndicator) {
-        const borderLeftColor = theme.colorScheme === "dark" ? theme.colors.orange[4] : theme.colors.orange[6]
-        styles.paper.borderLeftColor = `${borderLeftColor} !important`
-    }
-
-    return styles
-})
+            headerLink: {
+                color: "inherit",
+                textDecoration: "none",
+            },
+            body: {
+                direction: rtl ? "rtl" : "ltr",
+                maxWidth: maxWidth ?? "100%",
+            },
+        }
+    })
 
 export function FeedEntry(props: FeedEntryProps) {
     const { viewMode } = useViewMode()
-    const { classes } = useStyles({ ...props, viewMode })
-
-    const dispatch = useAppDispatch()
-
-    const swipeHandlers = useSwipeable({
-        onSwipedRight: () => dispatch(markEntry({ entry: props.entry, read: !props.entry.read })),
+    const { classes, cx } = useStyles({
+        read: props.entry.read,
+        expanded: props.expanded,
+        viewMode,
+        rtl: props.entry.rtl,
+        showSelectionIndicator: props.showSelectionIndicator,
+        maxWidth: props.maxWidth,
     })
 
-    const { onContextMenu } = useFeedEntryContextMenu(props.entry)
+    const swipeHandlers = useSwipeable({
+        onSwipedLeft: props.onSwipedLeft,
+    })
 
-    let paddingX: MantineNumberSize = "xs"
+    let paddingX: MantineSpacing = "xs"
     if (viewMode === "title" || viewMode === "cozy") paddingX = 6
 
-    let paddingY: MantineNumberSize = "xs"
-    if (viewMode === "title") paddingY = 4
-    else if (viewMode === "cozy") paddingY = 8
+    let paddingY: MantineSpacing = "xs"
+    if (viewMode === "title") {
+        paddingY = 4
+    } else if (viewMode === "cozy") {
+        paddingY = 8
+    }
 
-    let borderRadius: MantineNumberSize = "sm"
-    if (viewMode === "title") borderRadius = 0
-    else if (viewMode === "cozy") borderRadius = "xs"
+    let borderRadius: MantineRadius = "sm"
+    if (viewMode === "title") {
+        borderRadius = 0
+    } else if (viewMode === "cozy") {
+        borderRadius = "xs"
+    }
 
     const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
     return (
-        <Paper withBorder radius={borderRadius} className={classes.paper}>
+        <Paper
+            withBorder
+            radius={borderRadius}
+            className={cx(classes.paper, {
+                read: props.entry.read,
+                unread: !props.entry.read,
+                expanded: props.expanded,
+                selected: props.selected,
+                "show-selection-indicator": props.showSelectionIndicator,
+            })}
+        >
             <a
                 className={classes.headerLink}
                 href={props.entry.url}
@@ -103,7 +144,7 @@ export function FeedEntry(props: FeedEntryProps) {
                 rel="noreferrer"
                 onClick={props.onHeaderClick}
                 onAuxClick={props.onHeaderClick}
-                onContextMenu={onContextMenu}
+                onContextMenu={props.onHeaderRightClick}
             >
                 <Box px={paddingX} py={paddingY} {...swipeHandlers}>
                     {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
@@ -111,8 +152,8 @@ export function FeedEntry(props: FeedEntryProps) {
                 </Box>
             </a>
             {props.expanded && (
-                <Box px={paddingX} pb={paddingY}>
-                    <Box className={classes.body} sx={{ direction: props.entry.rtl ? "rtl" : "ltr" }}>
+                <Box px={paddingX} pb={paddingY} onClick={props.onBodyClick}>
+                    <Box className={classes.body}>
                         <FeedEntryBody entry={props.entry} />
                     </Box>
                     <Divider variant="dashed" my={paddingY} />

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

@@ -1,5 +1,6 @@
 import { Box } from "@mantine/core"
-import { Entry } from "app/types"
+import { useAppSelector } from "app/store"
+import { type Entry } from "app/types"
 import { Content } from "./Content"
 import { Enclosure } from "./Enclosure"
 import { Media } from "./Media"
@@ -9,10 +10,11 @@ export interface FeedEntryBodyProps {
 }
 
 export function FeedEntryBody(props: FeedEntryBodyProps) {
+    const search = useAppSelector(state => state.entries.search)
     return (
         <Box>
             <Box>
-                <Content content={props.entry.content} />
+                <Content content={props.entry.content} highlight={search} />
             </Box>
             {props.entry.enclosureType && props.entry.enclosureUrl && (
                 <Box pt="md">

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

@@ -1,7 +1,8 @@
-import { Box, createStyles, Text } from "@mantine/core"
-import { Entry } from "app/types"
+import { Box, Text } from "@mantine/core"
+import { type Entry } from "app/types"
 import { RelativeDate } from "components/RelativeDate"
 import { OnDesktop } from "components/responsive/OnDesktop"
+import { tss } from "tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
 import { FeedFavicon } from "./FeedFavicon"
 
@@ -9,39 +10,46 @@ export interface FeedEntryHeaderProps {
     entry: Entry
 }
 
-const useStyles = createStyles((theme, props: FeedEntryHeaderProps) => ({
-    wrapper: {
-        display: "flex",
-        alignItems: "center",
-        columnGap: "10px",
-    },
-    title: {
-        flexGrow: 1,
-        fontWeight: theme.colorScheme === "light" && !props.entry.read ? "bold" : "inherit",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-    },
-    feedName: {
-        width: "145px",
-        minWidth: "145px",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-    },
-    date: {
-        whiteSpace: "nowrap",
-    },
-}))
+const useStyles = tss
+    .withParams<{
+        read: boolean
+    }>()
+    .create(({ colorScheme, read }) => ({
+        wrapper: {
+            display: "flex",
+            alignItems: "center",
+            columnGap: "10px",
+        },
+        title: {
+            flexGrow: 1,
+            fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+        feedName: {
+            width: "145px",
+            minWidth: "145px",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+        date: {
+            whiteSpace: "nowrap",
+        },
+    }))
+
 export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
-    const { classes } = useStyles(props)
+    const { classes } = useStyles({
+        read: props.entry.read,
+    })
     return (
         <Box className={classes.wrapper}>
             <Box>
                 <FeedFavicon url={props.entry.iconUrl} />
             </Box>
             <OnDesktop>
-                <Text color="dimmed" className={classes.feedName}>
+                <Text c="dimmed" className={classes.feedName}>
                     {props.entry.feedName}
                 </Text>
             </OnDesktop>
@@ -49,7 +57,7 @@ export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
                 <FeedEntryTitle entry={props.entry} />
             </Box>
             <OnDesktop>
-                <Text color="dimmed" className={classes.date}>
+                <Text c="dimmed" className={classes.date}>
                     <RelativeDate date={props.entry.date} />
                 </Text>
             </OnDesktop>

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

@@ -1,42 +1,41 @@
 import { Trans } from "@lingui/macro"
-import { createStyles, Group } from "@mantine/core"
+import { Group } from "@mantine/core"
 import { Constants } from "app/constants"
-import { markEntriesUpToEntry, markEntry, starEntry } from "app/slices/entries"
-import { redirectToFeed } from "app/slices/redirect"
+import { markEntriesUpToEntry, markEntry, starEntry } from "app/entries/thunks"
+import { redirectToFeed } from "app/redirect/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { Entry } from "app/types"
-import { openLinkInBackgroundTab, truncate } from "app/utils"
-import { useEffect } from "react"
-import { Item, Menu, Separator, useContextMenu } from "react-contexify"
+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, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb"
-import { throttle } from "throttle-debounce"
+import { tss } from "tss"
 
 interface FeedEntryContextMenuProps {
     entry: Entry
 }
 
 const iconSize = 16
-const useStyles = createStyles(theme => ({
+const useStyles = tss.create(({ theme, colorScheme }) => ({
     menu: {
         // apply mantine theme from MenuItem.styles.ts
         fontSize: theme.fontSizes.sm,
-        "--contexify-item-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
-        "--contexify-activeItem-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
-        "--contexify-activeItem-bgColor": `${
-            theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors.dark[3], 0.35) : theme.colors.gray[1]
-        } !important`,
+        "--contexify-item-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
+        "--contexify-activeItem-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
+        "--contexify-activeItem-bgColor": `${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]} !important`,
     },
 }))
 
-const menuId = (entry: Entry) => entry.id
-
 export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
-    const { classes, theme } = useStyles()
+    const colorScheme = useColorScheme()
+    const { classes } = useStyles()
     const sourceType = useAppSelector(state => state.entries.source.type)
     const dispatch = useAppDispatch()
+    const { openLinkInBackgroundTab } = useBrowserExtension()
 
     return (
-        <Menu id={menuId(props.entry)} theme={theme.colorScheme} animation={false} className={classes.menu}>
+        <Menu id={Constants.dom.entryContextMenuId(props.entry)} theme={colorScheme} animation={false} className={classes.menu}>
             <Item
                 onClick={() => {
                     window.open(props.entry.url, "_blank", "noreferrer")
@@ -62,19 +61,19 @@ export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
 
             <Separator />
 
-            <Item onClick={() => dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}>
+            <Item onClick={async () => await dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}>
                 <Group>
                     {props.entry.starred ? <TbStarOff size={iconSize} /> : <TbStar size={iconSize} />}
                     {props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
                 </Group>
             </Item>
-            <Item onClick={() => dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))}>
+            <Item onClick={async () => await dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))}>
                 <Group>
                     {props.entry.read ? <TbEyeOff size={iconSize} /> : <TbEyeCheck size={iconSize} />}
                     {props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
                 </Group>
             </Item>
-            <Item onClick={() => dispatch(markEntriesUpToEntry(props.entry))}>
+            <Item onClick={async () => await dispatch(markEntriesUpToEntry(props.entry))}>
                 <Group>
                     <TbArrowBarToDown size={iconSize} />
                     <Trans>Mark as read up to here</Trans>
@@ -100,29 +99,3 @@ export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
         </Menu>
     )
 }
-
-export function useFeedEntryContextMenu(entry: Entry) {
-    const contextMenu = useContextMenu({
-        id: menuId(entry),
-    })
-
-    const onContextMenu = (event: React.MouseEvent) => {
-        event.preventDefault()
-        contextMenu.show({
-            event,
-        })
-    }
-
-    // close context menu on scroll
-    useEffect(() => {
-        const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
-
-        const listener = () => contextMenu.hideAll()
-        const throttledListener = throttle(100, listener)
-
-        scrollArea?.addEventListener("scroll", throttledListener)
-        return () => scrollArea?.removeEventListener("scroll", throttledListener)
-    }, [contextMenu])
-
-    return { onContextMenu }
-}

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

@@ -1,15 +1,12 @@
 import { t, Trans } from "@lingui/macro"
-import { Group, Indicator, MultiSelect, Popover } from "@mantine/core"
-import { useMediaQuery } from "@mantine/hooks"
-import { Constants } from "app/constants"
-import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/slices/entries"
+import { Group, Indicator, Popover, TagsInput } from "@mantine/core"
+import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/entries/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { Entry } from "app/types"
-import { ActionButton } from "components/ActionButtton"
-import { ButtonToolbar } from "components/ButtonToolbar"
-import { useEffect, useState } from "react"
+import { type Entry } from "app/types"
+import { ActionButton } from "components/ActionButton"
+import { useActionButton } from "hooks/useActionButton"
+import { useMobile } from "hooks/useMobile"
 import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
-import { throttle } from "throttle-debounce"
 import { ShareButtons } from "./ShareButtons"
 
 interface FeedEntryFooterProps {
@@ -17,36 +14,32 @@ interface FeedEntryFooterProps {
 }
 
 export function FeedEntryFooter(props: FeedEntryFooterProps) {
-    const [scrollPosition, setScrollPosition] = useState(0)
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const tags = useAppSelector(state => state.user.tags)
-    const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint})`)
+    const mobile = useMobile()
+    const { spacing } = useActionButton()
     const dispatch = useAppDispatch()
 
     const showSharingButtons = sharingSettings && Object.values(sharingSettings).some(v => v)
 
-    const readStatusButtonClicked = () => dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))
-    const onTagsChange = (values: string[]) =>
-        dispatch(
+    const readStatusButtonClicked = async () =>
+        await dispatch(
+            markEntry({
+                entry: props.entry,
+                read: !props.entry.read,
+            })
+        )
+    const onTagsChange = async (values: string[]) =>
+        await dispatch(
             tagEntry({
                 entryId: +props.entry.id,
                 tags: values,
             })
         )
 
-    useEffect(() => {
-        const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
-
-        const listener = () => setScrollPosition(scrollArea ? scrollArea.scrollTop : 0)
-        const throttledListener = throttle(100, listener)
-
-        scrollArea?.addEventListener("scroll", throttledListener)
-        return () => scrollArea?.removeEventListener("scroll", throttledListener)
-    }, [])
-
     return (
-        <Group position="apart">
-            <ButtonToolbar>
+        <Group justify="space-between">
+            <Group gap={spacing}>
                 {props.entry.markable && (
                     <ActionButton
                         icon={props.entry.read ? <TbEyeOff size={18} /> : <TbEyeCheck size={18} />}
@@ -57,11 +50,18 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                 <ActionButton
                     icon={props.entry.starred ? <TbStarOff size={18} /> : <TbStar size={18} />}
                     label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
-                    onClick={() => dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}
+                    onClick={async () =>
+                        await dispatch(
+                            starEntry({
+                                entry: props.entry,
+                                starred: !props.entry.starred,
+                            })
+                        )
+                    }
                 />
 
                 {showSharingButtons && (
-                    <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]} closeOnClickOutside={!mobile}>
+                    <Popover withArrow withinPortal shadow="md" closeOnClickOutside={!mobile}>
                         <Popover.Target>
                             <ActionButton icon={<TbShare size={18} />} label={<Trans>Share</Trans>} />
                         </Popover.Target>
@@ -72,22 +72,21 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                 )}
 
                 {tags && (
-                    <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]} closeOnClickOutside={!mobile}>
+                    <Popover withArrow shadow="md" closeOnClickOutside={!mobile}>
                         <Popover.Target>
                             <Indicator label={props.entry.tags.length} disabled={props.entry.tags.length === 0} inline size={16}>
                                 <ActionButton icon={<TbTag size={18} />} label={<Trans>Tags</Trans>} />
                             </Indicator>
                         </Popover.Target>
                         <Popover.Dropdown>
-                            <MultiSelect
+                            <TagsInput
+                                placeholder={t`Tags`}
                                 data={tags}
-                                placeholder="Tags"
-                                searchable
-                                creatable
-                                autoFocus
-                                getCreateLabel={query => t`Create tag: ${query}`}
                                 value={props.entry.tags}
                                 onChange={onTagsChange}
+                                comboboxProps={{
+                                    withinPortal: false,
+                                }}
                             />
                         </Popover.Dropdown>
                     </Popover>
@@ -96,12 +95,12 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                 <a href={props.entry.url} target="_blank" rel="noreferrer">
                     <ActionButton icon={<TbExternalLink size={18} />} label={<Trans>Open link</Trans>} />
                 </a>
-            </ButtonToolbar>
+            </Group>
 
             <ActionButton
                 icon={<TbArrowBarToDown size={18} />}
                 label={<Trans>Mark as read up to here</Trans>}
-                onClick={() => dispatch(markEntriesUpToEntry(props.entry))}
+                onClick={async () => await dispatch(markEntriesUpToEntry(props.entry))}
             />
         </Group>
     )

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

@@ -1,6 +1,7 @@
-import { Box, createStyles, Text } from "@mantine/core"
-import { Entry } from "app/types"
+import { Box, Space, Text } from "@mantine/core"
+import { type Entry } from "app/types"
 import { RelativeDate } from "components/RelativeDate"
+import { tss } from "tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
 import { FeedFavicon } from "./FeedFavicon"
 
@@ -9,46 +10,42 @@ export interface FeedEntryHeaderProps {
     expanded: boolean
 }
 
-const useStyles = createStyles((theme, props: FeedEntryHeaderProps) => ({
-    headerText: {
-        fontWeight: theme.colorScheme === "light" && !props.entry.read ? "bold" : "inherit",
-        whiteSpace: props.expanded ? "inherit" : "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-    },
-    headerSubtext: {
-        display: "flex",
-        alignItems: "center",
-        fontSize: "90%",
-        whiteSpace: props.expanded ? "inherit" : "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-    },
-}))
+const useStyles = tss
+    .withParams<{
+        read: boolean
+    }>()
+    .create(({ colorScheme, read }) => ({
+        headerText: {
+            fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
+        },
+        headerSubtext: {
+            display: "flex",
+            alignItems: "center",
+            fontSize: "90%",
+        },
+    }))
+
 export function FeedEntryHeader(props: FeedEntryHeaderProps) {
-    const { classes } = useStyles(props)
+    const { classes } = useStyles({
+        read: props.entry.read,
+    })
     return (
         <Box>
             <Box className={classes.headerText}>
                 <FeedEntryTitle entry={props.entry} />
             </Box>
             <Box className={classes.headerSubtext}>
-                <Box mr={6}>
-                    <FeedFavicon url={props.entry.iconUrl} />
-                </Box>
-                <Box>
-                    <Text color="dimmed">{props.entry.feedName}</Text>
-                </Box>
-                <Box>
-                    <Text color="dimmed">
-                        <span>&nbsp;·&nbsp;</span>
-                        <RelativeDate date={props.entry.date} />
-                    </Text>
-                </Box>
+                <FeedFavicon url={props.entry.iconUrl} />
+                <Space w={6} />
+                <Text c="dimmed">
+                    {props.entry.feedName}
+                    <span> · </span>
+                    <RelativeDate date={props.entry.date} />
+                </Text>
             </Box>
             {props.expanded && (
                 <Box className={classes.headerSubtext}>
-                    <Text color="dimmed">
+                    <Text c="dimmed">
                         {props.entry.author && <span>by {props.entry.author}</span>}
                         {props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}
                         {props.entry.categories && <span>{props.entry.categories}</span>}

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

@@ -1,6 +1,6 @@
 import { Highlight } from "@mantine/core"
 import { useAppSelector } from "app/store"
-import { Entry } from "app/types"
+import { type Entry } from "app/types"
 
 export interface FeedEntryTitleProps {
     entry: Entry
@@ -11,6 +11,7 @@ export function FeedEntryTitle(props: FeedEntryTitleProps) {
     const keywords = search?.split(" ")
     return (
         <Highlight
+            inherit
             highlight={keywords ?? ""}
             // make sure ellipsis is shown when title is too long
             span

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

@@ -16,7 +16,6 @@ export function FeedFavicon({ url, size = 18 }: FeedFaviconProps) {
             placeholderHeight={size}
             placeholderBackgroundColor="inherit"
             placeholderIconSize={size}
-            placeholderIconColor="inherit"
         />
     )
 }

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

@@ -1,6 +1,7 @@
-import { Box, TypographyStylesProvider } from "@mantine/core"
+import { Box } from "@mantine/core"
 import { Constants } from "app/constants"
 import { calculatePlaceholderSize } from "app/utils"
+import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
 import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
 import { Content } from "./Content"
 
@@ -20,7 +21,7 @@ export function Media(props: MediaProps) {
         maxWidth: Constants.layout.entryMaxWidth,
     })
     return (
-        <TypographyStylesProvider>
+        <BasicHtmlStyles>
             <ImageWithPlaceholderWhileLoading
                 src={props.thumbnailUrl}
                 alt="media thumbnail"
@@ -34,6 +35,6 @@ export function Media(props: MediaProps) {
                     <Content content={props.description} />
                 </Box>
             )}
-        </TypographyStylesProvider>
+        </BasicHtmlStyles>
     )
 }

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

@@ -1,21 +1,28 @@
-import { ActionIcon, Box, createStyles, SimpleGrid } from "@mantine/core"
+import { ActionIcon, Box, SimpleGrid } from "@mantine/core"
 import { Constants } from "app/constants"
 import { useAppSelector } from "app/store"
-import { SharingSettings } from "app/types"
-import { IconType } from "react-icons"
+import { type SharingSettings } from "app/types"
+import { type IconType } from "react-icons"
+import { tss } from "tss"
 
 type Color = `#${string}`
 
-const useStyles = createStyles((theme, props: { color: Color }) => ({
-    socialIcon: {
-        color: props.color,
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[2] : "white",
-        borderRadius: "50%",
-    },
-}))
+const useStyles = tss
+    .withParams<{
+        color: Color
+    }>()
+    .create(({ theme, colorScheme, color }) => ({
+        socialIcon: {
+            color,
+            backgroundColor: colorScheme === "dark" ? theme.colors.gray[2] : "white",
+            borderRadius: "50%",
+        },
+    }))
 
 function ShareButton({ url, icon, color }: { url: string; icon: IconType; color: Color }) {
-    const { classes } = useStyles({ color })
+    const { classes } = useStyles({
+        color,
+    })
 
     const onClick = (e: React.MouseEvent) => {
         e.preventDefault()
@@ -23,7 +30,7 @@ function ShareButton({ url, icon, color }: { url: string; icon: IconType; color:
     }
 
     return (
-        <ActionIcon>
+        <ActionIcon variant="transparent">
             <a href={url} target="_blank" rel="noreferrer" onClick={onClick}>
                 <Box p={6} className={classes.socialIcon}>
                     {icon({ size: 18 })}
@@ -41,7 +48,7 @@ export function ShareButtons(props: { url: string; description: string }) {
     return (
         <SimpleGrid cols={4}>
             {(Object.keys(Constants.sharing) as Array<keyof SharingSettings>)
-                .filter(site => sharingSettings && sharingSettings[site])
+                .filter(site => sharingSettings?.[site])
                 .map(site => (
                     <ShareButton
                         key={site}

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

@@ -2,10 +2,10 @@ import { t, Trans } from "@lingui/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/slices/redirect"
-import { reloadTree } from "app/slices/tree"
+import { redirectToSelectedSource } from "app/redirect/thunks"
 import { useAppDispatch } from "app/store"
-import { AddCategoryRequest } from "app/types"
+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"
@@ -35,11 +35,11 @@ export function AddCategory() {
                 <Stack>
                     <TextInput label={<Trans>Category</Trans>} placeholder={t`Category`} {...form.getInputProps("name")} required />
                     <CategorySelect label={<Trans>Parent</Trans>} {...form.getInputProps("parentId")} clearable />
-                    <Group position="center">
-                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
+                    <Group justify="center">
+                        <Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
                             <Trans>Cancel</Trans>
                         </Button>
-                        <Button type="submit" leftIcon={<TbFolderPlus size={16} />} loading={addCategory.loading}>
+                        <Button type="submit" leftSection={<TbFolderPlus size={16} />} loading={addCategory.loading}>
                             <Trans>Add</Trans>
                         </Button>
                     </Group>

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

@@ -1,7 +1,9 @@
 import { t } from "@lingui/macro"
-import { Select, SelectItem, SelectProps } from "@mantine/core"
+import { Select, type SelectProps } from "@mantine/core"
+import { type ComboboxItem } from "@mantine/core/lib/components/Combobox/Combobox.types"
 import { Constants } from "app/constants"
 import { useAppSelector } from "app/store"
+import { type Category } from "app/types"
 import { flattenCategoryTree } from "app/utils"
 
 type CategorySelectProps = Partial<SelectProps> & {
@@ -12,14 +14,32 @@ type CategorySelectProps = Partial<SelectProps> & {
 export function CategorySelect(props: CategorySelectProps) {
     const rootCategory = useAppSelector(state => state.tree.rootCategory)
     const categories = rootCategory && flattenCategoryTree(rootCategory)
-    const selectData: SelectItem[] | undefined = categories
+    const categoriesById = categories?.reduce((map, c) => {
+        map.set(c.id, c)
+        return map
+    }, new Map<string, Category>())
+    const categoryLabel = (cat: Category) => {
+        let label = cat.name
+
+        while (cat.parentId) {
+            const parent = categoriesById?.get(cat.parentId)
+            if (!parent) {
+                break
+            }
+            label = `${parent.name} → ${label}`
+            cat = parent
+        }
+
+        return label
+    }
+    const selectData: ComboboxItem[] | undefined = categories
         ?.filter(c => c.id !== Constants.categories.all.id)
-        .filter(c => !props.withoutCategoryIds || !props.withoutCategoryIds.includes(c.id))
-        .sort((c1, c2) => c1.name.localeCompare(c2.name))
+        .filter(c => !props.withoutCategoryIds?.includes(c.id))
         .map(c => ({
-            label: c.parentName ? t`${c.name} (in ${c.parentName})` : c.name,
+            label: categoryLabel(c),
             value: c.id,
         }))
+        .sort((c1, c2) => c1.label.localeCompare(c2.label))
     if (props.withAll) {
         selectData?.unshift({
             label: t`All`,

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

@@ -2,9 +2,9 @@ import { t, Trans } from "@lingui/macro"
 import { Box, Button, FileInput, Group, Stack } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { client, errorToStrings } from "app/client"
-import { redirectToSelectedSource } from "app/slices/redirect"
-import { reloadTree } from "app/slices/tree"
+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"
@@ -33,11 +33,13 @@ export function ImportOpml() {
                 </Box>
             )}
 
-            <form onSubmit={form.onSubmit(v => importOpml.execute(v.file))}>
+            <form onSubmit={form.onSubmit(async v => await importOpml.execute(v.file))}>
                 <Stack>
                     <FileInput
                         label={<Trans>OPML file</Trans>}
-                        placeholder={t`OPML file`}
+                        leftSection={<TbFileImport />}
+                        // https://github.com/mantinedev/mantine/issues/5401
+                        {...{ placeholder: t`OPML file` }}
                         description={
                             <Trans>
                                 An opml file is an XML file containing feed URLs and categories. You can get an OPML file by exporting your
@@ -48,11 +50,11 @@ export function ImportOpml() {
                         required
                         accept="application/xml"
                     />
-                    <Group position="center">
-                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
+                    <Group justify="center">
+                        <Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
                             <Trans>Cancel</Trans>
                         </Button>
-                        <Button type="submit" leftIcon={<TbFileImport size={16} />} loading={importOpml.loading}>
+                        <Button type="submit" leftSection={<TbFileImport size={16} />} loading={importOpml.loading}>
                             <Trans>Import</Trans>
                         </Button>
                     </Group>

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

@@ -3,10 +3,10 @@ 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/slices/redirect"
-import { reloadTree } from "app/slices/tree"
+import { redirectToFeed, redirectToSelectedSource } from "app/redirect/thunks"
 import { useAppDispatch } from "app/store"
-import { FeedInfoRequest, SubscribeRequest } from "app/types"
+import { reloadTree } from "app/tree/thunks"
+import { type FeedInfoRequest, type SubscribeRequest } from "app/types"
 import { Alert } from "components/Alert"
 import { useState } from "react"
 import { useAsyncCallback } from "react-async-hook"
@@ -46,8 +46,11 @@ export function Subscribe() {
     })
 
     const previousStep = () => {
-        if (activeStep === 0) dispatch(redirectToSelectedSource())
-        else setActiveStep(activeStep - 1)
+        if (activeStep === 0) {
+            dispatch(redirectToSelectedSource())
+        } else {
+            setActiveStep(activeStep - 1)
+        }
     }
     const nextStep = (e: React.FormEvent<HTMLFormElement>) => {
         if (activeStep === 0) {
@@ -80,7 +83,7 @@ export function Subscribe() {
                     >
                         <TextInput
                             label={<Trans>Feed URL</Trans>}
-                            placeholder="http://www.mysite.com/rss"
+                            placeholder="https://www.mysite.com/rss"
                             description={
                                 <Trans>
                                     The URL for the feed you want to subscribe to. You can also use the website's url directly and CommaFeed
@@ -105,7 +108,7 @@ export function Subscribe() {
                     </Stepper.Step>
                 </Stepper>
 
-                <Group position="center" mt="xl">
+                <Group justify="center" mt="xl">
                     <Button variant="default" onClick={previousStep}>
                         <Trans>Back</Trans>
                     </Button>
@@ -115,7 +118,7 @@ export function Subscribe() {
                         </Button>
                     )}
                     {activeStep === 1 && (
-                        <Button type="submit" leftIcon={<TbRss size={16} />} loading={fetchFeed.loading || subscribe.loading}>
+                        <Button type="submit" leftSection={<TbRss size={16} />} loading={fetchFeed.loading || subscribe.loading}>
                             <Trans>Subscribe</Trans>
                         </Button>
                     )}

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

@@ -1,14 +1,28 @@
 import { t, Trans } from "@lingui/macro"
-import { ActionIcon, Center, Divider, Indicator, Popover, TextInput } from "@mantine/core"
+import { Box, Center, CloseButton, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
-import { reloadEntries, search } from "app/slices/entries"
-import { changeReadingMode, changeReadingOrder } from "app/slices/user"
+import { reloadEntries, search, selectNextEntry, selectPreviousEntry } from "app/entries/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { ActionButton } from "components/ActionButtton"
-import { ButtonToolbar } from "components/ButtonToolbar"
+import { changeReadingMode, changeReadingOrder } from "app/user/thunks"
+import { ActionButton } from "components/ActionButton"
 import { Loader } from "components/Loader"
+import { useActionButton } from "hooks/useActionButton"
+import { useBrowserExtension } from "hooks/useBrowserExtension"
+import { useMobile } from "hooks/useMobile"
 import { useEffect } from "react"
-import { TbArrowDown, TbArrowUp, TbEye, TbEyeOff, TbRefresh, TbSearch, TbUser, TbX } from "react-icons/tb"
+import {
+    TbArrowDown,
+    TbArrowUp,
+    TbExternalLink,
+    TbEye,
+    TbEyeOff,
+    TbRefresh,
+    TbSearch,
+    TbSettings,
+    TbSortAscending,
+    TbSortDescending,
+    TbUser,
+} from "react-icons/tb"
 import { MarkAllAsReadButton } from "./MarkAllAsReadButton"
 import { ProfileMenu } from "./ProfileMenu"
 
@@ -16,12 +30,32 @@ function HeaderDivider() {
     return <Divider orientation="vertical" />
 }
 
+function HeaderToolbar(props: { children: React.ReactNode }) {
+    const { spacing } = useActionButton()
+    const mobile = useMobile("480px")
+    return mobile ? (
+        // on mobile use all available width
+        <Box
+            style={{
+                width: "100%",
+                display: "flex",
+                justifyContent: "space-between",
+            }}
+        >
+            {props.children}
+        </Box>
+    ) : (
+        <Group gap={spacing}>{props.children}</Group>
+    )
+}
+
 const iconSize = 18
 
 export function Header() {
     const settings = useAppSelector(state => state.user.settings)
     const profile = useAppSelector(state => state.user.profile)
     const searchFromStore = useAppSelector(state => state.entries.search)
+    const { isBrowserExtensionPopup, openSettingsPage, openAppInNewTab } = useBrowserExtension()
     const dispatch = useAppDispatch()
 
     const searchForm = useForm<{ search: string }>({
@@ -40,11 +74,40 @@ export function Header() {
     if (!settings) return <Loader />
     return (
         <Center>
-            <ButtonToolbar>
+            <HeaderToolbar>
+                <ActionButton
+                    icon={<TbArrowUp size={iconSize} />}
+                    label={<Trans>Previous</Trans>}
+                    onClick={async () =>
+                        await dispatch(
+                            selectPreviousEntry({
+                                expand: true,
+                                markAsRead: true,
+                                scrollToEntry: true,
+                            })
+                        )
+                    }
+                />
+                <ActionButton
+                    icon={<TbArrowDown size={iconSize} />}
+                    label={<Trans>Next</Trans>}
+                    onClick={async () =>
+                        await dispatch(
+                            selectNextEntry({
+                                expand: true,
+                                markAsRead: true,
+                                scrollToEntry: true,
+                            })
+                        )
+                    }
+                />
+
+                <HeaderDivider />
+
                 <ActionButton
                     icon={<TbRefresh size={iconSize} />}
                     label={<Trans>Refresh</Trans>}
-                    onClick={() => dispatch(reloadEntries())}
+                    onClick={async () => await dispatch(reloadEntries())}
                 />
                 <MarkAllAsReadButton iconSize={iconSize} />
 
@@ -53,12 +116,12 @@ export function Header() {
                 <ActionButton
                     icon={settings.readingMode === "all" ? <TbEye size={iconSize} /> : <TbEyeOff size={iconSize} />}
                     label={settings.readingMode === "all" ? <Trans>All</Trans> : <Trans>Unread</Trans>}
-                    onClick={() => dispatch(changeReadingMode(settings.readingMode === "all" ? "unread" : "all"))}
+                    onClick={async () => await dispatch(changeReadingMode(settings.readingMode === "all" ? "unread" : "all"))}
                 />
                 <ActionButton
-                    icon={settings.readingOrder === "asc" ? <TbArrowUp size={iconSize} /> : <TbArrowDown size={iconSize} />}
+                    icon={settings.readingOrder === "asc" ? <TbSortAscending size={iconSize} /> : <TbSortDescending size={iconSize} />}
                     label={settings.readingOrder === "asc" ? <Trans>Asc</Trans> : <Trans>Desc</Trans>}
-                    onClick={() => dispatch(changeReadingOrder(settings.readingOrder === "asc" ? "desc" : "asc"))}
+                    onClick={async () => await dispatch(changeReadingOrder(settings.readingOrder === "asc" ? "desc" : "asc"))}
                 />
 
                 <Popover>
@@ -68,16 +131,12 @@ export function Header() {
                         </Indicator>
                     </Popover.Target>
                     <Popover.Dropdown>
-                        <form onSubmit={searchForm.onSubmit(values => dispatch(search(values.search)))}>
+                        <form onSubmit={searchForm.onSubmit(async values => await dispatch(search(values.search)))}>
                             <TextInput
                                 placeholder={t`Search`}
                                 {...searchForm.getInputProps("search")}
-                                icon={<TbSearch size={iconSize} />}
-                                rightSection={
-                                    <ActionIcon onClick={() => searchFromStore && dispatch(search(""))}>
-                                        <TbX />
-                                    </ActionIcon>
-                                }
+                                leftSection={<TbSearch size={iconSize} />}
+                                rightSection={<CloseButton onClick={async () => await (searchFromStore && dispatch(search("")))} />}
                                 autoFocus
                             />
                         </form>
@@ -87,7 +146,24 @@ export function Header() {
                 <HeaderDivider />
 
                 <ProfileMenu control={<ActionButton icon={<TbUser size={iconSize} />} label={profile?.name} />} />
-            </ButtonToolbar>
+
+                {isBrowserExtensionPopup && (
+                    <>
+                        <HeaderDivider />
+
+                        <ActionButton
+                            icon={<TbSettings size={iconSize} />}
+                            label={<Trans>Extension options</Trans>}
+                            onClick={() => openSettingsPage()}
+                        />
+                        <ActionButton
+                            icon={<TbExternalLink size={iconSize} />}
+                            label={<Trans>Open CommaFeed</Trans>}
+                            onClick={() => openAppInNewTab()}
+                        />
+                    </>
+                )}
+            </HeaderToolbar>
         </Center>
     )
 }

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

@@ -1,9 +1,9 @@
 import { Trans } from "@lingui/macro"
 
 import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
-import { markAllEntries } from "app/slices/entries"
+import { markAllEntries } from "app/entries/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { ActionButton } from "components/ActionButtton"
+import { ActionButton } from "components/ActionButton"
 import { useState } from "react"
 import { TbChecks } from "react-icons/tb"
 
@@ -13,8 +13,28 @@ export function MarkAllAsReadButton(props: { iconSize: number }) {
     const source = useAppSelector(state => state.entries.source)
     const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
     const entriesTimestamp = useAppSelector(state => state.entries.timestamp) ?? Date.now()
+    const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
     const dispatch = useAppDispatch()
 
+    const buttonClicked = () => {
+        if (markAllAsReadConfirmation) {
+            setThreshold(0)
+            setOpened(true)
+        } else {
+            dispatch(
+                markAllEntries({
+                    sourceType: source.type,
+                    req: {
+                        id: source.id,
+                        read: true,
+                        olderThan: Date.now(),
+                        insertedBefore: entriesTimestamp,
+                    },
+                })
+            )
+        }
+    }
+
     return (
         <>
             <Modal opened={opened} onClose={() => setOpened(false)} title={<Trans>Mark all entries as read</Trans>}>
@@ -45,7 +65,7 @@ export function MarkAllAsReadButton(props: { iconSize: number }) {
                         value={threshold}
                         onChange={setThreshold}
                     />
-                    <Group position="right">
+                    <Group justify="flex-end">
                         <Button variant="default" onClick={() => setOpened(false)}>
                             <Trans>Cancel</Trans>
                         </Button>
@@ -59,7 +79,8 @@ export function MarkAllAsReadButton(props: { iconSize: number }) {
                                         req: {
                                             id: source.id,
                                             read: true,
-                                            olderThan: entriesTimestamp - threshold * 24 * 60 * 60 * 1000,
+                                            olderThan: Date.now() - threshold * 24 * 60 * 60 * 1000,
+                                            insertedBefore: entriesTimestamp,
                                         },
                                     })
                                 )
@@ -70,14 +91,7 @@ export function MarkAllAsReadButton(props: { iconSize: number }) {
                     </Group>
                 </Stack>
             </Modal>
-            <ActionButton
-                icon={<TbChecks size={props.iconSize} />}
-                label={<Trans>Mark all as read</Trans>}
-                onClick={() => {
-                    setThreshold(0)
-                    setOpened(true)
-                }}
-            />
+            <ActionButton icon={<TbChecks size={props.iconSize} />} label={<Trans>Mark all as read</Trans>} onClick={buttonClicked} />
         </>
     )
 }

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

@@ -1,14 +1,24 @@
 import { Trans } from "@lingui/macro"
-import { Box, Divider, Group, Menu, SegmentedControl, SegmentedControlItem, useMantineColorScheme } from "@mantine/core"
+import {
+    Box,
+    Divider,
+    Group,
+    type MantineColorScheme,
+    Menu,
+    SegmentedControl,
+    type SegmentedControlItem,
+    useMantineColorScheme,
+} from "@mantine/core"
 import { showNotification } from "@mantine/notifications"
 import { client } from "app/client"
-import { redirectToAbout, redirectToAdminUsers, redirectToMetrics, redirectToSettings } from "app/slices/redirect"
+import { redirectToAbout, redirectToAdminUsers, redirectToDonate, redirectToMetrics, redirectToSettings } from "app/redirect/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { ViewMode } from "app/types"
+import { type ViewMode } from "app/types"
 import { useViewMode } from "hooks/useViewMode"
-import { useState } from "react"
+import { type ReactNode, useState } from "react"
 import {
     TbChartLine,
+    TbHeartFilled,
     TbHelp,
     TbLayoutList,
     TbList,
@@ -18,6 +28,7 @@ import {
     TbPower,
     TbSettings,
     TbSun,
+    TbSunMoon,
     TbUsers,
     TbWorldDownload,
 } from "react-icons/tb"
@@ -26,56 +37,56 @@ interface ProfileMenuProps {
     control: React.ReactElement
 }
 
-interface ViewModeControlItem extends SegmentedControlItem {
-    value: ViewMode
+const ProfileMenuControlItem = ({ icon, label }: { icon: ReactNode; label: ReactNode }) => {
+    return (
+        <Group>
+            {icon}
+            <Box ml={6}>{label}</Box>
+        </Group>
+    )
 }
 
 const iconSize = 16
 
+interface ColorSchemeControlItem extends SegmentedControlItem {
+    value: MantineColorScheme
+}
+
+const colorSchemeData: ColorSchemeControlItem[] = [
+    {
+        value: "light",
+        label: <ProfileMenuControlItem icon={<TbSun size={iconSize} />} label={<Trans>Light</Trans>} />,
+    },
+    {
+        value: "dark",
+        label: <ProfileMenuControlItem icon={<TbMoon size={iconSize} />} label={<Trans>Dark</Trans>} />,
+    },
+    {
+        value: "auto",
+        label: <ProfileMenuControlItem icon={<TbSunMoon size={iconSize} />} label={<Trans>System</Trans>} />,
+    },
+]
+
+interface ViewModeControlItem extends SegmentedControlItem {
+    value: ViewMode
+}
+
 const viewModeData: ViewModeControlItem[] = [
     {
         value: "title",
-        label: (
-            <Group>
-                <TbList size={iconSize} />
-                <Box ml={6}>
-                    <Trans>Compact</Trans>
-                </Box>
-            </Group>
-        ),
+        label: <ProfileMenuControlItem icon={<TbList size={iconSize} />} label={<Trans>Compact</Trans>} />,
     },
     {
         value: "cozy",
-        label: (
-            <Group>
-                <TbLayoutList size={iconSize} />
-                <Box ml={6}>
-                    <Trans>Cozy</Trans>
-                </Box>
-            </Group>
-        ),
+        label: <ProfileMenuControlItem icon={<TbLayoutList size={iconSize} />} label={<Trans>Cozy</Trans>} />,
     },
     {
         value: "detailed",
-        label: (
-            <Group>
-                <TbListDetails size={iconSize} />
-                <Box ml={6}>
-                    <Trans>Detailed</Trans>
-                </Box>
-            </Group>
-        ),
+        label: <ProfileMenuControlItem icon={<TbListDetails size={iconSize} />} label={<Trans>Detailed</Trans>} />,
     },
     {
         value: "expanded",
-        label: (
-            <Group>
-                <TbNotes size={iconSize} />
-                <Box ml={6}>
-                    <Trans>Expanded</Trans>
-                </Box>
-            </Group>
-        ),
+        label: <ProfileMenuControlItem icon={<TbNotes size={iconSize} />} label={<Trans>Expanded</Trans>} />,
     },
 ]
 
@@ -85,8 +96,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
     const profile = useAppSelector(state => state.user.profile)
     const admin = useAppSelector(state => state.user.profile?.admin)
     const dispatch = useAppDispatch()
-    const { colorScheme, toggleColorScheme } = useMantineColorScheme()
-    const dark = colorScheme === "dark"
+    const { colorScheme, setColorScheme } = useMantineColorScheme()
 
     const logout = () => {
         window.location.href = "logout"
@@ -98,7 +108,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
             <Menu.Dropdown>
                 {profile && <Menu.Label>{profile.name}</Menu.Label>}
                 <Menu.Item
-                    icon={<TbSettings size={iconSize} />}
+                    leftSection={<TbSettings size={iconSize} />}
                     onClick={() => {
                         dispatch(redirectToSettings())
                         setOpened(false)
@@ -107,9 +117,9 @@ export function ProfileMenu(props: ProfileMenuProps) {
                     <Trans>Settings</Trans>
                 </Menu.Item>
                 <Menu.Item
-                    icon={<TbWorldDownload size={iconSize} />}
-                    onClick={() =>
-                        client.feed.refreshAll().then(() => {
+                    leftSection={<TbWorldDownload size={iconSize} />}
+                    onClick={async () =>
+                        await client.feed.refreshAll().then(() => {
                             showNotification({
                                 message: <Trans>Your feeds have been queued for refresh.</Trans>,
                                 color: "green",
@@ -123,14 +133,21 @@ export function ProfileMenu(props: ProfileMenuProps) {
                 </Menu.Item>
 
                 <Divider />
+
                 <Menu.Label>
                     <Trans>Theme</Trans>
                 </Menu.Label>
-                <Menu.Item icon={dark ? <TbSun size={iconSize} /> : <TbMoon size={iconSize} />} onClick={() => toggleColorScheme()}>
-                    {dark ? <Trans>Switch to light theme</Trans> : <Trans>Switch to dark theme</Trans>}
-                </Menu.Item>
+                <SegmentedControl
+                    fullWidth
+                    orientation="vertical"
+                    data={colorSchemeData}
+                    value={colorScheme}
+                    onChange={e => setColorScheme(e as MantineColorScheme)}
+                    mb="xs"
+                />
 
                 <Divider />
+
                 <Menu.Label>
                     <Trans>Display</Trans>
                 </Menu.Label>
@@ -150,7 +167,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                             <Trans>Admin</Trans>
                         </Menu.Label>
                         <Menu.Item
-                            icon={<TbUsers size={iconSize} />}
+                            leftSection={<TbUsers size={iconSize} />}
                             onClick={() => {
                                 dispatch(redirectToAdminUsers())
                                 setOpened(false)
@@ -159,7 +176,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                             <Trans>Manage users</Trans>
                         </Menu.Item>
                         <Menu.Item
-                            icon={<TbChartLine size={iconSize} />}
+                            leftSection={<TbChartLine size={iconSize} />}
                             onClick={() => {
                                 dispatch(redirectToMetrics())
                                 setOpened(false)
@@ -171,8 +188,19 @@ export function ProfileMenu(props: ProfileMenuProps) {
                 )}
 
                 <Divider />
+
                 <Menu.Item
-                    icon={<TbHelp size={iconSize} />}
+                    leftSection={<TbHeartFilled size={iconSize} color="red" />}
+                    onClick={() => {
+                        dispatch(redirectToDonate())
+                        setOpened(false)
+                    }}
+                >
+                    <Trans>Donate</Trans>
+                </Menu.Item>
+
+                <Menu.Item
+                    leftSection={<TbHelp size={iconSize} />}
                     onClick={() => {
                         dispatch(redirectToAbout())
                         setOpened(false)
@@ -180,7 +208,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                 >
                     <Trans>About</Trans>
                 </Menu.Item>
-                <Menu.Item icon={<TbPower size={iconSize} />} onClick={logout}>
+                <Menu.Item leftSection={<TbPower size={iconSize} />} onClick={logout}>
                     <Trans>Logout</Trans>
                 </Menu.Item>
             </Menu.Dropdown>

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

@@ -1,4 +1,4 @@
-import { MetricGauge } from "app/types"
+import { type MetricGauge } from "app/types"
 
 interface MeterProps {
     gauge: MetricGauge

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

@@ -1,5 +1,5 @@
 import { Box } from "@mantine/core"
-import { MetricMeter } from "app/types"
+import { type MetricMeter } from "app/types"
 
 interface MeterProps {
     meter: MetricMeter

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

@@ -11,7 +11,7 @@ export function MetricAccordionItem({ metricKey, name, headerValue, children }:
     return (
         <Accordion.Item value={metricKey} key={metricKey}>
             <Accordion.Control>
-                <Group position="apart">
+                <Group justify="space-between">
                     <Box>{name}</Box>
                     <Box>{headerValue}</Box>
                 </Group>

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

@@ -1,5 +1,5 @@
 import { Box } from "@mantine/core"
-import { MetricTimer } from "app/types"
+import { type MetricTimer } from "app/types"
 
 interface MetricTimerProps {
     timer: MetricTimer

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

@@ -1,11 +1,8 @@
-import { Box, MediaQuery } from "@mantine/core"
-import { Constants } from "app/constants"
+import { Box } from "@mantine/core"
+import { useMobile } from "hooks/useMobile"
 import React from "react"
 
 export function OnDesktop(props: { children: React.ReactNode }) {
-    return (
-        <MediaQuery smallerThan={Constants.layout.mobileBreakpoint} styles={{ display: "none" }}>
-            <Box>{props.children}</Box>
-        </MediaQuery>
-    )
+    const mobile = useMobile()
+    return <Box>{!mobile && props.children}</Box>
 }

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

@@ -1,11 +1,8 @@
-import { Box, MediaQuery } from "@mantine/core"
-import { Constants } from "app/constants"
+import { Box } from "@mantine/core"
+import { useMobile } from "hooks/useMobile"
 import React from "react"
 
 export function OnMobile(props: { children: React.ReactNode }) {
-    return (
-        <MediaQuery largerThan={Constants.layout.mobileBreakpoint} styles={{ display: "none" }}>
-            <Box>{props.children}</Box>
-        </MediaQuery>
-    )
+    const mobile = useMobile()
+    return <Box>{mobile && props.children}</Box>
 }

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

@@ -1,96 +1,83 @@
-import { Trans } from "@lingui/macro"
-import { Box, Button, Group, Stack, Textarea } from "@mantine/core"
-import { useForm } from "@mantine/form"
-import { client, errorToStrings } from "app/client"
-import { redirectToSelectedSource } from "app/slices/redirect"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { Alert } from "components/Alert"
-import { useEffect } from "react"
-import { useAsyncCallback } from "react-async-hook"
-import { TbDeviceFloppy } from "react-icons/tb"
-
-interface FormData {
-    customCss: string
-    customJs: string
-}
-
-export function CustomCodeSettings() {
-    const settings = useAppSelector(state => state.user.settings)
-    const dispatch = useAppDispatch()
-
-    const form = useForm<FormData>()
-    const { setValues } = form
-
-    const saveCustomCode = useAsyncCallback(
-        async (d: FormData) => {
-            if (!settings) return
-            await client.user.saveSettings({
-                ...settings,
-                customCss: d.customCss,
-                customJs: d.customJs,
-            })
-        },
-        {
-            onSuccess: () => {
-                window.location.reload()
-            },
-        }
-    )
-
-    useEffect(() => {
-        if (!settings) return
-        setValues({
-            customCss: settings.customCss,
-            customJs: settings.customJs,
-        })
-    }, [setValues, settings])
-
-    return (
-        <>
-            {saveCustomCode.error && (
-                <Box mb="md">
-                    <Alert messages={errorToStrings(saveCustomCode.error)} />
-                </Box>
-            )}
-
-            <form onSubmit={form.onSubmit(saveCustomCode.execute)}>
-                <Stack>
-                    <Textarea
-                        autosize
-                        minRows={4}
-                        maxRows={15}
-                        {...form.getInputProps("customCss")}
-                        description={<Trans>Custom CSS rules that will be applied</Trans>}
-                        styles={{
-                            input: {
-                                fontFamily: "monospace",
-                            },
-                        }}
-                    />
-
-                    <Textarea
-                        autosize
-                        minRows={4}
-                        maxRows={15}
-                        {...form.getInputProps("customJs")}
-                        description={<Trans>Custom JS code that will be executed on page load</Trans>}
-                        styles={{
-                            input: {
-                                fontFamily: "monospace",
-                            },
-                        }}
-                    />
-
-                    <Group>
-                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
-                            <Trans>Cancel</Trans>
-                        </Button>
-                        <Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveCustomCode.loading}>
-                            <Trans>Save</Trans>
-                        </Button>
-                    </Group>
-                </Stack>
-            </form>
-        </>
-    )
-}
+import { Trans } from "@lingui/macro"
+import { Box, Button, Group, Stack } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { client, errorToStrings } from "app/client"
+import { redirectToSelectedSource } from "app/redirect/thunks"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { Alert } from "components/Alert"
+import { CodeEditor } from "components/code/CodeEditor"
+import { useEffect } from "react"
+import { useAsyncCallback } from "react-async-hook"
+import { TbDeviceFloppy } from "react-icons/tb"
+
+interface FormData {
+    customCss: string
+    customJs: string
+}
+
+export function CustomCodeSettings() {
+    const settings = useAppSelector(state => state.user.settings)
+    const dispatch = useAppDispatch()
+
+    const form = useForm<FormData>()
+    const { setValues } = form
+
+    const saveCustomCode = useAsyncCallback(
+        async (d: FormData) => {
+            if (!settings) return
+            await client.user.saveSettings({
+                ...settings,
+                customCss: d.customCss,
+                customJs: d.customJs,
+            })
+        },
+        {
+            onSuccess: () => {
+                window.location.reload()
+            },
+        }
+    )
+
+    useEffect(() => {
+        if (!settings) return
+        setValues({
+            customCss: settings.customCss,
+            customJs: settings.customJs,
+        })
+    }, [setValues, settings])
+
+    return (
+        <>
+            {saveCustomCode.error && (
+                <Box mb="md">
+                    <Alert messages={errorToStrings(saveCustomCode.error)} />
+                </Box>
+            )}
+
+            <form onSubmit={form.onSubmit(saveCustomCode.execute)}>
+                <Stack>
+                    <CodeEditor
+                        description={<Trans>Custom CSS rules that will be applied</Trans>}
+                        language="css"
+                        {...form.getInputProps("customCss")}
+                    />
+
+                    <CodeEditor
+                        description={<Trans>Custom JS code that will be executed on page load</Trans>}
+                        language="javascript"
+                        {...form.getInputProps("customJs")}
+                    />
+
+                    <Group>
+                        <Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                        <Button type="submit" leftSection={<TbDeviceFloppy size={16} />} loading={saveCustomCode.loading}>
+                            <Trans>Save</Trans>
+                        </Button>
+                    </Group>
+                </Stack>
+            </form>
+        </>
+    )
+}

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

@@ -1,19 +1,40 @@
 import { Trans } from "@lingui/macro"
-import { Divider, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
+import { Divider, Group, Radio, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
 import { Constants } from "app/constants"
-import { changeLanguage, changeScrollMarks, changeScrollSpeed, changeSharingSetting, changeShowRead } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { SharingSettings } from "app/types"
+import { type ScrollMode, type SharingSettings } from "app/types"
+import {
+    changeCustomContextMenu,
+    changeLanguage,
+    changeMarkAllAsReadConfirmation,
+    changeMobileFooter,
+    changeScrollMarks,
+    changeScrollMode,
+    changeScrollSpeed,
+    changeSharingSetting,
+    changeShowRead,
+} from "app/user/thunks"
 import { locales } from "i18n"
+import { type ReactNode } from "react"
 
 export function DisplaySettings() {
     const language = useAppSelector(state => state.user.settings?.language)
     const scrollSpeed = useAppSelector(state => state.user.settings?.scrollSpeed)
     const showRead = useAppSelector(state => state.user.settings?.showRead)
     const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
+    const scrollMode = useAppSelector(state => state.user.settings?.scrollMode)
+    const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
+    const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
+    const mobileFooter = useAppSelector(state => state.user.settings?.mobileFooter)
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const dispatch = useAppDispatch()
 
+    const scrollModeOptions: Record<ScrollMode, ReactNode> = {
+        always: <Trans>Always</Trans>,
+        never: <Trans>Never</Trans>,
+        if_needed: <Trans>If the entry doesn't entirely fit on the screen</Trans>,
+    }
+
     return (
         <Stack>
             <Select
@@ -23,25 +44,57 @@ export function DisplaySettings() {
                     value: l.key,
                     label: l.label,
                 }))}
-                onChange={s => s && dispatch(changeLanguage(s))}
-            />
-
-            <Switch
-                label={<Trans>Scroll smoothly when navigating between entries</Trans>}
-                checked={scrollSpeed ? scrollSpeed > 0 : false}
-                onChange={e => dispatch(changeScrollSpeed(e.currentTarget.checked))}
+                onChange={async s => await (s && dispatch(changeLanguage(s)))}
             />
 
             <Switch
                 label={<Trans>Show feeds and categories with no unread entries</Trans>}
                 checked={showRead}
-                onChange={e => dispatch(changeShowRead(e.currentTarget.checked))}
+                onChange={async e => await dispatch(changeShowRead(e.currentTarget.checked))}
+            />
+
+            <Switch
+                label={<Trans>Show confirmation when marking all entries as read</Trans>}
+                checked={markAllAsReadConfirmation}
+                onChange={async e => await dispatch(changeMarkAllAsReadConfirmation(e.currentTarget.checked))}
+            />
+
+            <Switch
+                label={<Trans>Show CommaFeed's own context menu on right click</Trans>}
+                checked={customContextMenu}
+                onChange={async e => await dispatch(changeCustomContextMenu(e.currentTarget.checked))}
+            />
+
+            <Switch
+                label={<Trans>On mobile, show action buttons at the bottom of the screen</Trans>}
+                checked={mobileFooter}
+                onChange={async e => await dispatch(changeMobileFooter(e.currentTarget.checked))}
+            />
+
+            <Divider label={<Trans>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>
+
+            <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={e => dispatch(changeScrollMarks(e.currentTarget.checked))}
+                onChange={async e => await dispatch(changeScrollMarks(e.currentTarget.checked))}
             />
 
             <Divider label={<Trans>Sharing sites</Trans>} labelPosition="center" />
@@ -51,8 +104,15 @@ export function DisplaySettings() {
                     <Switch
                         key={site}
                         label={Constants.sharing[site].label}
-                        checked={sharingSettings && sharingSettings[site]}
-                        onChange={e => dispatch(changeSharingSetting({ site, value: e.currentTarget.checked }))}
+                        checked={sharingSettings?.[site]}
+                        onChange={async e =>
+                            await dispatch(
+                                changeSharingSetting({
+                                    site,
+                                    value: e.currentTarget.checked,
+                                })
+                            )
+                        }
                     />
                 ))}
             </SimpleGrid>

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

@@ -3,10 +3,10 @@ import { Anchor, Box, Button, Checkbox, Divider, Group, Input, PasswordInput, St
 import { useForm } from "@mantine/form"
 import { openConfirmModal } from "@mantine/modals"
 import { client, errorToStrings } from "app/client"
-import { redirectToLogin, redirectToSelectedSource } from "app/slices/redirect"
-import { reloadProfile } from "app/slices/user"
+import { redirectToLogin, redirectToSelectedSource } from "app/redirect/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { ProfileModificationRequest } from "app/types"
+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"
@@ -49,7 +49,7 @@ export function ProfileSettings() {
             ),
             labels: { confirm: <Trans>Confirm</Trans>, cancel: <Trans>Cancel</Trans> },
             confirmProps: { color: "red" },
-            onConfirm: () => deleteProfile.execute(),
+            onConfirm: async () => await deleteProfile.execute(),
         })
 
     useEffect(() => {
@@ -77,9 +77,19 @@ export function ProfileSettings() {
 
             <form onSubmit={form.onSubmit(saveProfile.execute)}>
                 <Stack>
-                    <Input.Wrapper label={<Trans>User name</Trans>}>
-                        <Box>{profile?.name}</Box>
-                    </Input.Wrapper>
+                    <TextInput label={<Trans>User name</Trans>} readOnly value={profile?.name} />
+                    <TextInput
+                        label={<Trans>API key</Trans>}
+                        description={
+                            <Trans>
+                                This is your API key. It can be used for some read-only API operations and grants access to the Fever API.
+                                Use the form at the bottom of the page to generate a new API key
+                            </Trans>
+                        }
+                        readOnly
+                        value={profile?.apiKey}
+                    />
+
                     <Input.Wrapper
                         label={<Trans>OPML export</Trans>}
                         description={
@@ -94,6 +104,25 @@ export function ProfileSettings() {
                             </Anchor>
                         </Box>
                     </Input.Wrapper>
+
+                    <Input.Wrapper
+                        label={<Trans>Fever API</Trans>}
+                        description={
+                            <Trans>
+                                CommaFeed is compatible with the Fever API. Use the following URL in your Fever-compatible mobile client.
+                                Login with your username and your <u>API key</u>.
+                            </Trans>
+                        }
+                    >
+                        <Box>
+                            <Anchor href={`rest/fever/user/${profile?.id}`} target="_blank">
+                                <Trans>Fever API URL</Trans>
+                            </Anchor>
+                        </Box>
+                    </Input.Wrapper>
+
+                    <Divider />
+
                     <PasswordInput
                         label={<Trans>Current password</Trans>}
                         description={<Trans>Enter your current password to change profile settings</Trans>}
@@ -107,20 +136,19 @@ export function ProfileSettings() {
                         {...form.getInputProps("newPassword")}
                     />
                     <PasswordInput label={<Trans>Confirm password</Trans>} {...form.getInputProps("newPasswordConfirmation")} />
-                    <TextInput label={<Trans>API key</Trans>} readOnly value={profile?.apiKey} />
                     <Checkbox label={<Trans>Generate new API key</Trans>} {...form.getInputProps("newApiKey", { type: "checkbox" })} />
 
                     <Group>
-                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
+                        <Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
                             <Trans>Cancel</Trans>
                         </Button>
-                        <Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveProfile.loading}>
+                        <Button type="submit" leftSection={<TbDeviceFloppy size={16} />} loading={saveProfile.loading}>
                             <Trans>Save</Trans>
                         </Button>
                         <Divider orientation="vertical" />
                         <Button
                             color="red"
-                            leftIcon={<TbTrash size={16} />}
+                            leftSection={<TbTrash size={16} />}
                             onClick={() => openDeleteProfileModal()}
                             loading={deleteProfile.loading}
                         >

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

@@ -8,10 +8,10 @@ import {
     redirectToFeedDetails,
     redirectToTag,
     redirectToTagDetails,
-} from "app/slices/redirect"
-import { collapseTreeCategory } from "app/slices/tree"
+} from "app/redirect/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { Category, Subscription } from "app/types"
+import { collapseTreeCategory } from "app/tree/thunks"
+import { type Category, type Subscription } from "app/types"
 import { categoryUnreadCount, flattenCategoryTree } from "app/utils"
 import { Loader } from "components/Loader"
 import { OnDesktop } from "components/responsive/OnDesktop"
@@ -36,8 +36,11 @@ export function Tree() {
     const dispatch = useAppDispatch()
 
     const feedClicked = (e: React.MouseEvent, id: string) => {
-        if (e.detail === 2) dispatch(redirectToFeedDetails(id))
-        else dispatch(redirectToFeed(id))
+        if (e.detail === 2) {
+            dispatch(redirectToFeedDetails(id))
+        } else {
+            dispatch(redirectToFeed(id))
+        }
     }
     const categoryClicked = (e: React.MouseEvent, id: string) => {
         if (e.detail === 2) {
@@ -57,8 +60,11 @@ export function Tree() {
         )
     }
     const tagClicked = (e: React.MouseEvent, id: string) => {
-        if (e.detail === 2) dispatch(redirectToTagDetails(id))
-        else dispatch(redirectToTag(id))
+        if (e.detail === 2) {
+            dispatch(redirectToTagDetails(id))
+        } else {
+            dispatch(redirectToTag(id))
+        }
     }
 
     const allCategoryNode = () => (

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

@@ -1,6 +1,7 @@
-import { Box, createStyles } from "@mantine/core"
+import { Box, Center } from "@mantine/core"
 import { FeedFavicon } from "components/content/FeedFavicon"
-import React, { ReactNode } from "react"
+import React, { type ReactNode } from "react"
+import { tss } from "tss"
 import { UnreadCount } from "./UnreadCount"
 
 interface TreeNodeProps {
@@ -16,41 +17,55 @@ interface TreeNodeProps {
     onIconClick?: (e: React.MouseEvent, id: string) => void
 }
 
-const useStyles = createStyles((theme, props: TreeNodeProps) => {
-    let backgroundColor = "inherit"
-    if (props.selected) backgroundColor = theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
+const useStyles = tss
+    .withParams<{
+        selected: boolean
+        hasError: boolean
+        hasUnread: boolean
+    }>()
+    .create(({ theme, colorScheme, selected, hasError, hasUnread }) => {
+        let backgroundColor = "inherit"
+        if (selected) backgroundColor = colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
 
-    let color
-    if (props.hasError) color = theme.colors.red[6]
-    else if (theme.colorScheme === "dark") color = props.unread > 0 ? theme.colors.dark[0] : theme.colors.dark[3]
-    else color = props.unread > 0 ? theme.black : theme.colors.gray[6]
+        let color
+        if (hasError) {
+            color = theme.colors.red[6]
+        } else if (colorScheme === "dark") {
+            color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
+        } else {
+            color = hasUnread ? theme.black : theme.colors.gray[6]
+        }
 
-    return {
-        node: {
-            display: "flex",
-            alignItems: "center",
-            cursor: "pointer",
-            color,
-            backgroundColor,
-            "&:hover": {
-                backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
+        return {
+            node: {
+                display: "flex",
+                alignItems: "center",
+                cursor: "pointer",
+                color,
+                backgroundColor,
+                "&:hover": {
+                    backgroundColor: colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
+                },
             },
-        },
-        nodeText: {
-            flexGrow: 1,
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-        },
-    }
-})
+            nodeText: {
+                flexGrow: 1,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+            },
+        }
+    })
 
 export function TreeNode(props: TreeNodeProps) {
-    const { classes } = useStyles(props)
+    const { classes } = useStyles({
+        selected: props.selected,
+        hasError: props.hasError,
+        hasUnread: props.unread > 0,
+    })
     return (
         <Box py={1} pl={props.level * 20} className={classes.node} onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}>
-            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick && props.onIconClick(e, props.id)}>
-                {typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}
+            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)}>
+                <Center>{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}</Center>
             </Box>
             <Box className={classes.nodeText}>{props.name}</Box>
             {!props.expanded && (

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

@@ -1,9 +1,9 @@
 import { t, Trans } from "@lingui/macro"
 import { Box, Center, Kbd, TextInput } from "@mantine/core"
-import { openSpotlight, SpotlightAction, SpotlightProvider } from "@mantine/spotlight"
-import { redirectToFeed } from "app/slices/redirect"
+import { Spotlight, spotlight, type SpotlightActionData } from "@mantine/spotlight"
+import { redirectToFeed } from "app/redirect/thunks"
 import { useAppDispatch } from "app/store"
-import { Subscription } from "app/types"
+import { type Subscription } from "app/types"
 import { FeedFavicon } from "components/content/FeedFavicon"
 import { useMousetrap } from "hooks/useMousetrap"
 import { TbSearch } from "react-icons/tb"
@@ -15,17 +15,18 @@ export interface TreeSearchProps {
 export function TreeSearch(props: TreeSearchProps) {
     const dispatch = useAppDispatch()
 
-    const actions: SpotlightAction[] = props.feeds
-        .sort((f1, f2) => f1.name.localeCompare(f2.name))
+    const actions: SpotlightActionData[] = props.feeds
         .map(f => ({
-            title: f.name,
-            icon: <FeedFavicon url={f.iconUrl} />,
-            onTrigger: () => dispatch(redirectToFeed(f.id)),
+            id: `${f.id}`,
+            label: f.name,
+            leftSection: <FeedFavicon url={f.iconUrl} />,
+            onClick: async () => await dispatch(redirectToFeed(f.id)),
         }))
+        .sort((f1, f2) => f1.label.localeCompare(f2.label))
 
     const searchIcon = <TbSearch size={18} />
     const rightSection = (
-        <Center>
+        <Center style={{ cursor: "pointer" }} onClick={() => spotlight.open()}>
             <Kbd>Ctrl</Kbd>
             <Box mx={5}>+</Box>
             <Kbd>K</Kbd>
@@ -33,30 +34,35 @@ export function TreeSearch(props: TreeSearchProps) {
     )
 
     // additional keyboard shortcut used by commafeed v1
-    useMousetrap("g u", () => openSpotlight())
+    useMousetrap("g u", () => spotlight.open())
 
     return (
-        <SpotlightProvider
-            actions={actions}
-            searchIcon={searchIcon}
-            searchPlaceholder={t`Search`}
-            shortcut="ctrl+k"
-            nothingFoundMessage={<Trans>Nothing found</Trans>}
-        >
+        <>
             <TextInput
                 placeholder={t`Search`}
-                icon={searchIcon}
+                leftSection={searchIcon}
                 rightSectionWidth={100}
                 rightSection={rightSection}
                 styles={{
-                    input: { cursor: "pointer" },
-                    rightSection: { pointerEvents: "none" },
+                    input: {
+                        cursor: "pointer",
+                    },
                 }}
-                onClick={() => openSpotlight()}
+                onClick={() => spotlight.open()}
                 // prevent focus
                 onFocus={e => e.target.blur()}
                 readOnly
             />
-        </SpotlightProvider>
+            <Spotlight
+                actions={actions}
+                limit={10}
+                shortcut="ctrl+k"
+                searchProps={{
+                    leftSection: searchIcon,
+                    placeholder: t`Search`,
+                }}
+                nothingFound={<Trans>Nothing found</Trans>}
+            ></Spotlight>
+        </>
     )
 }

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

@@ -1,6 +1,7 @@
-import { Badge, createStyles } from "@mantine/core"
+import { Badge, Tooltip } from "@mantine/core"
+import { tss } from "tss"
 
-const useStyles = createStyles(() => ({
+const useStyles = tss.create(() => ({
     badge: {
         width: "3.2rem",
         // for some reason, mantine Badge has "cursor: 'default'"
@@ -13,6 +14,12 @@ export function UnreadCount(props: { unreadCount: number }) {
 
     if (props.unreadCount <= 0) return null
 
-    const count = props.unreadCount >= 1000 ? "999+" : props.unreadCount
-    return <Badge className={classes.badge}>{count}</Badge>
+    const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount
+    return (
+        <Tooltip label={props.unreadCount} disabled={props.unreadCount === count}>
+            <Badge className={classes.badge} variant="light">
+                {count}
+            </Badge>
+        </Tooltip>
+    )
 }

commafeed-client/src/hooks/useActionButton.ts

@@ -0,0 +1,9 @@
+import { useMantineTheme } from "@mantine/core"
+import { useMobile } from "hooks/useMobile"
+
+export const useActionButton = () => {
+    const theme = useMantineTheme()
+    const mobile = useMobile(theme.breakpoints.xl)
+    const spacing = mobile ? 14 : 0
+    return { mobile, spacing }
+}

commafeed-client/src/hooks/useBrowserExtension.ts

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react"
+
+export const useBrowserExtension = () => {
+    // the extension will set the "browser-extension-installed" attribute on the root element
+    const [browserExtensionVersion, setBrowserExtensionVersion] = useState(
+        document.documentElement.getAttribute("browser-extension-installed")
+    )
+
+    // monitor the attribute on the root element as it may change after the page was loaded
+    useEffect(() => {
+        const observer = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === "attributes") {
+                    const element = mutation.target as Element
+                    const version = element.getAttribute("browser-extension-installed")
+                    if (version) setBrowserExtensionVersion(version)
+                }
+            })
+        })
+
+        observer.observe(document.documentElement, {
+            attributes: true,
+        })
+
+        return () => observer.disconnect()
+    }, [])
+
+    // when not in an iframe, window.parent is a reference to window
+    const isBrowserExtensionPopup = window.parent !== window
+    const isBrowserExtensionInstalled = isBrowserExtensionPopup || !!browserExtensionVersion
+    const isBrowserExtensionInstallable = !isBrowserExtensionPopup
+
+    const w = isBrowserExtensionPopup ? window.parent : window
+    const openSettingsPage = () => w.postMessage("open-settings-page", "*")
+    const openAppInNewTab = () => w.postMessage("open-app-in-new-tab", "*")
+    const openLinkInBackgroundTab = (url: string) => {
+        if (isBrowserExtensionInstalled) {
+            w.postMessage(`open-link-in-background-tab:${url}`, "*")
+        } else {
+            // fallback to ctrl+click simulation
+            const a = document.createElement("a")
+            a.href = url
+            a.rel = "noreferrer"
+            a.dispatchEvent(
+                new MouseEvent("click", {
+                    ctrlKey: true,
+                    metaKey: true,
+                })
+            )
+        }
+    }
+    const setBadgeUnreadCount = (count: number) => w.postMessage(`set-badge-unread-count:${count}`, "*")
+
+    return {
+        browserExtensionVersion,
+        isBrowserExtensionInstallable,
+        isBrowserExtensionInstalled,
+        isBrowserExtensionPopup,
+        openSettingsPage,
+        openAppInNewTab,
+        openLinkInBackgroundTab,
+        setBadgeUnreadCount,
+    }
+}

commafeed-client/src/hooks/useColorScheme.ts

@@ -0,0 +1,20 @@
+// the color scheme to use to render components
+import { useMantineColorScheme } from "@mantine/core"
+import { useMediaQuery } from "@mantine/hooks"
+
+export const useColorScheme = () => {
+    const systemColorScheme = useMediaQuery(
+        "(prefers-color-scheme: dark)",
+        // passing undefined will use window.matchMedia(query) as default value
+        undefined,
+        {
+            // get initial value synchronously and not in useEffect to avoid flash of light theme
+            getInitialValueInEffect: false,
+        }
+    )
+        ? "dark"
+        : "light"
+
+    const { colorScheme } = useMantineColorScheme()
+    return colorScheme === "auto" ? systemColorScheme : colorScheme
+}

commafeed-client/src/hooks/useMobile.ts

@@ -0,0 +1,9 @@
+import { useMediaQuery } from "@mantine/hooks"
+import { Constants } from "app/constants"
+
+export const useMobile = (breakpoint: string | number = Constants.layout.mobileBreakpoint) => {
+    const bp = typeof breakpoint === "number" ? `${breakpoint}px` : breakpoint
+    return !useMediaQuery(`(min-width: ${bp})`, undefined, {
+        getInitialValueInEffect: false,
+    })
+}

commafeed-client/src/hooks/useMousetrap.ts

@@ -1,4 +1,4 @@
-import mousetrap, { ExtendedKeyboardEvent } from "mousetrap"
+import mousetrap, { type ExtendedKeyboardEvent } from "mousetrap"
 import { useEffect, useRef } from "react"
 
 type Callback = (e: ExtendedKeyboardEvent, combo: string) => void

commafeed-client/src/hooks/useViewMode.ts

@@ -1,4 +1,4 @@
-import { ViewMode } from "app/types"
+import { type ViewMode } from "app/types"
 import useLocalStorage from "use-local-storage"
 
 export function useViewMode() {

commafeed-client/src/hooks/useWebSocket.ts

@@ -1,24 +1,50 @@
-import { reloadTree } from "app/slices/tree"
-import { useAppDispatch } from "app/store"
+import { setWebSocketConnected } from "app/server/slice"
+import { type AppDispatch, useAppDispatch, useAppSelector } from "app/store"
+import { incrementUnreadCount } from "app/tree/slice"
 import { useEffect } from "react"
 import WebsocketHeartbeatJs from "websocket-heartbeat-js"
 
+const handleMessage = (dispatch: AppDispatch, message: string) => {
+    const parts = message.split(":")
+    const type = parts[0]
+    if (type === "new-feed-entries") {
+        dispatch(
+            incrementUnreadCount({
+                feedId: +parts[1],
+                amount: +parts[2],
+            })
+        )
+    }
+}
+
 export const useWebSocket = () => {
+    const websocketEnabled = useAppSelector(state => state.server.serverInfos?.websocketEnabled)
+    const websocketPingInterval = useAppSelector(state => state.server.serverInfos?.websocketPingInterval)
     const dispatch = useAppDispatch()
 
     useEffect(() => {
-        const currentUrl = new URL(window.location.href)
-        const wsProtocol = currentUrl.protocol === "http:" ? "ws" : "wss"
-        const wsUrl = `${wsProtocol}://${currentUrl.hostname}:${currentUrl.port}/ws`
+        let ws: WebsocketHeartbeatJs | undefined
 
-        const ws = new WebsocketHeartbeatJs({ url: wsUrl, pingMsg: "ping" })
-        ws.onmessage = event => {
-            const { data } = event
-            if (typeof data === "string") {
-                if (data.startsWith("new-feed-entries:")) dispatch(reloadTree())
+        if (websocketEnabled && websocketPingInterval) {
+            const currentUrl = new URL(window.location.href)
+            const wsProtocol = currentUrl.protocol === "http:" ? "ws" : "wss"
+            const wsUrl = `${wsProtocol}://${currentUrl.hostname}:${currentUrl.port}${currentUrl.pathname}ws`
+
+            ws = new WebsocketHeartbeatJs({
+                url: wsUrl,
+                pingMsg: "ping",
+                pingTimeout: websocketPingInterval,
+            })
+            ws.onopen = () => dispatch(setWebSocketConnected(true))
+            ws.onclose = () => dispatch(setWebSocketConnected(false))
+            ws.onmessage = event => {
+                const { data } = event
+                if (typeof data === "string") {
+                    handleMessage(dispatch, data)
+                }
             }
         }
 
-        return () => ws.close()
-    }, [dispatch])
+        return () => ws?.close()
+    }, [dispatch, websocketEnabled, websocketPingInterval])
 }

commafeed-client/src/i18n.ts

@@ -1,113 +1,59 @@
-import { i18n, Messages } from "@lingui/core"
+import { i18n, type Messages } from "@lingui/core"
 import { useAppSelector } from "app/store"
 import dayjs from "dayjs"
-import "dayjs/locale/ar"
-import "dayjs/locale/ca"
-import "dayjs/locale/cs"
-import "dayjs/locale/cy"
-import "dayjs/locale/da"
-import "dayjs/locale/de"
-import "dayjs/locale/en"
-import "dayjs/locale/es"
-import "dayjs/locale/fa"
-import "dayjs/locale/fi"
-import "dayjs/locale/fr"
-import "dayjs/locale/gl"
-import "dayjs/locale/hu"
-import "dayjs/locale/id"
-import "dayjs/locale/it"
-import "dayjs/locale/ja"
-import "dayjs/locale/ko"
-import "dayjs/locale/ms"
-import "dayjs/locale/nb"
-import "dayjs/locale/nl"
-import "dayjs/locale/nn"
-import "dayjs/locale/pl"
-import "dayjs/locale/pt"
-import "dayjs/locale/ru"
-import "dayjs/locale/sk"
-import "dayjs/locale/sv"
-import "dayjs/locale/tr"
-import "dayjs/locale/zh"
-
 import { useEffect } from "react"
-import { messages as arMessages } from "./locales/ar/messages"
-import { messages as caMessages } from "./locales/ca/messages"
-import { messages as csMessages } from "./locales/cs/messages"
-import { messages as cyMessages } from "./locales/cy/messages"
-import { messages as daMessages } from "./locales/da/messages"
-import { messages as deMessages } from "./locales/de/messages"
-import { messages as enMessages } from "./locales/en/messages"
-import { messages as esMessages } from "./locales/es/messages"
-import { messages as faMessages } from "./locales/fa/messages"
-import { messages as fiMessages } from "./locales/fi/messages"
-import { messages as frMessages } from "./locales/fr/messages"
-import { messages as glMessages } from "./locales/gl/messages"
-import { messages as huMessages } from "./locales/hu/messages"
-import { messages as idMessages } from "./locales/id/messages"
-import { messages as itMessages } from "./locales/it/messages"
-import { messages as jaMessages } from "./locales/ja/messages"
-import { messages as koMessages } from "./locales/ko/messages"
-import { messages as msMessages } from "./locales/ms/messages"
-import { messages as nbMessages } from "./locales/nb/messages"
-import { messages as nlMessages } from "./locales/nl/messages"
-import { messages as nnMessages } from "./locales/nn/messages"
-import { messages as plMessages } from "./locales/pl/messages"
-import { messages as ptMessages } from "./locales/pt/messages"
-import { messages as ruMessages } from "./locales/ru/messages"
-import { messages as skMessages } from "./locales/sk/messages"
-import { messages as svMessages } from "./locales/sv/messages"
-import { messages as trMessages } from "./locales/tr/messages"
-import { messages as zhMessages } from "./locales/zh/messages"
 
 interface Locale {
     key: string
     label: string
-    messages: Messages
+    daysjsImportFn: () => Promise<ILocale>
 }
 
 // add an object to the array to add a new locale
 // don't forget to also add it to the 'locales' array in .linguirc
 export const locales: Locale[] = [
-    { key: "ar", messages: arMessages, label: "العربية" },
-    { key: "ca", messages: caMessages, label: "Català" },
-    { key: "cs", messages: csMessages, label: "Čeština" },
-    { key: "cy", messages: cyMessages, label: "Cymraeg" },
-    { key: "da", messages: daMessages, label: "Danish" },
-    { key: "de", messages: deMessages, label: "Deutsch" },
-    { key: "en", messages: enMessages, label: "English" },
-    { key: "es", messages: esMessages, label: "Español" },
-    { key: "fa", messages: faMessages, label: "فارسی" },
-    { key: "fi", messages: fiMessages, label: "Suomi" },
-    { key: "fr", messages: frMessages, label: "Français" },
-    { key: "gl", messages: glMessages, label: "Galician" },
-    { key: "hu", messages: huMessages, label: "Magyar" },
-    { key: "id", messages: idMessages, label: "Indonesian" },
-    { key: "it", messages: itMessages, label: "Italiano" },
-    { key: "ja", messages: jaMessages, label: "日本語" },
-    { key: "ko", messages: koMessages, label: "한국어" },
-    { key: "ms", messages: msMessages, label: "Bahasa Malaysian" },
-    { key: "nb", messages: nbMessages, label: "Norsk (bokmål)" },
-    { key: "nl", messages: nlMessages, label: "Nederlands" },
-    { key: "nn", messages: nnMessages, label: "Norsk (nynorsk)" },
-    { key: "pl", messages: plMessages, label: "Polski" },
-    { key: "pt", messages: ptMessages, label: "Português" },
-    { key: "ru", messages: ruMessages, label: "Русский" },
-    { key: "sk", messages: skMessages, label: "Slovenčina" },
-    { key: "sv", messages: svMessages, label: "Svenska" },
-    { key: "tr", messages: trMessages, label: "Türkçe" },
-    { key: "zh", messages: zhMessages, label: "简体中文" },
+    { key: "ar", label: "العربية", daysjsImportFn: async () => await import("dayjs/locale/ar") },
+    { key: "ca", label: "Català", daysjsImportFn: async () => await import("dayjs/locale/ca") },
+    { key: "cs", label: "Čeština", daysjsImportFn: async () => await import("dayjs/locale/cs") },
+    { key: "cy", label: "Cymraeg", daysjsImportFn: async () => await import("dayjs/locale/cy") },
+    { key: "da", label: "Danish", daysjsImportFn: async () => await import("dayjs/locale/da") },
+    { key: "de", label: "Deutsch", daysjsImportFn: async () => await import("dayjs/locale/de") },
+    { key: "en", label: "English", daysjsImportFn: async () => await import("dayjs/locale/en") },
+    { key: "es", label: "Español", daysjsImportFn: async () => await import("dayjs/locale/es") },
+    { key: "fa", label: "فارسی", daysjsImportFn: async () => await import("dayjs/locale/fa") },
+    { key: "fi", label: "Suomi", daysjsImportFn: async () => await import("dayjs/locale/fi") },
+    { key: "fr", label: "Français", daysjsImportFn: async () => await import("dayjs/locale/fr") },
+    { key: "gl", label: "Galician", daysjsImportFn: async () => await import("dayjs/locale/gl") },
+    { key: "hu", label: "Magyar", daysjsImportFn: async () => await import("dayjs/locale/hu") },
+    { key: "id", label: "Indonesian", daysjsImportFn: async () => await import("dayjs/locale/id") },
+    { key: "it", label: "Italiano", daysjsImportFn: async () => await import("dayjs/locale/it") },
+    { key: "ja", label: "日本語", daysjsImportFn: async () => await import("dayjs/locale/ja") },
+    { key: "ko", label: "한국어", daysjsImportFn: async () => await import("dayjs/locale/ko") },
+    { key: "ms", label: "Bahasa Malaysian", daysjsImportFn: async () => await import("dayjs/locale/ms") },
+    { key: "nb", label: "Norsk (bokmål)", daysjsImportFn: async () => await import("dayjs/locale/nb") },
+    { key: "nl", label: "Nederlands", daysjsImportFn: async () => await import("dayjs/locale/nl") },
+    { key: "nn", label: "Norsk (nynorsk)", daysjsImportFn: async () => await import("dayjs/locale/nn") },
+    { key: "pl", label: "Polski", daysjsImportFn: async () => await import("dayjs/locale/pl") },
+    { key: "pt", label: "Português", daysjsImportFn: async () => await import("dayjs/locale/pt") },
+    { key: "ru", label: "Русский", daysjsImportFn: async () => await import("dayjs/locale/ru") },
+    { key: "sk", label: "Slovenčina", daysjsImportFn: async () => await import("dayjs/locale/sk") },
+    { key: "sv", label: "Svenska", daysjsImportFn: async () => await import("dayjs/locale/sv") },
+    { key: "tr", label: "Türkçe", daysjsImportFn: async () => await import("dayjs/locale/tr") },
+    { key: "zh", label: "简体中文", daysjsImportFn: async () => await import("dayjs/locale/zh") },
 ]
 
-locales.forEach(l => {
-    i18n.load({
-        [l.key]: l.messages,
-    })
-})
-
 function activateLocale(locale: string) {
-    i18n.activate(locale)
-    dayjs.locale(locale)
+    // lingui
+    import(`./locales/${locale}/messages.po`).then(data => {
+        i18n.load(locale, data.messages as Messages)
+        i18n.activate(locale)
+    })
+
+    // dayjs
+    locales
+        .find(l => l.key === locale)
+        ?.daysjsImportFn()
+        .then(() => dayjs.locale(locale))
 }
 
 export const useI18n = () => {

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

@@ -13,6 +13,10 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#: src/pages/app/AboutPage.tsx
+msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
+msgstr ""
+
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "<0>Complete syntax is available </0><1>here</1>."
 msgstr ""
@@ -21,14 +25,14 @@ msgstr ""
 msgid "<0>Have an account?</0><1>Log in!</1>"
 msgstr "<0> هل لديك حساب؟ </0> <1> تسجيل الدخول! </ 1>"
 
+#: src/pages/app/DonatePage.tsx
+msgid "<0>Hey,</0><1>I'm Jérémie from Belgium and I've been working on CommaFeed in my free time for over 10 years now. Thanks for taking an interest in helping me continue supporting CommaFeed.</1>"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "<0>Need an account?</0><1>Sign up!</1>"
 msgstr "<0> هل تحتاج إلى حساب؟ </0> <1> اشترك! </ 1>"
 
-#: src/components/settings/ProfileSettings.tsx
-msgid "API key"
-msgstr "مفتاح API"
-
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/AboutPage.tsx
 msgid "About"
@@ -63,6 +67,10 @@ msgstr "إداري"
 msgid "All"
 msgstr "الكل"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Always"
+msgstr ""
+
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "An email has been sent if this address was registered. Check your inbox."
 msgstr "تم إرسال بريد إلكتروني إذا تم تسجيل هذا العنوان. "
@@ -75,6 +83,14 @@ msgstr "ملف opml هو ملف XML يحتوي على عناوين URL للتغ
 msgid "Analyze feed"
 msgstr "تحليل التغذية"
 
+#: src/components/AnnouncementDialog.tsx
+msgid "Announcement"
+msgstr ""
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "API key"
+msgstr "مفتاح API"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 msgid "Are you sure you want to delete category <0>{categoryName}</0>?"
 msgstr "هل أنت متأكد أنك تريد حذف الفئة <0> {categoryName} </0>؟"
@@ -115,9 +131,13 @@ msgstr "العودة"
 msgid "Back to log in"
 msgstr "العودة لتسجيل الدخول"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Browser extension required for Chrome"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
-msgid "Browser extentions"
-msgstr "ملحقات المستعرض"
+msgid "Browser extention"
+msgstr ""
 
 #: src/components/admin/UserEdit.tsx
 #: src/components/content/add/AddCategory.tsx
@@ -151,17 +171,25 @@ msgstr "سيؤدي تغيير كلمة المرور إلى إنشاء مفتاح
 msgid "Check that the feed is working"
 msgstr "تأكد من عمل الخلاصة"
 
+#: src/pages/app/Layout.tsx
+msgid "Close menu"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
-msgid "CommaFeed is an open-source project. Sources are hosted on <0>GitHub</0>."
-msgstr "CommaFeed هو مشروع مفتوح المصدر. "
+msgid "CommaFeed browser extension version {browserExtensionVersion}."
+msgstr ""
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "CommaFeed is compatible with the Fever API. Use the following URL in your Fever-compatible mobile client. Login with your username and your <0>API key</0>."
+msgstr ""
 
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed next unread item"
 msgstr "CommaFeed التالي العنصر غير المقروء"
 
 #: src/pages/app/AboutPage.tsx
-msgid "CommaFeed version {version} ({revision})"
-msgstr "إصدار CommaFeed {الإصدار} ({مراجعة})"
+msgid "CommaFeed version {version} ({revision})."
+msgstr ""
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Compact"
@@ -183,10 +211,6 @@ msgstr "تأكيد كلمة المرور"
 msgid "Cozy"
 msgstr "دافئ"
 
-#: src/components/content/FeedEntryFooter.tsx
-msgid "Create tag: {query}"
-msgstr "إنشاء علامة: {استعلام}"
-
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "السيطرة"
@@ -195,6 +219,10 @@ msgstr "السيطرة"
 msgid "Current password"
 msgstr "كلمة المرور الحالية"
 
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr ""
+
 #: src/components/settings/CustomCodeSettings.tsx
 msgid "Custom CSS rules that will be applied"
 msgstr ""
@@ -203,8 +231,8 @@ msgstr ""
 msgid "Custom JS code that will be executed on page load"
 msgstr ""
 
-#: src/pages/app/SettingsPage.tsx
-msgid "Custom code"
+#: src/components/header/ProfileMenu.tsx
+msgid "Dark"
 msgstr ""
 
 #: src/pages/admin/AdminUsersPage.tsx
@@ -215,15 +243,15 @@ msgstr "تاريخ الإنشاء"
 msgid "Delete"
 msgstr "حذف"
 
-#: src/pages/app/CategoryDetailsPage.tsx
-msgid "Delete Category"
-msgstr "حذف الفئة"
-
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 msgid "Delete account"
 msgstr "حذف الحساب"
 
+#: src/pages/app/CategoryDetailsPage.tsx
+msgid "Delete Category"
+msgstr "حذف الفئة"
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Delete user"
 msgstr "حذف المستخدم"
@@ -241,6 +269,11 @@ msgstr ""
 msgid "Display"
 msgstr "عرض"
 
+#: src/components/header/ProfileMenu.tsx
+#: src/pages/app/DonatePage.tsx
+msgid "Donate"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "Download"
 msgstr "تنزيل"
@@ -295,28 +328,41 @@ msgstr "موسع"
 msgid "Export your subscriptions and categories as an OPML file that can be imported in other feed reading services"
 msgstr "قم بتصدير اشتراكاتك وفئاتك كملف OPML يمكن استيراده في خدمات قراءة الأعلاف الأخرى"
 
+#: src/components/header/Header.tsx
+#: src/pages/WelcomePage.tsx
+msgid "Extension options"
+msgstr ""
+
+#: src/components/content/add/Subscribe.tsx
+msgid "Feed name"
+msgstr "اسم الخلاصة"
+
 #: src/components/content/add/Subscribe.tsx
 #: src/components/content/add/Subscribe.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Feed URL"
 msgstr "موجز URL"
 
-#: src/components/content/add/Subscribe.tsx
-msgid "Feed name"
-msgstr "اسم الخلاصة"
-
 #: src/components/header/ProfileMenu.tsx
 msgid "Fetch all my feeds now"
 msgstr ""
 
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API"
+msgstr ""
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API URL"
+msgstr ""
+
+#: src/components/content/add/ImportOpml.tsx
+msgid "file is required"
+msgstr "الملف مطلوب"
+
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Filtering expression"
 msgstr "تصفية التعبير"
 
-#: src/pages/app/AboutPage.tsx
-msgid "For those of you who prefer bitcoin, here is the address: {bitcoinAddress}"
-msgstr ""
-
 #: src/pages/auth/LoginPage.tsx
 msgid "Forgot password?"
 msgstr "هل نسيت كلمة المرور؟"
@@ -337,17 +383,17 @@ msgstr "إنشاء مفتاح API جديد"
 msgid "Generated feed url"
 msgstr "رابط الخلاصة المولدة"
 
-#: src/pages/app/AboutPage.tsx
-msgid "Go to the API documentation."
-msgstr "انتقل إلى وثائق API."
+#: src/components/content/FeedEntryContextMenu.tsx
+msgid "Go to {0}"
+msgstr ""
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Go to the All view"
 msgstr "اذهب إلى طريقة العرض \"الكل\""
 
-#: src/components/content/FeedEntryContextMenu.tsx
-msgid "Go to {0}"
-msgstr ""
+#: src/pages/app/AboutPage.tsx
+msgid "Go to the API documentation."
+msgstr "انتقل إلى وثائق API."
 
 #: src/pages/app/AboutPage.tsx
 msgid "Goodies"
@@ -361,14 +407,14 @@ msgstr "المرجع نفسه"
 msgid "If not empty, an expression evaluating to 'true' or 'false'. If false, new entries for this feed will be marked as read automatically."
 msgstr "إذا لم يكن فارغًا ، فسيتم تقييم التعبير إلى \"صواب\" أو \"خطأ\". "
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "If the entry doesn't entirely fit on the screen"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "If you encounter an issue, please report it on the issues page of the GitHub project."
 msgstr "إذا واجهت مشكلة ، فالرجاء الإبلاغ عنها على صفحة مشكلات مشروع GitHub."
 
-#: src/pages/app/AboutPage.tsx
-msgid "If you like this project, please consider a donation to support the developer and help cover the costs of keeping this website online."
-msgstr "إذا أعجبك هذا المشروع ، فيرجى التفكير في التبرع لدعم المطور والمساعدة في تغطية تكاليف إبقاء هذا الموقع على الإنترنت."
-
 #: src/components/content/add/ImportOpml.tsx
 msgid "Import"
 msgstr "استيراد"
@@ -403,6 +449,10 @@ msgstr "التحديث الأخير"
 msgid "Last refresh message"
 msgstr "آخر رسالة تحديث"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Light"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
@@ -495,6 +545,10 @@ msgstr "الاسم"
 msgid "Navigate to a subscription by entering its name"
 msgstr "انتقل إلى اشتراك بإدخال اسمه"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "كلمة مرور جديدة"
@@ -504,6 +558,7 @@ msgid "Newest first"
 msgstr "الأحدث أولاً"
 
 #: src/components/content/add/Subscribe.tsx
+#: src/components/header/Header.tsx
 msgid "Next"
 msgstr "التالي"
 
@@ -523,27 +578,22 @@ msgstr "لا مزيد من الإدخالات"
 msgid "Nothing found"
 msgstr "لم يتم العثور على شيء"
 
-#: src/pages/app/AddPage.tsx
-msgid "OPML"
-msgstr ""
-
-#: src/components/settings/ProfileSettings.tsx
-msgid "OPML export"
-msgstr "تصدير OPML"
-
-#: src/components/content/add/ImportOpml.tsx
-#: src/components/content/add/ImportOpml.tsx
-msgid "OPML file"
-msgstr "ملف OPML"
-
 #: src/pages/app/AboutPage.tsx
 msgid "Oldest first"
 msgstr "الأقدم أولا"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr ""
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "اوووه!"
 
+#: src/components/header/Header.tsx
+msgid "Open CommaFeed"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
 msgstr "فتح الإدخال الحالي في علامة تبويب جديدة"
@@ -564,6 +614,10 @@ msgstr ""
 msgid "Open link in new tab"
 msgstr ""
 
+#: src/pages/app/Layout.tsx
+msgid "Open menu"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open next entry"
 msgstr "فتح الإدخال التالي"
@@ -576,6 +630,19 @@ msgstr "فتح الإدخال السابق"
 msgid "Open/close current entry"
 msgstr "فتح / إغلاق الإدخال الحالي"
 
+#: src/pages/app/AddPage.tsx
+msgid "OPML"
+msgstr ""
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "OPML export"
+msgstr "تصدير OPML"
+
+#: src/components/content/add/ImportOpml.tsx
+#: src/components/content/add/ImportOpml.tsx
+msgid "OPML file"
+msgstr "ملف OPML"
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "طلب"
@@ -609,14 +676,14 @@ msgstr "كلمات المرور غير متطابقة"
 msgid "Position"
 msgstr "المنـصب"
 
+#: src/components/header/Header.tsx
+msgid "Previous"
+msgstr ""
+
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
 msgstr "الملف الشخصي"
 
-#: src/pages/app/AboutPage.tsx
-msgid "REST API"
-msgstr ""
-
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Recover password"
 msgstr "استعادة كلمة السر"
@@ -630,6 +697,11 @@ msgstr "تحديث"
 msgid "Registrations are closed on this CommaFeed instance"
 msgstr "تم إغلاق التسجيلات في مثيل CommaFeed هذا"
 
+#: src/pages/app/AboutPage.tsx
+msgid "REST API"
+msgstr ""
+
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Right click"
 msgstr ""
@@ -642,10 +714,18 @@ msgstr ""
 msgid "Save"
 msgstr "حفظ"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scroll selected entry to the top of the page"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Scroll smoothly when navigating between entries"
 msgstr "قم بالتمرير بسلاسة عند التنقل بين الإدخالات"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scrolling"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/TreeSearch.tsx
@@ -669,7 +749,7 @@ msgstr "ضع التركيز على الإدخال السابق دون فتحه"
 msgid "Settings"
 msgstr "إعدادات"
 
-#: src/app/slices/user.ts
+#: src/app/user/slice.ts
 msgid "Settings saved."
 msgstr "تم حفظ الإعدادات."
 
@@ -681,11 +761,20 @@ msgstr "مشاركة"
 msgid "Sharing sites"
 msgstr "مشاركة المواقع"
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Shift"
 msgstr "الحلقة"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show CommaFeed's own context menu on right click"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show confirmation when marking all entries as read"
+msgstr ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Show entry menu (desktop)"
 msgstr ""
@@ -702,6 +791,10 @@ msgstr "إظهار موجز ويب والفئات التي لا تحتوي عل
 msgid "Show keyboard shortcut help"
 msgstr "إظهار تعليمات اختصار لوحة المفاتيح"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Show native menu (desktop)"
+msgstr ""
+
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/WelcomePage.tsx
@@ -733,30 +826,35 @@ msgstr "مميز بنجمة"
 msgid "Subscribe"
 msgstr "اشتراك"
 
-#: src/pages/app/AboutPage.tsx
-msgid "Subscribe URL"
-msgstr "عنوان URL للاشتراك"
-
 #: src/components/content/add/Subscribe.tsx
 msgid "Subscribe to the feed"
 msgstr "الاشتراك في موجز ويب"
 
+#: src/pages/app/AboutPage.tsx
+msgid "Subscribe URL"
+msgstr "عنوان URL للاشتراك"
+
 #: src/components/Alert.tsx
 msgid "Success"
 msgstr "النجاح"
 
 #: src/components/KeyboardShortcutsHelp.tsx
-msgid "Swipe header to the right"
+msgid "Swipe header to the left"
 msgstr ""
 
-#: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "التبديل إلى النسق الداكن"
 
-#: src/components/header/ProfileMenu.tsx
+#: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "قم بالتبديل إلى النسق الفاتح"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "System"
+msgstr ""
+
+#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Tags"
 msgstr "الكلمات"
@@ -769,10 +867,22 @@ msgstr "عنوان URL للتغذية التي تريد الاشتراك فيه
 msgid "Theme"
 msgstr "الموضوع"
 
+#: 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 ""
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "تبديل قراءة حالة الإدخال الحالي"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle sidebar"
+msgstr ""
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle starred status of current entry"
+msgstr ""
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "جرب CommaFeed باستخدام الحساب التجريبي: تجريبي / تجريبي"
@@ -795,15 +905,15 @@ msgstr "إلغاء النجم"
 msgid "Unsubscribe"
 msgstr "إلغاء الاشتراك"
 
+#: src/components/settings/ProfileSettings.tsx
+msgid "User name"
+msgstr "اسم المستخدم"
+
 #: src/pages/auth/LoginPage.tsx
 #: src/pages/auth/LoginPage.tsx
 msgid "User Name or E-mail"
 msgstr "اسم المستخدم أو البريد الإلكتروني"
 
-#: src/components/settings/ProfileSettings.tsx
-msgid "User name"
-msgstr "اسم المستخدم"
-
 #: src/components/Alert.tsx
 msgid "Warning"
 msgstr "تحذير"
@@ -819,11 +929,3 @@ msgstr "ليس لديك أي اشتراكات حتى الآن. "
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
 msgstr ""
-
-#: src/components/content/add/ImportOpml.tsx
-msgid "file is required"
-msgstr "الملف مطلوب"
-
-#: src/components/content/add/CategorySelect.tsx
-msgid "{0} (in {1})"
-msgstr ""