release 4.4.0

Bump the lingui group in /commafeed-client with 5 updates

.github/dependabot.yml

@@ -0,0 +1,24 @@
+version: 2
+updates:
+  - package-ecosystem: "maven"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 50
+  - package-ecosystem: "npm"
+    directory: "/commafeed-client"
+    schedule:
+      interval: "monthly"
+    open-pull-requests-limit: 50
+    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,23 +34,23 @@ 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
@@ -60,8 +60,8 @@ jobs:
             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
@@ -71,14 +71,14 @@ jobs:
       # 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' }}
+        uses: softprops/action-gh-release@v2
+        if: ${{ matrix.java == '17' && github.ref_type == 'tag' }}
         with:
           name: CommaFeed ${{ github.ref_name }}
           body: ${{ steps.changelog_reader.outputs.changes }}

.gitignore

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

CHANGELOG.md

@@ -1,5 +1,126 @@
 # Changelog
 
+## [4.4.0]
+
+- add support for sharing using the browser native capabilities if available (#1255)
+- add a button in the entry headers to star an entry (#1025)
+- add a button in the entry headers to open links in a new tab (#1333)
+- add two options in the settings to toggle those buttons
+- accept .opml file extension when importing and export with the .opml extension
+- the "mark as read" option is no longer shown in the context menu for entries that are too old to be marked as read (
+  older than `keepStatusDays`) (#1303)
+
+## [4.3.3]
+
+- fix OPML import (#1279)
+
+## [4.3.2]
+
+- added support for unix sockets (#1278)
+
+## [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
@@ -95,10 +216,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,10 +4,9 @@ EXPOSE 8082
 
 RUN mkdir -p /commafeed/data
 VOLUME /commafeed/data
-ENV CF_SESSION_PATH=/commafeed/data/sessions
-ENV CF_DATABASE_URL=jdbc:h2:/commafeed/data/db
 
 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,22 +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)
 
-## 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
@@ -44,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
@@ -76,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/.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,52 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+    },
+    extends: [
+        "eslint:recommended",
+        "standard",
+        "love",
+        "plugin:@typescript-eslint/strict-type-checked",
+        "plugin:@typescript-eslint/stylistic-type-checked",
+        "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: {
+        project: true,
+        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/restrict-template-expressions": ["error", { allowNumber: true }],
+        "@typescript-eslint/strict-boolean-expressions": "off",
+        "react/jsx-curly-brace-presence": ["error", "never"],
+        "react/no-unescaped-entities": "off",
+        "react/react-in-jsx-scope": "off",
+        "react-hooks/exhaustive-deps": "error",
+    },
+}

commafeed-client/.prettierrc

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

commafeed-client/package.json

@@ -14,72 +14,70 @@
     "i18n:extract": "lingui extract --clean"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@fontsource/open-sans": "^5.0.1",
-    "@lingui/core": "^4.1.2",
-    "@lingui/macro": "^4.1.2",
-    "@lingui/react": "^4.1.2",
-    "@mantine/core": "^6.0.11",
-    "@mantine/form": "^6.0.11",
-    "@mantine/hooks": "^6.0.11",
-    "@mantine/modals": "^6.0.11",
-    "@mantine/notifications": "^6.0.11",
-    "@mantine/spotlight": "^6.0.11",
-    "@mantine/styles": "^6.0.11",
-    "@monaco-editor/react": "^4.5.1",
-    "@reduxjs/toolkit": "^1.9.5",
-    "axios": "^1.4.0",
-    "dayjs": "^1.11.7",
+    "@emotion/react": "^11.11.4",
+    "@fontsource/open-sans": "^5.0.27",
+    "@lingui/core": "^4.10.0",
+    "@lingui/macro": "^4.10.0",
+    "@lingui/react": "^4.10.0",
+    "@mantine/core": "^7.8.0",
+    "@mantine/form": "^7.8.0",
+    "@mantine/hooks": "^7.8.0",
+    "@mantine/modals": "^7.8.0",
+    "@mantine/notifications": "^7.8.0",
+    "@mantine/spotlight": "^7.8.0",
+    "@monaco-editor/react": "^4.6.0",
+    "@reduxjs/toolkit": "^2.2.3",
+    "axios": "^1.6.8",
+    "dayjs": "^1.11.10",
     "escape-string-regexp": "^5.0.0",
     "interweave": "^13.1.0",
-    "monaco-editor": "^0.38.0",
+    "monaco-editor": "^0.47.0",
     "mousetrap": "^1.6.5",
-    "re-resizable": "^6.9.9",
     "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": "^4.8.0",
+    "react-icons": "^5.0.1",
     "react-infinite-scroller": "^1.2.6",
-    "react-redux": "^8.0.5",
-    "react-router-dom": "^6.11.2",
-    "react-swipeable": "^7.0.0",
-    "swagger-ui-react": "^4.18.3",
+    "react-redux": "^9.1.0",
+    "react-router-dom": "^6.22.3",
+    "react-swipeable": "^7.0.1",
+    "redoc": "^2.1.3",
     "throttle-debounce": "^5.0.0",
     "tinycon": "^0.6.8",
+    "tss-react": "^4.9.6",
     "use-local-storage": "^3.0.0",
-    "websocket-heartbeat-js": "^1.1.2"
+    "websocket-heartbeat-js": "^1.1.3"
   },
   "devDependencies": {
-    "@lingui/cli": "^4.1.2",
-    "@lingui/vite-plugin": "^4.1.2",
-    "@types/eslint": "^8.40.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.7",
-    "@typescript-eslint/parser": "^5.59.7",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@lingui/cli": "^4.10.0",
+    "@lingui/vite-plugin": "^4.10.0",
+    "@types/mousetrap": "^1.6.15",
+    "@types/react": "^18.2.78",
+    "@types/react-dom": "^18.2.25",
+    "@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": "^7.6.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "babel-plugin-macros": "^3.1.0",
-    "eslint": "^8.41.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.9",
+    "eslint": "^8.57.0",
+    "eslint-config-love": "^47.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.2.5",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.31.1",
-    "vitest-mock-extended": "^1.1.3"
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.5.0",
+    "vitest-mock-extended": "^1.3.1"
   }
 }

commafeed-client/pom.xml

@@ -5,7 +5,7 @@
 	<parent>
 		<groupId>com.commafeed</groupId>
 		<artifactId>commafeed</artifactId>
-		<version>3.8.1</version>
+		<version>4.4.0</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,12 +1,12 @@
 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"
@@ -29,44 +29,50 @@ 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 sidebarWidth = useAppSelector(state => state.tree.sidebarWidth)
     const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible)
 
     return (
@@ -77,7 +83,7 @@ function AppRoutes() {
             <Route path="register" element={<RegistrationPage />} />
             <Route path="passwordRecovery" element={<PasswordRecoveryPage />} />
             <Route path="api" element={<ApiDocumentationPage />} />
-            <Route path="app" element={<Layout header={<Header />} sidebar={<Tree />} sidebarWidth={sidebarVisible ? sidebarWidth : 0} />}>
+            <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 />} />
@@ -160,6 +166,40 @@ function BrowserExtensionBadgeUnreadCountHandler() {
     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()
@@ -177,6 +217,8 @@ export function App() {
                     <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,75 +1,79 @@
-import axios from "axios"
+import axios, { type AxiosError } 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 AuthenticationError,
+    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.") ||
-            (error.response.status === 403 && error.response.data === "You don't have the required role to access this resource.")
-        ) {
-            window.location.hash = "/welcome"
+        if (isAuthenticationError(error)) {
+            const data = error.response?.data
+            window.location.hash = data?.allowRegistrations ? "/welcome" : "/login"
         }
         throw error
     }
 )
 
+function isAuthenticationError(error: unknown): error is AxiosError<AuthenticationError> {
+    return axios.isAxiosError(error) && !!error.response && [401, 403].includes(error.response.status)
+}
+
 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",
                 },
@@ -77,23 +81,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"),
     },
 }
 
@@ -105,14 +109,19 @@ export const client = {
 export const errorToStrings = (err: unknown) => {
     let strings: string[] = []
 
-    if (axios.isAxiosError(err)) {
-        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.errors) strings = [...strings, ...data.errors]
-        }
+    if (axios.isAxiosError(err) && err.response) {
+        if (typeof err.response.data === "string") strings.push(err.response.data)
+        if (isMessageError(err)) strings.push(err.response.data.message)
+        if (isMessageArrayError(err)) strings = [...strings, ...err.response.data.errors]
     }
 
     return strings
 }
+
+function isMessageError(err: AxiosError): err is AxiosError<{ message: string }> {
+    return !!err.response && !!err.response.data && typeof err.response.data === "object" && "message" in err.response.data
+}
+
+function isMessageArrayError(err: AxiosError): err is AxiosError<{ errors: string[] }> {
+    return !!err.response && !!err.response.data && typeof err.response.data === "object" && "errors" in err.response.data
+}

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,28 @@ export const Constants = {
     categories,
     sharing,
     layout: {
-        mobileBreakpoint: DEFAULT_THEME.breakpoints.md,
+        mobileBreakpoint: 992,
+        mobileBreakpointName: "md",
         headerHeight: 60,
         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: {
+        headerId: "header",
+        footerId: "footer",
         entryId: (entry: Entry) => `entry-id-${entry.id}`,
         entryContextMenuId: (entry: Entry) => entry.id,
     },
+    tooltip: {
+        delay: 500,
+    },
     browserExtensionUrl: "https://github.com/Athou/commafeed-browser-extension",
     bitcoinWalletAddress: "1dymfUxqCWpyD7a6rQSqNy4rLVDBsAr5e",
 }

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

@@ -1,12 +1,11 @@
-/* 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 +77,10 @@ describe("entries", () => {
                     sourceWebsiteUrl: "",
                     entries: [{ id: "3" } as Entry],
                     hasMore: true,
+                    loading: false,
                     scrollingToEntry: false,
                 },
-            },
+            } as RootState,
         })
         const promise = store.dispatch(loadMoreEntries())
 
@@ -89,7 +89,7 @@ describe("entries", () => {
         expect(store.getState().entries.hasMore).toBe(false)
     })
 
-    it("marks an entry as read", async () => {
+    it("marks an entry as read", () => {
         const store = configureStore({
             reducer: reducers,
             preloadedState: {
@@ -102,9 +102,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 }))
@@ -115,7 +116,7 @@ describe("entries", () => {
         expect(mockClient.entry.mark).toHaveBeenCalledWith({ id: "3", read: true })
     })
 
-    it("marks all entries as read", async () => {
+    it("marks all entries as read", () => {
         const store = configureStore({
             reducer: reducers,
             preloadedState: {
@@ -128,9 +129,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,247 @@
+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", (arg, thunkApi) => {
+    const state = thunkApi.getState()
+    thunkApi.dispatch(loadEntries({ source: state.entries.source, clearSearch: false }))
+})
+export const search = createAppAsyncThunk("entries/search", (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.markable && 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", (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,
+        })
+    },
+    {
+        condition: arg => arg.entry.markable && arg.entry.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,357 +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 alwaysScrollToEntry = state.user.settings?.alwaysScrollToEntry
-            const entryEntirelyVisible = Constants.layout.isTopVisible(entryElement) && Constants.layout.isBottomVisible(entryElement)
-            if (alwaysScrollToEntry || !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) => {
-    scrollToWithCallback({
-        options: {
-            // add a small gap between the top of the content and the top of the page
-            top: entryElement.offsetTop - Constants.layout.headerHeight - 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,69 +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 redirectToApiDocumentation = createAsyncThunk("redirect/api", (_, thunkApi) => thunkApi.dispatch(redirectTo("/api")))
-
-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 redirectToDonate = createAsyncThunk("redirect/donate", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/donate")))
-export const redirectToAbout = createAsyncThunk("redirect/about", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/about")))
-
-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,177 +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 changeAlwaysScrollToEntry = createAsyncThunk<
-    void,
-    boolean,
-    {
-        state: RootState
-    }
->("settings/alwaysScrollToEntry", (alwaysScrollToEntry, thunkApi) => {
-    const { settings } = thunkApi.getState().user
-    if (!settings) return
-    client.user.saveSettings({ ...settings, alwaysScrollToEntry })
-})
-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(changeAlwaysScrollToEntry.pending, (state, action) => {
-            if (!state.settings) return
-            state.settings.alwaysScrollToEntry = 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,
-                changeAlwaysScrollToEntry.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,29 +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
-    sidebarWidth: number
     sidebarVisible: boolean
 }
 
 const initialState: TreeState = {
     mobileMenuOpen: false,
-    sidebarWidth: 350,
     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,
@@ -31,12 +23,25 @@ export const treeSlice = createSlice({
         setMobileMenuOpen: (state, action: PayloadAction<boolean>) => {
             state.mobileMenuOpen = action.payload
         },
-        setSidebarWidth: (state, action: PayloadAction<number>) => {
-            state.sidebarWidth = 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) => {
@@ -64,5 +69,4 @@ export const treeSlice = createSlice({
     },
 })
 
-export const { setMobileMenuOpen, setSidebarWidth, toggleSidebar } = 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

@@ -1,38 +1,33 @@
+export type ReadingMode = "all" | "unread"
+
+export type ReadingOrder = "asc" | "desc"
+
+export type ViewMode = "title" | "cozy" | "detailed" | "expanded"
+
+export type ScrollMode = "always" | "never" | "if_needed"
+
+export type IconDisplayMode = "always" | "never" | "on_desktop" | "on_mobile"
+
 export interface AddCategoryRequest {
     name: string
     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 Subscription {
+    id: number
+    name: string
+    message?: string
+    errorCount: number
+    lastRefresh?: number
+    nextRefresh?: number
+    feedUrl: string
+    feedLink: string
+    iconUrl: string
+    unread: number
+    categoryId?: string
+    position: number
+    newestItemTime?: number
+    filter?: string
 }
 
 export interface Category {
@@ -58,19 +53,6 @@ export interface CollapseRequest {
     collapse: boolean
 }
 
-export interface Entries {
-    name: string
-    message?: string
-    errorCount: number
-    feedLink: string
-    timestamp: number
-    hasMore: boolean
-    offset?: number
-    limit?: number
-    entries: Entry[]
-    ignoredReadStatus: boolean
-}
-
 export interface Entry {
     id: string
     guid: string
@@ -99,6 +81,19 @@ export interface Entry {
     tags: string[]
 }
 
+export interface Entries {
+    name: string
+    message?: string
+    errorCount: number
+    feedLink: string
+    timestamp: number
+    hasMore: boolean
+    offset?: number
+    limit?: number
+    entries: Entry[]
+    ignoredReadStatus: boolean
+}
+
 export interface FeedInfo {
     url: string
     title: string
@@ -145,6 +140,7 @@ export interface MarkRequest {
     id: string
     read: boolean
     olderThan?: number
+    insertedBefore?: number
     keywords?: string
     excludedSubscriptions?: number[]
 }
@@ -166,7 +162,7 @@ export interface MetricMeter {
     units: string
 }
 
-export type MetricTimer = {
+export interface MetricTimer {
     count: number
     max: number
     mean: number
@@ -187,10 +183,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,19 +218,9 @@ export interface ServerInfo {
     googleAnalyticsCode?: string
     smtpEnabled: boolean
     demoAccountEnabled: boolean
-}
-
-export interface Settings {
-    language: string
-    readingMode: ReadingMode
-    readingOrder: ReadingOrder
-    showRead: boolean
-    scrollMarks: boolean
-    customCss?: string
-    customJs?: string
-    scrollSpeed: number
-    alwaysScrollToEntry: boolean
-    sharingSettings: SharingSettings
+    websocketEnabled: boolean
+    websocketPingInterval: number
+    treeReloadInterval: number
 }
 
 export interface SharingSettings {
@@ -248,6 +234,24 @@ export interface SharingSettings {
     buffer: boolean
 }
 
+export interface Settings {
+    language: string
+    readingMode: ReadingMode
+    readingOrder: ReadingOrder
+    showRead: boolean
+    scrollMarks: boolean
+    customCss?: string
+    customJs?: string
+    scrollSpeed: number
+    scrollMode: ScrollMode
+    starIconDisplayMode: IconDisplayMode
+    externalLinkIconDisplayMode: IconDisplayMode
+    markAllAsReadConfirmation: boolean
+    customContextMenu: boolean
+    mobileFooter: boolean
+    sharingSettings: SharingSettings
+}
+
 export interface StarRequest {
     id: string
     feedId: number
@@ -260,34 +264,11 @@ export interface SubscribeRequest {
     categoryId?: string
 }
 
-export interface Subscription {
-    id: number
-    name: string
-    message?: string
-    errorCount: number
-    lastRefresh?: number
-    nextRefresh?: number
-    feedUrl: string
-    feedLink: string
-    iconUrl: string
-    unread: number
-    categoryId?: string
-    position: number
-    newestItemTime?: number
-    filter?: string
-}
-
 export interface TagRequest {
     entryId: number
     tags: string[]
 }
 
-export interface UnreadCount {
-    feedId?: number
-    unreadCount?: number
-    newestItemTime?: number
-}
-
 export interface UserModel {
     id: number
     name: string
@@ -300,10 +281,16 @@ 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 interface AuthenticationError {
+    message: string
+    allowRegistrations: boolean
+}

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

@@ -0,0 +1,120 @@
+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,
+    changeExternalLinkIconDisplayMode,
+    changeLanguage,
+    changeMarkAllAsReadConfirmation,
+    changeMobileFooter,
+    changeReadingMode,
+    changeReadingOrder,
+    changeScrollMarks,
+    changeScrollMode,
+    changeScrollSpeed,
+    changeSharingSetting,
+    changeShowRead,
+    changeStarIconDisplayMode,
+    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(changeStarIconDisplayMode.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.starIconDisplayMode = action.meta.arg
+        })
+        builder.addCase(changeExternalLinkIconDisplayMode.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.externalLinkIconDisplayMode = action.meta.arg
+        })
+        builder.addCase(changeMarkAllAsReadConfirmation.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.markAllAsReadConfirmation = action.meta.arg
+        })
+        builder.addCase(changeCustomContextMenu.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.customContextMenu = action.meta.arg
+        })
+        builder.addCase(changeMobileFooter.pending, (state, action) => {
+            if (!state.settings) return
+            state.settings.mobileFooter = action.meta.arg
+        })
+        builder.addCase(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,
+                changeStarIconDisplayMode.fulfilled,
+                changeExternalLinkIconDisplayMode.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,99 @@
+import { createAppAsyncThunk } from "app/async-thunk"
+import { client } from "app/client"
+import { reloadEntries } from "app/entries/thunks"
+import type { IconDisplayMode, ReadingMode, ReadingOrder, ScrollMode, SharingSettings } from "app/types"
+
+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 changeStarIconDisplayMode = createAppAsyncThunk(
+    "settings/starIconDisplayMode",
+    (starIconDisplayMode: IconDisplayMode, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({ ...settings, starIconDisplayMode })
+    }
+)
+export const changeExternalLinkIconDisplayMode = createAppAsyncThunk(
+    "settings/externalLinkIconDisplayMode",
+    (externalLinkIconDisplayMode: IconDisplayMode, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({ ...settings, externalLinkIconDisplayMode })
+    }
+)
+export const changeMarkAllAsReadConfirmation = createAppAsyncThunk(
+    "settings/markAllAsReadConfirmation",
+    (markAllAsReadConfirmation: boolean, thunkApi) => {
+        const { settings } = thunkApi.getState().user
+        if (!settings) return
+        client.user.saveSettings({ ...settings, markAllAsReadConfirmation })
+    }
+)
+export const changeCustomContextMenu = createAppAsyncThunk("settings/customContextMenu", (customContextMenu: boolean, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, customContextMenu })
+})
+export const changeMobileFooter = createAppAsyncThunk("settings/mobileFooter", (mobileFooter: boolean, thunkApi) => {
+    const { settings } = thunkApi.getState().user
+    if (!settings) return
+    client.user.saveSettings({ ...settings, mobileFooter })
+})
+export const 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,5 +1,5 @@
 import { throttle } from "throttle-debounce"
-import { Category } from "./types"
+import { type Category } from "./types"
 
 export function visitCategoryTree(category: Category, visitor: (category: Category) => void): void {
     visitor(category)

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

@@ -1,15 +1,15 @@
-import { ActionIcon, Button, Tooltip, useMantineTheme } from "@mantine/core"
-import { ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon"
-import { ButtonProps } from "@mantine/core/lib/Button/Button"
+import { ActionIcon, Button, type ButtonVariant, Tooltip, useMantineTheme } from "@mantine/core"
+import { type ActionIconVariant } from "@mantine/core/lib/components/ActionIcon/ActionIcon"
+import { Constants } from "app/constants"
 import { useActionButton } from "hooks/useActionButton"
-import { forwardRef, MouseEventHandler, ReactNode } from "react"
+import { forwardRef, type MouseEventHandler, type ReactNode } from "react"
 
 interface ActionButtonProps {
     className?: string
     icon?: ReactNode
     label: ReactNode
     onClick?: MouseEventHandler
-    variant?: ActionIconProps["variant"] & ButtonProps["variant"]
+    variant?: ActionIconVariant & ButtonVariant
     hideLabelOnDesktop?: boolean
     showLabelOnMobile?: boolean
 }
@@ -23,13 +23,13 @@ export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((pr
     const variant = props.variant ?? "subtle"
     const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
     return iconOnly ? (
-        <Tooltip label={props.label} openDelay={500}>
+        <Tooltip label={props.label} openDelay={Constants.tooltip.delay}>
             <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} leftIcon={props.icon} onClick={props.onClick}>
+        <Button ref={ref} variant={variant} size="xs" className={props.className} leftSection={props.icon} onClick={props.onClick}>
             {props.label}
         </Button>
     )

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

@@ -4,64 +4,64 @@ import { Constants } from "app/constants"
 
 export function KeyboardShortcutsHelp() {
     return (
-        <Stack spacing="xs">
+        <Stack gap="xs">
             <Table striped highlightOnHover>
-                <tbody>
-                    <tr>
-                        <td>
+                <Table.Tbody>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Refresh</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>R</Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Open next entry</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>J</Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Open previous entry</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>K</Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Set focus on next entry without opening it</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>N</Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Set focus on previous entry without opening it</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>P</Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Move the page down</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>
                                 <Trans>Space</Trans>
                             </Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Move the page up</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>
                                 <Trans>Shift</Trans>
                             </Kbd>
@@ -69,77 +69,85 @@ export function KeyboardShortcutsHelp() {
                             <Kbd>
                                 <Trans>Space</Trans>
                             </Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Open/close current entry</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>O</Kbd>
                             <span>, </span>
                             <Kbd>
                                 <Trans>Enter</Trans>
                             </Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Open current entry in a new tab</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>V</Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Open current entry in a new tab in the background</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>B</Kbd>
                             <span>*, </span>
                             <Kbd>
                                 <Trans>Middle click</Trans>
                             </Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Toggle read status of current entry</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>M</Kbd>
                             <span>, </span>
-                            <Trans>Swipe header to the right</Trans>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                            <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>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>
                                 <Trans>Shift</Trans>
                             </Kbd>
                             <span> + </span>
                             <Kbd>A</Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Go to the All view</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>G</Kbd>
                             <span> </span>
                             <Kbd>A</Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Navigate to a subscription by entering its name</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>
                                 <Trans>Ctrl</Trans>
                             </Kbd>
@@ -149,45 +157,59 @@ export function KeyboardShortcutsHelp() {
                             <Kbd>G</Kbd>
                             <span> </span>
                             <Kbd>U</Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Show entry menu (desktop)</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>
                                 <Trans>Right click</Trans>
                             </Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </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>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>
                                 <Trans>Long press</Trans>
                             </Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Toggle sidebar</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>F</Kbd>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
                             <Trans>Show keyboard shortcut help</Trans>
-                        </td>
-                        <td>
+                        </Table.Td>
+                        <Table.Td>
                             <Kbd>?</Kbd>
-                        </td>
-                    </tr>
-                </tbody>
+                        </Table.Td>
+                    </Table.Tr>
+                </Table.Tbody>
             </Table>
             <Box>
                 <span>* </span>

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,5 +1,6 @@
 import { Trans } from "@lingui/macro"
 import { Tooltip } from "@mantine/core"
+import { Constants } from "app/constants"
 import dayjs from "dayjs"
 import { useEffect, useState } from "react"
 
@@ -13,7 +14,7 @@ export function RelativeDate(props: { date: Date | number | undefined }) {
     if (!props.date) return <Trans>N/A</Trans>
     const date = dayjs(props.date)
     return (
-        <Tooltip label={date.toDate().toLocaleString()} openDelay={500}>
+        <Tooltip label={date.toDate().toLocaleString()} openDelay={Constants.tooltip.delay}>
             <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

@@ -1,12 +1,12 @@
 import { Input, Textarea } from "@mantine/core"
 import RichCodeEditor from "components/code/RichCodeEditor"
 import { useMobile } from "hooks/useMobile"
-import { ReactNode } from "react"
+import { type ReactNode } from "react"
 
 interface CodeEditorProps {
     description?: ReactNode
     language: "css" | "javascript"
-    value: string
+    value?: string
     onChange: (value: string | undefined) => void
 }
 

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

@@ -1,5 +1,5 @@
-import { useMantineTheme } from "@mantine/core"
 import { Loader } from "components/Loader"
+import { useColorScheme } from "hooks/useColorScheme"
 import { useAsync } from "react-async-hook"
 
 const init = async () => {
@@ -27,13 +27,13 @@ const init = async () => {
 interface RichCodeEditorProps {
     height: number | string
     language: "css" | "javascript"
-    value: string
+    value?: string
     onChange: (value: string | undefined) => void
 }
 
 function RichCodeEditor(props: RichCodeEditorProps) {
-    const theme = useMantineTheme()
-    const editorTheme = theme.colorScheme === "dark" ? "vs-dark" : "light"
+    const colorScheme = useColorScheme()
+    const editorTheme = colorScheme === "dark" ? "vs-dark" : "light"
 
     const { result: Editor } = useAsync(init, [])
     if (!Editor) return <Loader />

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,22 +1,25 @@
-import { Box, createStyles, Mark, TypographyStylesProvider } from "@mantine/core"
+import { Box, Mark } 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 escapeStringRegexp from "escape-string-regexp"
-import { ChildrenNode, Interweave, Matcher, MatchResponse, Node, TransformCallback } from "interweave"
+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%",
@@ -61,7 +64,7 @@ const transform: TransformCallback = node => {
 }
 
 class HighlightMatcher extends Matcher {
-    private search: string
+    private readonly search: string
 
     constructor(search: string) {
         super("highlight")
@@ -73,12 +76,10 @@ 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 {
+    replaceWith(children: ChildrenNode): Node {
         return <Mark>{children}</Mark>
     }
 
-    // eslint-disable-next-line class-methods-use-this
     asTag(): string {
         return "span"
     }
@@ -90,12 +91,13 @@ const Content = React.memo((props: ContentProps) => {
     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,10 +11,11 @@ import {
     selectEntry,
     selectNextEntry,
     selectPreviousEntry,
-} from "app/slices/entries"
-import { redirectToRootCategory } from "app/slices/redirect"
-import { toggleSidebar } from "app/slices/tree"
+    starEntry,
+} from "app/entries/thunks"
+import { redirectToRootCategory } from "app/redirect/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
+import { toggleSidebar } from "app/tree/slice"
 import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
 import { Loader } from "components/Loader"
 import { useBrowserExtension } from "hooks/useBrowserExtension"
@@ -31,9 +33,11 @@ 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 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()
@@ -62,6 +66,8 @@ export function FeedEntries() {
 
     const contextMenu = useContextMenu()
     const headerRightClicked = (entry: ExpendableEntry, event: React.MouseEvent) => {
+        if (event.shiftKey || !customContextMenu) return
+
         event.preventDefault()
         contextMenu.show({
             id: Constants.dom.entryContextMenuId(entry),
@@ -85,7 +91,7 @@ export function FeedEntries() {
         )
     }
 
-    const swipedRight = (entry: ExpendableEntry) => dispatch(markEntry({ entry, read: !entry.read }))
+    const swipedLeft = async (entry: ExpendableEntry) => await dispatch(markEntry({ entry, read: !entry.read }))
 
     // close context menu on scroll
     useEffect(() => {
@@ -122,42 +128,50 @@ export function FeedEntries() {
         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) {
@@ -252,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(
@@ -260,12 +279,13 @@ 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({
@@ -275,14 +295,14 @@ export function FeedEntries() {
         })
     )
 
-    if (!entries) return <Loader />
     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} />}
+            loader={<Box key={0}>{loading && <Loader />}</Box>}
         >
             {entries.map(entry => (
                 <div
@@ -300,7 +320,7 @@ export function FeedEntries() {
                         onHeaderClick={event => headerClicked(entry, event)}
                         onHeaderRightClick={event => headerRightClicked(entry, event)}
                         onBodyClick={() => bodyClicked(entry)}
-                        onSwipedRight={() => swipedRight(entry)}
+                        onSwipedLeft={async () => await swipedLeft(entry)}
                     />
                 </div>
             ))}

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

@@ -1,15 +1,17 @@
-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 { Entry, ViewMode } from "app/types"
+import { useAppSelector } from "app/store"
+import { type Entry, type ViewMode } from "app/types"
+import { FeedEntryCompactHeader } from "components/content/header/FeedEntryCompactHeader"
+import { FeedEntryHeader } from "components/content/header/FeedEntryHeader"
+import { useMobile } from "hooks/useMobile"
 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 } from "./FeedEntryContextMenu"
 import { FeedEntryFooter } from "./FeedEntryFooter"
-import { FeedEntryHeader } from "./FeedEntryHeader"
 
 interface FeedEntryProps {
     entry: Entry
@@ -20,88 +22,113 @@ interface FeedEntryProps {
     onHeaderClick: (e: React.MouseEvent) => void
     onHeaderRightClick: (e: React.MouseEvent) => void
     onBodyClick: (e: React.MouseEvent) => void
-    onSwipedRight: () => 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]
+        }
 
-    let paperBorderLeftColor
-    if (props.showSelectionIndicator) {
-        const borderLeftColor = theme.colorScheme === "dark" ? theme.colors.orange[4] : theme.colors.orange[6]
-        paperBorderLeftColor = `${borderLeftColor} !important`
-    }
+        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,
-            [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: {
-                marginTop: mobileMarginY,
-                marginBottom: mobileMarginY,
-            },
-            "@media (hover: hover)": {
-                "&:hover": {
-                    backgroundColor: backgroundHoverColor,
+        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: {
-            direction: props.entry.rtl ? "rtl" : "ltr",
-            maxWidth: props.maxWidth ?? "100%",
-        },
-    }
-})
+            headerLink: {
+                color: "inherit",
+                textDecoration: "none",
+            },
+            body: {
+                direction: rtl ? "rtl" : "ltr",
+                maxWidth: maxWidth ?? "100%",
+            },
+        }
+    })
 
 export function FeedEntry(props: FeedEntryProps) {
     const { viewMode } = useViewMode()
-    const { classes, cx } = useStyles({ ...props, viewMode })
-
-    const swipeHandlers = useSwipeable({
-        onSwipedRight: props.onSwipedRight,
+    const { classes, cx } = useStyles({
+        read: props.entry.read,
+        expanded: props.expanded,
+        viewMode,
+        rtl: props.entry.rtl,
+        showSelectionIndicator: props.showSelectionIndicator,
+        maxWidth: props.maxWidth,
     })
 
-    let paddingX: MantineNumberSize = "xs"
+    const externalLinkDisplayMode = useAppSelector(state => state.user.settings?.externalLinkIconDisplayMode)
+    const starIconDisplayMode = useAppSelector(state => state.user.settings?.starIconDisplayMode)
+    const mobile = useMobile()
+
+    const showExternalLinkIcon =
+        externalLinkDisplayMode && ["always", mobile ? "on_mobile" : "on_desktop"].includes(externalLinkDisplayMode)
+    const showStarIcon =
+        props.entry.markable && starIconDisplayMode && ["always", mobile ? "on_mobile" : "on_desktop"].includes(starIconDisplayMode)
+
+    const swipeHandlers = useSwipeable({
+        onSwipedLeft: props.onSwipedLeft,
+    })
+
+    let paddingX: MantineSpacing = "xs"
     if (viewMode === "title" || viewMode === "cozy") paddingX = 6
 
-    let paddingY: MantineNumberSize = "xs"
+    let paddingY: MantineSpacing = "xs"
     if (viewMode === "title") {
         paddingY = 4
     } else if (viewMode === "cozy") {
         paddingY = 8
     }
 
-    let borderRadius: MantineNumberSize = "sm"
+    let borderRadius: MantineRadius = "sm"
     if (viewMode === "title") {
         borderRadius = 0
     } else if (viewMode === "cozy") {
@@ -131,8 +158,21 @@ export function FeedEntry(props: FeedEntryProps) {
                 onContextMenu={props.onHeaderRightClick}
             >
                 <Box px={paddingX} py={paddingY} {...swipeHandlers}>
-                    {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
-                    {!compactHeader && <FeedEntryHeader entry={props.entry} expanded={props.expanded} />}
+                    {compactHeader && (
+                        <FeedEntryCompactHeader
+                            entry={props.entry}
+                            showStarIcon={showStarIcon}
+                            showExternalLinkIcon={showExternalLinkIcon}
+                        />
+                    )}
+                    {!compactHeader && (
+                        <FeedEntryHeader
+                            entry={props.entry}
+                            expanded={props.expanded}
+                            showStarIcon={showStarIcon}
+                            showExternalLinkIcon={showExternalLinkIcon}
+                        />
+                    )}
                 </Box>
             </a>
             {props.expanded && (

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

@@ -1,6 +1,6 @@
 import { Box } from "@mantine/core"
 import { useAppSelector } from "app/store"
-import { Entry } from "app/types"
+import { type Entry } from "app/types"
 import { Content } from "./Content"
 import { Enclosure } from "./Enclosure"
 import { Media } from "./Media"

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

@@ -1,58 +0,0 @@
-import { Box, createStyles, Text } from "@mantine/core"
-import { Entry } from "app/types"
-import { RelativeDate } from "components/RelativeDate"
-import { OnDesktop } from "components/responsive/OnDesktop"
-import { FeedEntryTitle } from "./FeedEntryTitle"
-import { FeedFavicon } from "./FeedFavicon"
-
-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",
-    },
-}))
-export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
-    const { classes } = useStyles(props)
-    return (
-        <Box className={classes.wrapper}>
-            <Box>
-                <FeedFavicon url={props.entry.iconUrl} />
-            </Box>
-            <OnDesktop>
-                <Text color="dimmed" className={classes.feedName}>
-                    {props.entry.feedName}
-                </Text>
-            </OnDesktop>
-            <Box className={classes.title}>
-                <FeedEntryTitle entry={props.entry} />
-            </Box>
-            <OnDesktop>
-                <Text color="dimmed" className={classes.date}>
-                    <RelativeDate date={props.entry.date} />
-                </Text>
-            </OnDesktop>
-        </Box>
-    )
-}

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

@@ -1,40 +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 { 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 { 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`,
     },
 }))
 
 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={Constants.dom.entryContextMenuId(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")
@@ -60,19 +61,21 @@ 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 }))}>
-                <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))}>
+            {props.entry.markable && (
+                <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={async () => await dispatch(markEntriesUpToEntry(props.entry))}>
                 <Group>
                     <TbArrowBarToDown size={iconSize} />
                     <Trans>Mark as read up to here</Trans>

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

@@ -1,8 +1,8 @@
 import { t, Trans } from "@lingui/macro"
-import { Group, Indicator, MultiSelect, Popover } from "@mantine/core"
-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 { type Entry } from "app/types"
 import { ActionButton } from "components/ActionButton"
 import { useActionButton } from "hooks/useActionButton"
 import { useMobile } from "hooks/useMobile"
@@ -14,17 +14,20 @@ interface FeedEntryFooterProps {
 }
 
 export function FeedEntryFooter(props: FeedEntryFooterProps) {
-    const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const tags = useAppSelector(state => state.user.tags)
     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,
@@ -32,8 +35,8 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
         )
 
     return (
-        <Group position="apart">
-            <Group spacing={spacing}>
+        <Group justify="space-between">
+            <Group gap={spacing}>
                 {props.entry.markable && (
                     <ActionButton
                         icon={props.entry.read ? <TbEyeOff size={18} /> : <TbEyeCheck size={18} />}
@@ -44,37 +47,41 @@ 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" closeOnClickOutside={!mobile}>
-                        <Popover.Target>
-                            <ActionButton icon={<TbShare size={18} />} label={<Trans>Share</Trans>} />
-                        </Popover.Target>
-                        <Popover.Dropdown>
-                            <ShareButtons url={props.entry.url} description={props.entry.title} />
-                        </Popover.Dropdown>
-                    </Popover>
-                )}
+                <Popover withArrow withinPortal shadow="md" closeOnClickOutside={!mobile}>
+                    <Popover.Target>
+                        <ActionButton icon={<TbShare size={18} />} label={<Trans>Share</Trans>} />
+                    </Popover.Target>
+                    <Popover.Dropdown>
+                        <ShareButtons url={props.entry.url} description={props.entry.title} />
+                    </Popover.Dropdown>
+                </Popover>
 
                 {tags && (
-                    <Popover withArrow withinPortal shadow="md" 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>
@@ -88,7 +95,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
             <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,60 +0,0 @@
-import { Box, createStyles, Text } from "@mantine/core"
-import { Entry } from "app/types"
-import { RelativeDate } from "components/RelativeDate"
-import { FeedEntryTitle } from "./FeedEntryTitle"
-import { FeedFavicon } from "./FeedFavicon"
-
-export interface FeedEntryHeaderProps {
-    entry: Entry
-    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",
-    },
-}))
-export function FeedEntryHeader(props: FeedEntryHeaderProps) {
-    const { classes } = useStyles(props)
-    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>
-            </Box>
-            {props.expanded && (
-                <Box className={classes.headerSubtext}>
-                    <Text color="dimmed">
-                        {props.entry.author && <span>by {props.entry.author}</span>}
-                        {props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}
-                        {props.entry.categories && <span>{props.entry.categories}</span>}
-                    </Text>
-                </Box>
-            )}
-        </Box>
-    )
-}

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,55 +1,113 @@
-import { ActionIcon, Box, createStyles, SimpleGrid } from "@mantine/core"
+import { Trans } from "@lingui/macro"
+import { ActionIcon, Box, CopyButton, Divider, 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 { useBrowserExtension } from "hooks/useBrowserExtension"
+import { useMobile } from "hooks/useMobile"
+import { type IconType } from "react-icons"
+import { TbCheck, TbCopy, TbDeviceDesktopShare, TbDeviceMobileShare } from "react-icons/tb"
+import { tss } from "tss"
 
 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 }) => ({
+        icon: {
+            color,
+            backgroundColor: colorScheme === "dark" ? theme.colors.gray[2] : "white",
+        },
+    }))
 
-function ShareButton({ url, icon, color }: { url: string; icon: IconType; color: Color }) {
-    const { classes } = useStyles({ color })
+function ShareButton({ icon, color, onClick }: { icon: IconType; color: Color; onClick: () => void }) {
+    const { classes } = useStyles({
+        color,
+    })
 
-    const onClick = (e: React.MouseEvent) => {
-        e.preventDefault()
+    return (
+        <ActionIcon variant="transparent" radius="xl" size={32}>
+            <Box p={6} className={classes.icon} onClick={onClick}>
+                {icon({ size: 18 })}
+            </Box>
+        </ActionIcon>
+    )
+}
+
+function SiteShareButton({ url, icon, color }: { icon: IconType; color: Color; url: string }) {
+    const onClick = () => {
         window.open(url, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=800,height=600")
     }
 
+    return <ShareButton icon={icon} color={color} onClick={onClick} />
+}
+
+function CopyUrlButton({ url }: { url: string }) {
     return (
-        <ActionIcon>
-            <a href={url} target="_blank" rel="noreferrer" onClick={onClick}>
-                <Box p={6} className={classes.socialIcon}>
-                    {icon({ size: 18 })}
-                </Box>
-            </a>
-        </ActionIcon>
+        <CopyButton value={url}>
+            {({ copied, copy }) => <ShareButton icon={copied ? TbCheck : TbCopy} color="#000" onClick={copy} />}
+        </CopyButton>
+    )
+}
+
+function BrowserNativeShareButton({ url, description }: { url: string; description: string }) {
+    const mobile = useMobile()
+    const { isBrowserExtensionPopup } = useBrowserExtension()
+    const onClick = () => {
+        navigator.share({
+            title: description,
+            url,
+        })
+    }
+
+    return (
+        <ShareButton
+            icon={mobile && !isBrowserExtensionPopup ? TbDeviceMobileShare : TbDeviceDesktopShare}
+            color="#000"
+            onClick={onClick}
+        />
     )
 }
 
 export function ShareButtons(props: { url: string; description: string }) {
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
+    const enabledSharingSites = (Object.keys(Constants.sharing) as Array<keyof SharingSettings>).filter(site => sharingSettings?.[site])
     const url = encodeURIComponent(props.url)
     const desc = encodeURIComponent(props.description)
+    const clipboardAvailable = typeof navigator.clipboard !== "undefined"
+    const nativeSharingAvailable = typeof navigator.share !== "undefined"
+    const showNativeSection = clipboardAvailable || nativeSharingAvailable
+    const showSharingSites = enabledSharingSites.length > 0
+    const showDivider = showNativeSection && showSharingSites
+    const showNoSharingOptionsAvailable = !showNativeSection && !showSharingSites
 
     return (
-        <SimpleGrid cols={4}>
-            {(Object.keys(Constants.sharing) as Array<keyof SharingSettings>)
-                .filter(site => sharingSettings && sharingSettings[site])
-                .map(site => (
-                    <ShareButton
-                        key={site}
-                        icon={Constants.sharing[site].icon}
-                        color={Constants.sharing[site].color}
-                        url={Constants.sharing[site].url(url, desc)}
-                    />
-                ))}
-        </SimpleGrid>
+        <>
+            {showNativeSection && (
+                <SimpleGrid cols={4}>
+                    {clipboardAvailable && <CopyUrlButton url={props.url} />}
+                    {nativeSharingAvailable && <BrowserNativeShareButton url={props.url} description={props.description} />}
+                </SimpleGrid>
+            )}
+
+            {showDivider && <Divider my="xs" />}
+
+            {showSharingSites && (
+                <SimpleGrid cols={4}>
+                    {enabledSharingSites.map(site => (
+                        <SiteShareButton
+                            key={site}
+                            icon={Constants.sharing[site].icon}
+                            color={Constants.sharing[site].color}
+                            url={Constants.sharing[site].url(url, desc)}
+                        />
+                    ))}
+                </SimpleGrid>
+            )}
+
+            {showNoSharingOptionsAvailable && <Trans>No sharing options available.</Trans>}
+        </>
     )
 }

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

@@ -1,10 +1,10 @@
 import { t, Trans } from "@lingui/macro"
 import { Box, Button, FileInput, Group, Stack } from "@mantine/core"
-import { useForm } from "@mantine/form"
+import { isNotEmpty, 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"
@@ -14,7 +14,7 @@ export function ImportOpml() {
 
     const form = useForm<{ file: File }>({
         validate: {
-            file: v => (v ? null : t`file is required`),
+            file: isNotEmpty(t`OPML file is required`),
         },
     })
 
@@ -33,10 +33,11 @@ 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>}
+                        leftSection={<TbFileImport />}
                         placeholder={t`OPML file`}
                         description={
                             <Trans>
@@ -46,13 +47,13 @@ export function ImportOpml() {
                         }
                         {...form.getInputProps("file")}
                         required
-                        accept="application/xml"
+                        accept=".xml,.opml"
                     />
-                    <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/content/header/FeedEntryCompactHeader.tsx

@@ -0,0 +1,72 @@
+import { Box, Text } from "@mantine/core"
+import { type Entry } from "app/types"
+import { FeedFavicon } from "components/content/FeedFavicon"
+import { OpenExternalLink } from "components/content/header/OpenExternalLink"
+import { Star } from "components/content/header/Star"
+import { RelativeDate } from "components/RelativeDate"
+import { OnDesktop } from "components/responsive/OnDesktop"
+import { tss } from "tss"
+import { FeedEntryTitle } from "./FeedEntryTitle"
+
+export interface FeedEntryHeaderProps {
+    entry: Entry
+    showStarIcon?: boolean
+    showExternalLinkIcon?: boolean
+}
+
+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({
+        read: props.entry.read,
+    })
+    return (
+        <Box className={classes.wrapper}>
+            {props.showStarIcon && <Star entry={props.entry} />}
+            <Box>
+                <FeedFavicon url={props.entry.iconUrl} />
+            </Box>
+            <OnDesktop>
+                <Text c="dimmed" className={classes.feedName}>
+                    {props.entry.feedName}
+                </Text>
+            </OnDesktop>
+            <Box className={classes.title}>
+                <FeedEntryTitle entry={props.entry} />
+            </Box>
+            <OnDesktop>
+                <Text c="dimmed" className={classes.date}>
+                    <RelativeDate date={props.entry.date} />
+                </Text>
+            </OnDesktop>
+            {props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
+        </Box>
+    )
+}

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

@@ -0,0 +1,67 @@
+import { Box, Flex, Space, Text } from "@mantine/core"
+import { type Entry } from "app/types"
+import { FeedFavicon } from "components/content/FeedFavicon"
+import { OpenExternalLink } from "components/content/header/OpenExternalLink"
+import { Star } from "components/content/header/Star"
+import { RelativeDate } from "components/RelativeDate"
+import { tss } from "tss"
+import { FeedEntryTitle } from "./FeedEntryTitle"
+
+export interface FeedEntryHeaderProps {
+    entry: Entry
+    expanded: boolean
+    showStarIcon?: boolean
+    showExternalLinkIcon?: boolean
+}
+
+const useStyles = tss
+    .withParams<{
+        read: boolean
+    }>()
+    .create(({ colorScheme, read }) => ({
+        main: {
+            fontWeight: colorScheme === "light" && !read ? "bold" : "inherit",
+        },
+        details: {
+            fontSize: "90%",
+        },
+    }))
+
+export function FeedEntryHeader(props: FeedEntryHeaderProps) {
+    const { classes } = useStyles({
+        read: props.entry.read,
+    })
+    return (
+        <Box>
+            <Flex align="flex-start" justify="space-between">
+                <Flex align="flex-start" className={classes.main}>
+                    {props.showStarIcon && (
+                        <Box ml={-5}>
+                            <Star entry={props.entry} />
+                        </Box>
+                    )}
+                    <FeedEntryTitle entry={props.entry} />
+                </Flex>
+                {props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
+            </Flex>
+            <Flex align="center" className={classes.details}>
+                <FeedFavicon url={props.entry.iconUrl} />
+                <Space w={6} />
+                <Text c="dimmed">
+                    {props.entry.feedName}
+                    <span> · </span>
+                    <RelativeDate date={props.entry.date} />
+                </Text>
+            </Flex>
+            {props.expanded && (
+                <Box className={classes.details}>
+                    <Text c="dimmed">
+                        {props.entry.author && <span>by {props.entry.author}</span>}
+                        {props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}
+                        {props.entry.categories && <span>{props.entry.categories}</span>}
+                    </Text>
+                </Box>
+            )}
+        </Box>
+    )
+}

commafeed-client/src/components/content/header/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/header/OpenExternalLink.tsx

@@ -0,0 +1,30 @@
+import { Trans } from "@lingui/macro"
+import { ActionIcon, Anchor, Tooltip } from "@mantine/core"
+import { Constants } from "app/constants"
+import { markEntry } from "app/entries/thunks"
+import { useAppDispatch } from "app/store"
+import { type Entry } from "app/types"
+import { TbExternalLink } from "react-icons/tb"
+
+export function OpenExternalLink(props: { entry: Entry }) {
+    const dispatch = useAppDispatch()
+    const onClick = (e: React.MouseEvent) => {
+        e.stopPropagation()
+        dispatch(
+            markEntry({
+                entry: props.entry,
+                read: true,
+            })
+        )
+    }
+
+    return (
+        <Anchor href={props.entry.url} target="_blank" rel="noreferrer" onClick={onClick}>
+            <Tooltip label={<Trans>Open link</Trans>} openDelay={Constants.tooltip.delay}>
+                <ActionIcon variant="transparent" c="dimmed">
+                    <TbExternalLink size={18} />
+                </ActionIcon>
+            </Tooltip>
+        </Anchor>
+    )
+}

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

@@ -0,0 +1,29 @@
+import { Trans } from "@lingui/macro"
+import { ActionIcon, Tooltip } from "@mantine/core"
+import { Constants } from "app/constants"
+import { starEntry } from "app/entries/thunks"
+import { useAppDispatch } from "app/store"
+import type { Entry } from "app/types"
+import { TbStar, TbStarFilled } from "react-icons/tb"
+
+export function Star(props: { entry: Entry }) {
+    const dispatch = useAppDispatch()
+    const onClick = (e: React.MouseEvent) => {
+        e.stopPropagation()
+        e.preventDefault()
+        dispatch(
+            starEntry({
+                entry: props.entry,
+                starred: !props.entry.starred,
+            })
+        )
+    }
+
+    return (
+        <Tooltip label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>} openDelay={Constants.tooltip.delay}>
+            <ActionIcon variant="transparent" onClick={onClick}>
+                {props.entry.starred ? <TbStarFilled size={18} /> : <TbStar size={18} />}
+            </ActionIcon>
+        </Tooltip>
+    )
+}

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

@@ -1,9 +1,9 @@
 import { t, Trans } from "@lingui/macro"
-import { ActionIcon, Box, Center, Divider, Group, 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, selectNextEntry, selectPreviousEntry } 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 { changeReadingMode, changeReadingOrder } from "app/user/thunks"
 import { ActionButton } from "components/ActionButton"
 import { Loader } from "components/Loader"
 import { useActionButton } from "hooks/useActionButton"
@@ -22,7 +22,6 @@ import {
     TbSortAscending,
     TbSortDescending,
     TbUser,
-    TbX,
 } from "react-icons/tb"
 import { MarkAllAsReadButton } from "./MarkAllAsReadButton"
 import { ProfileMenu } from "./ProfileMenu"
@@ -37,7 +36,7 @@ function HeaderToolbar(props: { children: React.ReactNode }) {
     return mobile ? (
         // on mobile use all available width
         <Box
-            sx={{
+            style={{
                 width: "100%",
                 display: "flex",
                 justifyContent: "space-between",
@@ -46,7 +45,7 @@ function HeaderToolbar(props: { children: React.ReactNode }) {
             {props.children}
         </Box>
     ) : (
-        <Group spacing={spacing}>{props.children}</Group>
+        <Group gap={spacing}>{props.children}</Group>
     )
 }
 
@@ -77,11 +76,11 @@ export function Header() {
         <Center>
             <HeaderToolbar>
                 <ActionButton
-                    icon={<TbArrowDown size={iconSize} />}
-                    label={<Trans>Next</Trans>}
-                    onClick={() =>
-                        dispatch(
-                            selectNextEntry({
+                    icon={<TbArrowUp size={iconSize} />}
+                    label={<Trans>Previous</Trans>}
+                    onClick={async () =>
+                        await dispatch(
+                            selectPreviousEntry({
                                 expand: true,
                                 markAsRead: true,
                                 scrollToEntry: true,
@@ -90,11 +89,11 @@ export function Header() {
                     }
                 />
                 <ActionButton
-                    icon={<TbArrowUp size={iconSize} />}
-                    label={<Trans>Previous</Trans>}
-                    onClick={() =>
-                        dispatch(
-                            selectPreviousEntry({
+                    icon={<TbArrowDown size={iconSize} />}
+                    label={<Trans>Next</Trans>}
+                    onClick={async () =>
+                        await dispatch(
+                            selectNextEntry({
                                 expand: true,
                                 markAsRead: true,
                                 scrollToEntry: true,
@@ -108,7 +107,7 @@ export function Header() {
                 <ActionButton
                     icon={<TbRefresh size={iconSize} />}
                     label={<Trans>Refresh</Trans>}
-                    onClick={() => dispatch(reloadEntries())}
+                    onClick={async () => await dispatch(reloadEntries())}
                 />
                 <MarkAllAsReadButton iconSize={iconSize} />
 
@@ -117,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" ? <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>
@@ -132,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>

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

@@ -1,7 +1,7 @@
 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/ActionButton"
 import { useState } from "react"
@@ -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,12 +1,21 @@
 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, redirectToDonate, 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,
@@ -19,6 +28,7 @@ import {
     TbPower,
     TbSettings,
     TbSun,
+    TbSunMoon,
     TbUsers,
     TbWorldDownload,
 } from "react-icons/tb"
@@ -27,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>} />,
     },
 ]
 
@@ -86,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"
@@ -99,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)
@@ -108,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",
@@ -128,9 +137,14 @@ export function ProfileMenu(props: ProfileMenuProps) {
                 <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 />
 
@@ -153,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)
@@ -162,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)
@@ -176,7 +190,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                 <Divider />
 
                 <Menu.Item
-                    icon={<TbHeartFilled size={iconSize} color="red" />}
+                    leftSection={<TbHeartFilled size={iconSize} color="red" />}
                     onClick={() => {
                         dispatch(redirectToDonate())
                         setOpened(false)
@@ -186,7 +200,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                 </Menu.Item>
 
                 <Menu.Item
-                    icon={<TbHelp size={iconSize} />}
+                    leftSection={<TbHelp size={iconSize} />}
                     onClick={() => {
                         dispatch(redirectToAbout())
                         setOpened(false)
@@ -194,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/settings/CustomCodeSettings.tsx

@@ -2,7 +2,7 @@ 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/slices/redirect"
+import { redirectToSelectedSource } from "app/redirect/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { Alert } from "components/Alert"
 import { CodeEditor } from "components/code/CodeEditor"
@@ -69,10 +69,10 @@ export function CustomCodeSettings() {
                     />
 
                     <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={saveCustomCode.loading}>
+                        <Button type="submit" leftSection={<TbDeviceFloppy size={16} />} loading={saveCustomCode.loading}>
                             <Trans>Save</Trans>
                         </Button>
                     </Group>

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

@@ -1,27 +1,64 @@
-import { Trans } from "@lingui/macro"
-import { Divider, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
+import { t, Trans } from "@lingui/macro"
+import { Divider, Group, Radio, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
+import { type ComboboxData } from "@mantine/core/lib/components/Combobox/Combobox.types"
 import { Constants } from "app/constants"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { type IconDisplayMode, type ScrollMode, type SharingSettings } from "app/types"
 import {
-    changeAlwaysScrollToEntry,
+    changeCustomContextMenu,
+    changeExternalLinkIconDisplayMode,
     changeLanguage,
+    changeMarkAllAsReadConfirmation,
+    changeMobileFooter,
     changeScrollMarks,
+    changeScrollMode,
     changeScrollSpeed,
     changeSharingSetting,
     changeShowRead,
-} from "app/slices/user"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { SharingSettings } from "app/types"
+    changeStarIconDisplayMode,
+} 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 alwaysScrollToEntry = useAppSelector(state => state.user.settings?.alwaysScrollToEntry)
+    const scrollMode = useAppSelector(state => state.user.settings?.scrollMode)
+    const starIconDisplayMode = useAppSelector(state => state.user.settings?.starIconDisplayMode)
+    const externalLinkIconDisplayMode = useAppSelector(state => state.user.settings?.externalLinkIconDisplayMode)
+    const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
+    const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
+    const mobileFooter = useAppSelector(state => state.user.settings?.mobileFooter)
     const 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>,
+    }
+
+    const displayModeData: ComboboxData = [
+        {
+            value: "always",
+            label: t`Always`,
+        },
+        {
+            value: "on_desktop",
+            label: t`On desktop`,
+        },
+        {
+            value: "on_mobile",
+            label: t`On mobile`,
+        },
+        {
+            value: "never",
+            label: t`Never`,
+        },
+    ]
+
     return (
         <Stack>
             <Select
@@ -31,31 +68,73 @@ 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))}
-            />
-
-            <Switch
-                label={<Trans>Always scroll selected entry to the top of the page, even if it fits entirely on screen</Trans>}
-                checked={alwaysScrollToEntry}
-                onChange={e => dispatch(changeAlwaysScrollToEntry(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>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>Entry headers</Trans>} labelPosition="center" />
+
+            <Select
+                description={<Trans>Show star icon</Trans>}
+                value={starIconDisplayMode}
+                data={displayModeData}
+                onChange={async s => await dispatch(changeStarIconDisplayMode(s as IconDisplayMode))}
+            />
+
+            <Select
+                description={<Trans>Show external link icon</Trans>}
+                value={externalLinkIconDisplayMode}
+                data={displayModeData}
+                onChange={async s => await dispatch(changeExternalLinkIconDisplayMode(s as IconDisplayMode))}
+            />
+
+            <Switch
+                label={<Trans>Show CommaFeed's own context menu on right click</Trans>}
+                checked={customContextMenu}
+                onChange={async e => await dispatch(changeCustomContextMenu(e.currentTarget.checked))}
+            />
+
+            <Divider label={<Trans>Scrolling</Trans>} labelPosition="center" />
+
+            <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" />
@@ -65,8 +144,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,11 +77,18 @@ 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>API key</Trans>} readOnly value={profile?.apiKey} />
+                    <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>}
@@ -92,12 +99,28 @@ export function ProfileSettings() {
                         }
                     >
                         <Box>
-                            <Anchor href="rest/feed/export" download="commafeed_opml.xml">
+                            <Anchor href="rest/feed/export" download="commafeed.opml">
                                 <Trans>Download</Trans>
                             </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
@@ -116,16 +139,16 @@ export function ProfileSettings() {
                     <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, Center, 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,40 +17,54 @@ 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)}>
+            <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>

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,8 @@
-import { Badge, createStyles } from "@mantine/core"
+import { Badge, Tooltip } from "@mantine/core"
+import { Constants } from "app/constants"
+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 +15,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} openDelay={Constants.tooltip.delay}>
+            <Badge className={classes.badge} variant="light">
+                {count}
+            </Badge>
+        </Tooltip>
+    )
 }

commafeed-client/src/hooks/useBrowserExtension.ts

@@ -49,7 +49,7 @@ export const useBrowserExtension = () => {
             )
         }
     }
-    const setBadgeUnreadCount = (count: number) => w.postMessage(`set-badge-unread-count:${count}`, "*")
+    const setBadgeUnreadCount = (count: number | string) => w.postMessage(`set-badge-unread-count:${count}`, "*")
 
     return {
         browserExtensionVersion,

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

@@ -1,4 +1,9 @@
 import { useMediaQuery } from "@mantine/hooks"
 import { Constants } from "app/constants"
 
-export const useMobile = (breakpoint: string = Constants.layout.mobileBreakpoint) => !useMediaQuery(`(min-width: ${breakpoint})`)
+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,49 @@
-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 => {
+                if (typeof event.data === "string") {
+                    handleMessage(dispatch, event.data)
+                }
             }
         }
 
-        return () => ws.close()
-    }, [dispatch])
+        return () => ws?.close()
+    }, [dispatch, websocketEnabled, websocketPingInterval])
 }

commafeed-client/src/i18n.ts

@@ -1,4 +1,4 @@
-import { i18n } from "@lingui/core"
+import { i18n, type Messages } from "@lingui/core"
 import { useAppSelector } from "app/store"
 import dayjs from "dayjs"
 import { useEffect } from "react"
@@ -6,45 +6,45 @@ import { useEffect } from "react"
 interface Locale {
     key: string
     label: string
-    daysjsImportFn: () => Promise<ILocale>
+    dayjsImportFn: () => 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", label: "العربية", daysjsImportFn: () => import("dayjs/locale/ar") },
-    { key: "ca", label: "Català", daysjsImportFn: () => import("dayjs/locale/ca") },
-    { key: "cs", label: "Čeština", daysjsImportFn: () => import("dayjs/locale/cs") },
-    { key: "cy", label: "Cymraeg", daysjsImportFn: () => import("dayjs/locale/cy") },
-    { key: "da", label: "Danish", daysjsImportFn: () => import("dayjs/locale/da") },
-    { key: "de", label: "Deutsch", daysjsImportFn: () => import("dayjs/locale/de") },
-    { key: "en", label: "English", daysjsImportFn: () => import("dayjs/locale/en") },
-    { key: "es", label: "Español", daysjsImportFn: () => import("dayjs/locale/es") },
-    { key: "fa", label: "فارسی", daysjsImportFn: () => import("dayjs/locale/fa") },
-    { key: "fi", label: "Suomi", daysjsImportFn: () => import("dayjs/locale/fi") },
-    { key: "fr", label: "Français", daysjsImportFn: () => import("dayjs/locale/fr") },
-    { key: "gl", label: "Galician", daysjsImportFn: () => import("dayjs/locale/gl") },
-    { key: "hu", label: "Magyar", daysjsImportFn: () => import("dayjs/locale/hu") },
-    { key: "id", label: "Indonesian", daysjsImportFn: () => import("dayjs/locale/id") },
-    { key: "it", label: "Italiano", daysjsImportFn: () => import("dayjs/locale/it") },
-    { key: "ja", label: "日本語", daysjsImportFn: () => import("dayjs/locale/ja") },
-    { key: "ko", label: "한국어", daysjsImportFn: () => import("dayjs/locale/ko") },
-    { key: "ms", label: "Bahasa Malaysian", daysjsImportFn: () => import("dayjs/locale/ms") },
-    { key: "nb", label: "Norsk (bokmål)", daysjsImportFn: () => import("dayjs/locale/nb") },
-    { key: "nl", label: "Nederlands", daysjsImportFn: () => import("dayjs/locale/nl") },
-    { key: "nn", label: "Norsk (nynorsk)", daysjsImportFn: () => import("dayjs/locale/nn") },
-    { key: "pl", label: "Polski", daysjsImportFn: () => import("dayjs/locale/pl") },
-    { key: "pt", label: "Português", daysjsImportFn: () => import("dayjs/locale/pt") },
-    { key: "ru", label: "Русский", daysjsImportFn: () => import("dayjs/locale/ru") },
-    { key: "sk", label: "Slovenčina", daysjsImportFn: () => import("dayjs/locale/sk") },
-    { key: "sv", label: "Svenska", daysjsImportFn: () => import("dayjs/locale/sv") },
-    { key: "tr", label: "Türkçe", daysjsImportFn: () => import("dayjs/locale/tr") },
-    { key: "zh", label: "简体中文", daysjsImportFn: () => import("dayjs/locale/zh") },
+    { key: "ar", label: "العربية", dayjsImportFn: async () => await import("dayjs/locale/ar") },
+    { key: "ca", label: "Català", dayjsImportFn: async () => await import("dayjs/locale/ca") },
+    { key: "cs", label: "Čeština", dayjsImportFn: async () => await import("dayjs/locale/cs") },
+    { key: "cy", label: "Cymraeg", dayjsImportFn: async () => await import("dayjs/locale/cy") },
+    { key: "da", label: "Danish", dayjsImportFn: async () => await import("dayjs/locale/da") },
+    { key: "de", label: "Deutsch", dayjsImportFn: async () => await import("dayjs/locale/de") },
+    { key: "en", label: "English", dayjsImportFn: async () => await import("dayjs/locale/en") },
+    { key: "es", label: "Español", dayjsImportFn: async () => await import("dayjs/locale/es") },
+    { key: "fa", label: "فارسی", dayjsImportFn: async () => await import("dayjs/locale/fa") },
+    { key: "fi", label: "Suomi", dayjsImportFn: async () => await import("dayjs/locale/fi") },
+    { key: "fr", label: "Français", dayjsImportFn: async () => await import("dayjs/locale/fr") },
+    { key: "gl", label: "Galician", dayjsImportFn: async () => await import("dayjs/locale/gl") },
+    { key: "hu", label: "Magyar", dayjsImportFn: async () => await import("dayjs/locale/hu") },
+    { key: "id", label: "Indonesian", dayjsImportFn: async () => await import("dayjs/locale/id") },
+    { key: "it", label: "Italiano", dayjsImportFn: async () => await import("dayjs/locale/it") },
+    { key: "ja", label: "日本語", dayjsImportFn: async () => await import("dayjs/locale/ja") },
+    { key: "ko", label: "한국어", dayjsImportFn: async () => await import("dayjs/locale/ko") },
+    { key: "ms", label: "Bahasa Malaysian", dayjsImportFn: async () => await import("dayjs/locale/ms") },
+    { key: "nb", label: "Norsk (bokmål)", dayjsImportFn: async () => await import("dayjs/locale/nb") },
+    { key: "nl", label: "Nederlands", dayjsImportFn: async () => await import("dayjs/locale/nl") },
+    { key: "nn", label: "Norsk (nynorsk)", dayjsImportFn: async () => await import("dayjs/locale/nn") },
+    { key: "pl", label: "Polski", dayjsImportFn: async () => await import("dayjs/locale/pl") },
+    { key: "pt", label: "Português", dayjsImportFn: async () => await import("dayjs/locale/pt") },
+    { key: "ru", label: "Русский", dayjsImportFn: async () => await import("dayjs/locale/ru") },
+    { key: "sk", label: "Slovenčina", dayjsImportFn: async () => await import("dayjs/locale/sk") },
+    { key: "sv", label: "Svenska", dayjsImportFn: async () => await import("dayjs/locale/sv") },
+    { key: "tr", label: "Türkçe", dayjsImportFn: async () => await import("dayjs/locale/tr") },
+    { key: "zh", label: "简体中文", dayjsImportFn: async () => await import("dayjs/locale/zh") },
 ]
 
 function activateLocale(locale: string) {
     // lingui
-    import(`./locales/${locale}/messages.po`).then(data => {
+    import(`./locales/${locale}/messages.po`).then((data: { messages: Messages }) => {
         i18n.load(locale, data.messages)
         i18n.activate(locale)
     })
@@ -52,7 +52,7 @@ function activateLocale(locale: string) {
     // dayjs
     locales
         .find(l => l.key === locale)
-        ?.daysjsImportFn()
+        ?.dayjsImportFn()
         .then(() => dayjs.locale(locale))
 }
 

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

@@ -13,10 +13,6 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/components/content/add/CategorySelect.tsx
-msgid "{0} (in {1})"
-msgstr ""
-
 #: src/pages/app/AboutPage.tsx
 msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
 msgstr ""
@@ -72,7 +68,8 @@ msgid "All"
 msgstr "الكل"
 
 #: src/components/settings/DisplaySettings.tsx
-msgid "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
+#: src/components/settings/DisplaySettings.tsx
+msgid "Always"
 msgstr ""
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
@@ -87,6 +84,10 @@ 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"
@@ -171,10 +172,18 @@ 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 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 التالي العنصر غير المقروء"
@@ -203,10 +212,6 @@ msgstr "تأكيد كلمة المرور"
 msgid "Cozy"
 msgstr "دافئ"
 
-#: src/components/content/FeedEntryFooter.tsx
-msgid "Create tag: {query}"
-msgstr "إنشاء علامة: {استعلام}"
-
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "السيطرة"
@@ -227,6 +232,10 @@ msgstr ""
 msgid "Custom JS code that will be executed on page load"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Dark"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "تاريخ الإنشاء"
@@ -304,6 +313,10 @@ msgstr "دخول"
 msgid "Enter your current password to change profile settings"
 msgstr "أدخل كلمة المرور الحالية لتغيير إعدادات ملف التعريف"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Entry headers"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Error"
 msgstr "خطأ"
@@ -339,9 +352,13 @@ msgstr "موجز URL"
 msgid "Fetch all my feeds now"
 msgstr ""
 
-#: src/components/content/add/ImportOpml.tsx
-msgid "file is required"
-msgstr "الملف مطلوب"
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API"
+msgstr ""
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API URL"
+msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Filtering expression"
@@ -391,6 +408,10 @@ 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."
@@ -429,6 +450,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
@@ -521,6 +546,11 @@ msgstr "الاسم"
 msgid "Navigate to a subscription by entering its name"
 msgstr "انتقل إلى اشتراك بإدخال اسمه"
 
+#: src/components/settings/DisplaySettings.tsx
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "كلمة مرور جديدة"
@@ -546,6 +576,10 @@ msgstr "اختصار العنصر غير المقروء التالي"
 msgid "No more entries"
 msgstr "لا مزيد من الإدخالات"
 
+#: src/components/content/ShareButtons.tsx
+msgid "No sharing options available."
+msgstr ""
+
 #: src/components/sidebar/TreeSearch.tsx
 msgid "Nothing found"
 msgstr "لم يتم العثور على شيء"
@@ -554,6 +588,18 @@ msgstr "لم يتم العثور على شيء"
 msgid "Oldest first"
 msgstr "الأقدم أولا"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On desktop"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile"
+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 "اوووه!"
@@ -571,6 +617,7 @@ msgid "Open current entry in a new tab in the background"
 msgstr "فتح الإدخال الحالي في علامة تبويب جديدة في الخلفية"
 
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/OpenExternalLink.tsx
 msgid "Open link"
 msgstr "افتح الرابط"
 
@@ -582,6 +629,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 "فتح الإدخال التالي"
@@ -607,6 +658,10 @@ msgstr "تصدير OPML"
 msgid "OPML file"
 msgstr "ملف OPML"
 
+#: src/components/content/add/ImportOpml.tsx
+msgid "OPML file is required"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "طلب"
@@ -665,6 +720,7 @@ msgstr "تم إغلاق التسجيلات في مثيل CommaFeed هذا"
 msgid "REST API"
 msgstr ""
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Right click"
 msgstr ""
@@ -677,10 +733,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
@@ -704,7 +768,7 @@ msgstr "ضع التركيز على الإدخال السابق دون فتحه"
 msgid "Settings"
 msgstr "إعدادات"
 
-#: src/app/slices/user.ts
+#: src/app/user/slice.ts
 msgid "Settings saved."
 msgstr "تم حفظ الإعدادات."
 
@@ -716,11 +780,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 ""
@@ -729,6 +802,10 @@ msgstr ""
 msgid "Show entry menu (mobile)"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show external link icon"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show feeds and categories with no unread entries"
 msgstr "إظهار موجز ويب والفئات التي لا تحتوي على إدخالات غير مقروءة"
@@ -737,6 +814,14 @@ msgstr "إظهار موجز ويب والفئات التي لا تحتوي عل
 msgid "Show keyboard shortcut help"
 msgstr "إظهار تعليمات اختصار لوحة المفاتيح"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Show native menu (desktop)"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show star icon"
+msgstr ""
+
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/WelcomePage.tsx
@@ -754,6 +839,7 @@ msgstr "فضاء"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Star"
 msgstr "النجم"
 
@@ -781,19 +867,22 @@ 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 "الكلمات"
@@ -806,6 +895,10 @@ 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 "تبديل قراءة حالة الإدخال الحالي"
@@ -814,6 +907,10 @@ msgstr "تبديل قراءة حالة الإدخال الحالي"
 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 باستخدام الحساب التجريبي: تجريبي / تجريبي"
@@ -828,6 +925,7 @@ msgstr "غير مقروءة"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Unstar"
 msgstr "إلغاء النجم"
 

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

@@ -13,17 +13,13 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/components/content/add/CategorySelect.tsx
-msgid "{0} (in {1})"
-msgstr ""
-
 #: src/pages/app/AboutPage.tsx
 msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
-msgstr ""
+msgstr "<0>CommaFeed és un projecte de codi obert. El codi font està allotjat a </0><1>GitHub</1>."
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "<0>Complete syntax is available </0><1>here</1>."
-msgstr ""
+msgstr "<0>La sintaxi completa està disponible </0><1>aquí</1>."
 
 #: src/pages/auth/RegistrationPage.tsx
 msgid "<0>Have an account?</0><1>Log in!</1>"
@@ -31,7 +27,7 @@ msgstr "<0>Teniu un compte?</0><1>Inicieu la sessió!</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 ""
+msgstr "<0>Ei,</0><1> sóc la Jérémie de Bèlgica i fa més de 10 anys que treballo a CommaFeed en el meu temps lliure. Gràcies per interessar-te i ajudar-me a continuar donant suport a CommaFeed.</1>"
 
 #: src/pages/auth/LoginPage.tsx
 msgid "<0>Need an account?</0><1>Sign up!</1>"
@@ -72,8 +68,9 @@ msgid "All"
 msgstr "Tot"
 
 #: src/components/settings/DisplaySettings.tsx
-msgid "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
-msgstr ""
+#: src/components/settings/DisplaySettings.tsx
+msgid "Always"
+msgstr "Sempre"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "An email has been sent if this address was registered. Check your inbox."
@@ -87,6 +84,10 @@ msgstr "Un fitxer opml és un fitxer XML que conté URL i categories de canals.
 msgid "Analyze feed"
 msgstr "Analitzar el feed"
 
+#: src/components/AnnouncementDialog.tsx
+msgid "Announcement"
+msgstr "Anunci"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
 msgstr "clau API"
@@ -117,7 +118,7 @@ msgstr "Estàs segur que vols cancel·lar la subscripció a <0>{feedName}</0>?"
 
 #: src/components/header/Header.tsx
 msgid "Asc"
-msgstr ""
+msgstr "Asc"
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Available variables are 'title', 'content', 'url' 'author' and 'categories' and their content is converted to lower case to ease string comparison."
@@ -133,11 +134,11 @@ msgstr "Tornar a iniciar sessió"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Browser extension required for Chrome"
-msgstr ""
+msgstr "Extensió del navegador necessària per a Chrome"
 
 #: src/pages/app/AboutPage.tsx
 msgid "Browser extention"
-msgstr ""
+msgstr "Extensió del navegador"
 
 #: src/components/admin/UserEdit.tsx
 #: src/components/content/add/AddCategory.tsx
@@ -171,9 +172,17 @@ msgstr "Canviar la contrasenya generarà una nova clau d'API"
 msgid "Check that the feed is working"
 msgstr "Comproveu que el canal funciona"
 
+#: src/pages/app/Layout.tsx
+msgid "Close menu"
+msgstr "Tanca el menu"
+
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed browser extension version {browserExtensionVersion}."
-msgstr ""
+msgstr "Versió de l'extensió del navegador CommaFeed {browserExtensionVersion}."
+
+#: 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 "CommaFeed és compatible amb l'API Fever. Utilitzeu l'URL següent al vostre client mòbil compatible amb Fever. Inicieu sessió amb el vostre nom d'usuari i la vostra <0>clau API</0>."
 
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed next unread item"
@@ -181,7 +190,7 @@ msgstr "CommaFeed següent element no llegit"
 
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed version {version} ({revision})."
-msgstr ""
+msgstr "CommaFeed versió {version} ({version})."
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Compact"
@@ -193,7 +202,7 @@ msgstr "Compacte"
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Confirm"
-msgstr "Confirmar"
+msgstr "Confirma"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "Confirm password"
@@ -203,13 +212,9 @@ msgstr "Confirmeu la contrasenya"
 msgid "Cozy"
 msgstr "Acollidor"
 
-#: src/components/content/FeedEntryFooter.tsx
-msgid "Create tag: {query}"
-msgstr "Crea una etiqueta: {consulta}"
-
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
-msgstr ""
+msgstr "Ctrl"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "Current password"
@@ -217,15 +222,19 @@ msgstr "Contrasenya actual"
 
 #: src/pages/app/SettingsPage.tsx
 msgid "Custom code"
-msgstr ""
+msgstr "Codi personalitzat"
 
 #: src/components/settings/CustomCodeSettings.tsx
 msgid "Custom CSS rules that will be applied"
-msgstr ""
+msgstr "Regles CSS personalitzades que s'aplicaran"
 
 #: src/components/settings/CustomCodeSettings.tsx
 msgid "Custom JS code that will be executed on page load"
-msgstr ""
+msgstr "Codi JS personalitzat que s'executarà en carregar la pàgina"
+
+#: src/components/header/ProfileMenu.tsx
+msgid "Dark"
+msgstr "Fosc"
 
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
@@ -250,11 +259,11 @@ msgstr "Suprimeix l'usuari"
 
 #: src/components/header/Header.tsx
 msgid "Desc"
-msgstr ""
+msgstr "Desc"
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Detailed"
-msgstr ""
+msgstr "Detallat"
 
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
@@ -264,7 +273,7 @@ msgstr "Mostra"
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/DonatePage.tsx
 msgid "Donate"
-msgstr ""
+msgstr "Donar"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "Download"
@@ -304,9 +313,13 @@ msgstr "Entra"
 msgid "Enter your current password to change profile settings"
 msgstr "introduïu la vostra contrasenya actual per canviar la configuració del perfil"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Entry headers"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Error"
-msgstr ""
+msgstr "Error"
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Example: {example}."
@@ -323,7 +336,7 @@ msgstr "exporteu les vostres subscripcions i categories com a fitxer OPML que es
 #: src/components/header/Header.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Extension options"
-msgstr ""
+msgstr "Opcions de l'extensió"
 
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
@@ -337,11 +350,15 @@ msgstr "URL del canal"
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Fetch all my feeds now"
+msgstr "Carrega tots els meus feeds ara"
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API"
 msgstr ""
 
-#: src/components/content/add/ImportOpml.tsx
-msgid "file is required"
-msgstr "el fitxer és necessari"
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API URL"
+msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Filtering expression"
@@ -369,7 +386,7 @@ msgstr "URL del feed generat"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Go to {0}"
-msgstr ""
+msgstr "Vés a {0}"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Go to the All view"
@@ -385,12 +402,16 @@ msgstr "Bones"
 
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Id"
-msgstr ""
+msgstr "Id"
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "If not empty, an expression evaluating to 'true' or 'false'. If false, new entries for this feed will be marked as read automatically."
 msgstr "Si no està buida, una expressió que s'avalua com a \"vertader\" o \"fals\". "
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "If the entry doesn't entirely fit on the screen"
+msgstr "Si l'entrada no encaixa del tot a la pantalla"
+
 #: src/pages/app/AboutPage.tsx
 msgid "If you encounter an issue, please report it on the issues page of the GitHub project."
 msgstr "Si trobeu un problema, informeu-lo a la pàgina de problemes del projecte GitHub."
@@ -429,6 +450,10 @@ msgstr "Última actualització"
 msgid "Last refresh message"
 msgstr "últim missatge d'actualització"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Light"
+msgstr "Clar"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
@@ -495,7 +520,7 @@ msgstr "mètriques"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Middle click"
-msgstr ""
+msgstr "Clic central"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Move the page down"
@@ -521,6 +546,11 @@ msgstr "Nom"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Navegueu a una subscripció introduint-ne el nom"
 
+#: src/components/settings/DisplaySettings.tsx
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr "Mai"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "Contrasenya nova"
@@ -546,6 +576,10 @@ msgstr "Següent marcador d'elements no llegit"
 msgid "No more entries"
 msgstr "No hi ha més entrades"
 
+#: src/components/content/ShareButtons.tsx
+msgid "No sharing options available."
+msgstr ""
+
 #: src/components/sidebar/TreeSearch.tsx
 msgid "Nothing found"
 msgstr "No s'ha trobat res"
@@ -554,13 +588,25 @@ msgstr "No s'ha trobat res"
 msgid "Oldest first"
 msgstr "el més vell primer"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On desktop"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr "Al mòbil, mostra els botons d'acció a la part inferior de la pantalla"
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Vaja!"
 
 #: src/components/header/Header.tsx
 msgid "Open CommaFeed"
-msgstr ""
+msgstr "Obre CommaFeed"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
@@ -571,16 +617,21 @@ msgid "Open current entry in a new tab in the background"
 msgstr "Obre l'entrada actual en una pestanya nova al fons"
 
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/OpenExternalLink.tsx
 msgid "Open link"
-msgstr "Enllaç obert"
+msgstr "Obre l'enllaç obert"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Open link in new background tab"
-msgstr ""
+msgstr "Obre l'enllaç a una pestanya de fons nova"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Open link in new tab"
-msgstr ""
+msgstr "Obre l'enllaç en una pestanya nova"
+
+#: src/pages/app/Layout.tsx
+msgid "Open menu"
+msgstr "Obre el menú"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open next entry"
@@ -596,7 +647,7 @@ msgstr "Obrir/tancar l'entrada actual"
 
 #: src/pages/app/AddPage.tsx
 msgid "OPML"
-msgstr ""
+msgstr "OPML"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "OPML export"
@@ -607,6 +658,10 @@ msgstr "Exportació OPML"
 msgid "OPML file"
 msgstr "Fitxer OPML"
 
+#: src/components/content/add/ImportOpml.tsx
+msgid "OPML file is required"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "Ordre"
@@ -642,7 +697,7 @@ msgstr "Posició"
 
 #: src/components/header/Header.tsx
 msgid "Previous"
-msgstr ""
+msgstr "Anterior"
 
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
@@ -665,9 +720,10 @@ msgstr "Els registres estan tancats en aquesta instància de CommaFeed"
 msgid "REST API"
 msgstr "API REST"
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Right click"
-msgstr ""
+msgstr "Clic dret"
 
 #: src/components/admin/UserEdit.tsx
 #: src/components/settings/CustomCodeSettings.tsx
@@ -677,10 +733,18 @@ msgstr ""
 msgid "Save"
 msgstr "Desa"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scroll selected entry to the top of the page"
+msgstr "Desplaceu-vos per l'entrada seleccionada fins a la part superior de la pàgina"
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Scroll smoothly when navigating between entries"
 msgstr "Desplaceu-vos suaument quan navegueu entre entrades"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scrolling"
+msgstr "Desplaçament"
+
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/TreeSearch.tsx
@@ -704,7 +768,7 @@ msgstr "Estableix el focus en l'entrada anterior sense obrir-la"
 msgid "Settings"
 msgstr "Configuració"
 
-#: src/app/slices/user.ts
+#: src/app/user/slice.ts
 msgid "Settings saved."
 msgstr "Configuració desada."
 
@@ -716,17 +780,30 @@ msgstr "Comparteix"
 msgid "Sharing sites"
 msgstr "Compartir llocs"
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Shift"
 msgstr "canvi"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show CommaFeed's own context menu on right click"
+msgstr "Mostra el menú contextual de CommaFeed fent clic amb el botó dret"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show confirmation when marking all entries as read"
+msgstr "Mostra la confirmació en marcar totes les entrades com a llegides"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Show entry menu (desktop)"
-msgstr ""
+msgstr "Mostra el menú d'entrada (escriptori)"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Show entry menu (mobile)"
+msgstr "Mostra el menú d'entrada (mòbil)"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show external link icon"
 msgstr ""
 
 #: src/components/settings/DisplaySettings.tsx
@@ -737,11 +814,19 @@ msgstr "Mostra feeds i categories sense entrades no llegides"
 msgid "Show keyboard shortcut help"
 msgstr "Mostra l'ajuda de la drecera del teclat"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Show native menu (desktop)"
+msgstr "Mostra el menú natiu (escriptori)"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show star icon"
+msgstr ""
+
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Sign up"
-msgstr "Inscriu-te"
+msgstr "Registra't"
 
 #: src/pages/ErrorPage.tsx
 msgid "Something bad just happened..."
@@ -754,6 +839,7 @@ msgstr "Espai"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Star"
 msgstr "Estrella"
 
@@ -781,19 +867,22 @@ msgid "Success"
 msgstr "Éxit"
 
 #: src/components/KeyboardShortcutsHelp.tsx
-msgid "Swipe header to the right"
-msgstr ""
+msgid "Swipe header to the left"
+msgstr "Feu lliscar la capçalera cap a l'esquerra"
 
-#: src/components/header/ProfileMenu.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Canvia al tema fosc"
 
-#: src/components/header/ProfileMenu.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Canvia al tema clar"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "System"
+msgstr "Sistema"
+
+#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Tags"
 msgstr "Etiquetes"
@@ -806,13 +895,21 @@ msgstr "l'URL del canal al qual us voleu subscriure. "
 msgid "Theme"
 msgstr "Tema"
 
+#: src/components/settings/ProfileSettings.tsx
+msgid "This is your API key. It can be used for some read-only API operations and grants access to the Fever API. Use the form at the bottom of the page to generate a new API key"
+msgstr "Aquesta és la vostra clau de l'API. Es pot utilitzar per a algunes operacions de l'API de només lectura i permet accedir a l'API Fever. Utilitzeu el formulari de la part inferior de la pàgina per generar una nova clau d'API."
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "Canvia l'estat de lectura de l'entrada actual"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle sidebar"
-msgstr ""
+msgstr "Canvia la barra lateral"
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle starred status of current entry"
+msgstr "Commuta l'estat destacat de l'entrada actual"
 
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
@@ -820,7 +917,7 @@ msgstr "Proveu CommaFeed amb el compte de demostració: demo/demo"
 
 #: src/pages/WelcomePage.tsx
 msgid "Try the demo!"
-msgstr ""
+msgstr "Prova la demostració!"
 
 #: src/components/header/Header.tsx
 msgid "Unread"
@@ -828,6 +925,7 @@ msgstr "Sense llegir"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Unstar"
 msgstr "Desestrellar"
 
@@ -859,4 +957,4 @@ msgstr "Encara no teniu cap subscripció. "
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
-msgstr ""
+msgstr "Els vostres feeds s'han posat a la cua per actualitzar-los."

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

@@ -13,10 +13,6 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/components/content/add/CategorySelect.tsx
-msgid "{0} (in {1})"
-msgstr ""
-
 #: src/pages/app/AboutPage.tsx
 msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
 msgstr ""
@@ -72,7 +68,8 @@ msgid "All"
 msgstr "Všechny"
 
 #: src/components/settings/DisplaySettings.tsx
-msgid "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
+#: src/components/settings/DisplaySettings.tsx
+msgid "Always"
 msgstr ""
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
@@ -87,6 +84,10 @@ msgstr "Soubor opml je soubor XML obsahující adresy URL a kategorie zdrojů. "
 msgid "Analyze feed"
 msgstr "Analyzujte krmivo"
 
+#: src/components/AnnouncementDialog.tsx
+msgid "Announcement"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
 msgstr "Klíč API"
@@ -171,10 +172,18 @@ msgstr "Změna hesla vygeneruje nový klíč API"
 msgid "Check that the feed is working"
 msgstr "Zkontrolujte, zda zdroj funguje"
 
+#: src/pages/app/Layout.tsx
+msgid "Close menu"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 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 další nepřečtená položka"
@@ -203,10 +212,6 @@ msgstr "Potvrďte heslo"
 msgid "Cozy"
 msgstr "Útulný"
 
-#: src/components/content/FeedEntryFooter.tsx
-msgid "Create tag: {query}"
-msgstr "Vytvořit značku: {query}"
-
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr ""
@@ -227,6 +232,10 @@ msgstr ""
 msgid "Custom JS code that will be executed on page load"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Dark"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Datum vytvoření"
@@ -304,6 +313,10 @@ msgstr "Vstupte"
 msgid "Enter your current password to change profile settings"
 msgstr "Zadejte své aktuální heslo pro změnu nastavení profilu"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Entry headers"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Error"
 msgstr "Chyba"
@@ -339,8 +352,12 @@ msgstr "URL zdroje"
 msgid "Fetch all my feeds now"
 msgstr ""
 
-#: src/components/content/add/ImportOpml.tsx
-msgid "file is required"
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API"
+msgstr ""
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API URL"
 msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
@@ -391,6 +408,10 @@ 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 "Pokud není prázdný, výraz vyhodnocený jako 'true' nebo 'false'. "
 
+#: 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 "Pokud narazíte na problém, nahlaste jej prosím na stránce problémů projektu GitHub."
@@ -429,6 +450,10 @@ msgstr "Poslední aktualizace"
 msgid "Last refresh message"
 msgstr "Poslední obnovovací zpráva"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Light"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
@@ -521,6 +546,11 @@ msgstr "Jméno"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Přejděte na předplatné zadáním jeho názvu"
 
+#: src/components/settings/DisplaySettings.tsx
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "Nové heslo"
@@ -546,6 +576,10 @@ msgstr "Další nepřečtená položka bookmarklet"
 msgid "No more entries"
 msgstr "Žádné další záznamy"
 
+#: src/components/content/ShareButtons.tsx
+msgid "No sharing options available."
+msgstr ""
+
 #: src/components/sidebar/TreeSearch.tsx
 msgid "Nothing found"
 msgstr "Nic nebylo nalezeno"
@@ -554,6 +588,18 @@ msgstr "Nic nebylo nalezeno"
 msgid "Oldest first"
 msgstr "Nejdříve nejstarší"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On desktop"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile"
+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 "Jejda!"
@@ -571,6 +617,7 @@ msgid "Open current entry in a new tab in the background"
 msgstr "Otevřít aktuální položku na nové kartě na pozadí"
 
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/OpenExternalLink.tsx
 msgid "Open link"
 msgstr "Otevřít odkaz"
 
@@ -582,6 +629,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 "Otevřete další položku"
@@ -607,6 +658,10 @@ msgstr "Export OPML"
 msgid "OPML file"
 msgstr "soubor OPML"
 
+#: src/components/content/add/ImportOpml.tsx
+msgid "OPML file is required"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "Objednávka"
@@ -665,6 +720,7 @@ msgstr "V této instanci CommaFeed jsou registrace uzavřeny"
 msgid "REST API"
 msgstr ""
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Right click"
 msgstr ""
@@ -677,10 +733,18 @@ msgstr ""
 msgid "Save"
 msgstr "Uložit"
 
+#: 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 "Posouvejte plynule při navigaci mezi položkami"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scrolling"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/TreeSearch.tsx
@@ -704,7 +768,7 @@ msgstr "Nastavit fokus na předchozí záznam bez jeho otevření"
 msgid "Settings"
 msgstr "Nastavení"
 
-#: src/app/slices/user.ts
+#: src/app/user/slice.ts
 msgid "Settings saved."
 msgstr "Nastavení uloženo."
 
@@ -716,11 +780,20 @@ msgstr "Sdílejte"
 msgid "Sharing sites"
 msgstr "Stránky pro sdílení"
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Shift"
 msgstr "Směna"
 
+#: 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 ""
@@ -729,6 +802,10 @@ msgstr ""
 msgid "Show entry menu (mobile)"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show external link icon"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show feeds and categories with no unread entries"
 msgstr "Zobrazit kanály a kategorie bez nepřečtených položek"
@@ -737,6 +814,14 @@ msgstr "Zobrazit kanály a kategorie bez nepřečtených položek"
 msgid "Show keyboard shortcut help"
 msgstr "Zobrazit nápovědu ke klávesovým zkratkám"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Show native menu (desktop)"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show star icon"
+msgstr ""
+
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/WelcomePage.tsx
@@ -754,6 +839,7 @@ msgstr "Vesmír"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Star"
 msgstr "Hvězda"
 
@@ -781,19 +867,22 @@ msgid "Success"
 msgstr "Úspěch"
 
 #: 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 "Přepněte na tmavý motiv"
 
-#: src/components/header/ProfileMenu.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Přepněte na světlé téma"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "System"
+msgstr ""
+
+#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Tags"
 msgstr "Značky"
@@ -806,6 +895,10 @@ msgstr "Adresa URL kanálu, k jehož odběru se chcete přihlásit. "
 msgid "Theme"
 msgstr "Téma"
 
+#: 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 "Přepne stav čtení aktuálního záznamu"
@@ -814,6 +907,10 @@ msgstr "Přepne stav čtení aktuálního záznamu"
 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 "Vyzkoušejte CommaFeed s demo účtem: demo/demo"
@@ -828,6 +925,7 @@ msgstr "Nepřečteno"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Unstar"
 msgstr "Odstranit hvězdu"
 

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

@@ -13,10 +13,6 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/components/content/add/CategorySelect.tsx
-msgid "{0} (in {1})"
-msgstr ""
-
 #: src/pages/app/AboutPage.tsx
 msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
 msgstr ""
@@ -72,7 +68,8 @@ msgid "All"
 msgstr "Pawb"
 
 #: src/components/settings/DisplaySettings.tsx
-msgid "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
+#: src/components/settings/DisplaySettings.tsx
+msgid "Always"
 msgstr ""
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
@@ -87,6 +84,10 @@ msgstr "Mae ffeil opml yn ffeil XML sy'n cynnwys URLs porthiant a chategorïau.
 msgid "Analyze feed"
 msgstr "Dadansoddi porthiant"
 
+#: src/components/AnnouncementDialog.tsx
+msgid "Announcement"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
 msgstr "Allwedd API"
@@ -171,10 +172,18 @@ msgstr "Bydd newid cyfrinair yn cynhyrchu allwedd API newydd"
 msgid "Check that the feed is working"
 msgstr "Gwiriwch fod y porthiant yn gweithio"
 
+#: src/pages/app/Layout.tsx
+msgid "Close menu"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 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 eitem nesaf heb ei darllen"
@@ -203,10 +212,6 @@ msgstr "Cadarnhau'r cyfrinair"
 msgid "Cozy"
 msgstr "clyd"
 
-#: src/components/content/FeedEntryFooter.tsx
-msgid "Create tag: {query}"
-msgstr "Creu tag: {query}"
-
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr ""
@@ -227,6 +232,10 @@ msgstr ""
 msgid "Custom JS code that will be executed on page load"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Dark"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Dyddiad creu"
@@ -304,6 +313,10 @@ msgstr "Ewch i mewn"
 msgid "Enter your current password to change profile settings"
 msgstr "Rhowch eich cyfrinair presennol i newid gosodiadau proffil"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Entry headers"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Error"
 msgstr "Gwall"
@@ -339,9 +352,13 @@ msgstr "URL porthiant"
 msgid "Fetch all my feeds now"
 msgstr ""
 
-#: src/components/content/add/ImportOpml.tsx
-msgid "file is required"
-msgstr "mae angen y ffeil"
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API"
+msgstr ""
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API URL"
+msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Filtering expression"
@@ -391,6 +408,10 @@ 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 "Os nad yw'n wag, mynegiad sy'n gwerthuso i 'gwir' neu 'anghywir'. "
 
+#: 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 "Os byddwch yn dod ar draws mater, rhowch wybod amdano ar dudalen materion y prosiect GitHub."
@@ -429,6 +450,10 @@ msgstr "adnewyddu diwethaf"
 msgid "Last refresh message"
 msgstr "Neges adnewyddu ddiwethaf"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Light"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
@@ -521,6 +546,11 @@ msgstr "Enw"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Llywiwch i danysgrifiad trwy nodi ei enw"
 
+#: src/components/settings/DisplaySettings.tsx
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "Cyfrinair newydd"
@@ -546,6 +576,10 @@ msgstr "Llyfrnod yr eitem nesaf heb ei darllen"
 msgid "No more entries"
 msgstr "Dim mwy o gofnodion"
 
+#: src/components/content/ShareButtons.tsx
+msgid "No sharing options available."
+msgstr ""
+
 #: src/components/sidebar/TreeSearch.tsx
 msgid "Nothing found"
 msgstr "Dim wedi'i ddarganfod"
@@ -554,6 +588,18 @@ msgstr "Dim wedi'i ddarganfod"
 msgid "Oldest first"
 msgstr "Hynaf yn gyntaf"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On desktop"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile"
+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 "Wps!"
@@ -571,6 +617,7 @@ msgid "Open current entry in a new tab in the background"
 msgstr "Agorwch y cofnod cyfredol mewn tab newydd yn y cefndir"
 
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/OpenExternalLink.tsx
 msgid "Open link"
 msgstr "Dolen agored"
 
@@ -582,6 +629,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 "Agor y cofnod nesaf"
@@ -607,6 +658,10 @@ msgstr "allforio OPML"
 msgid "OPML file"
 msgstr "ffeil OPML"
 
+#: src/components/content/add/ImportOpml.tsx
+msgid "OPML file is required"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "gorchymyn"
@@ -665,6 +720,7 @@ msgstr "Mae cofrestriadau ar gau ar yr achos CommaFeed hwn"
 msgid "REST API"
 msgstr ""
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Right click"
 msgstr ""
@@ -677,10 +733,18 @@ msgstr ""
 msgid "Save"
 msgstr "Arbed"
 
+#: 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 "Sgroliwch yn esmwyth wrth lywio rhwng cofnodion"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scrolling"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/TreeSearch.tsx
@@ -704,7 +768,7 @@ msgstr "Gosod ffocws ar gofnod blaenorol heb ei agor"
 msgid "Settings"
 msgstr "Gosodiadau"
 
-#: src/app/slices/user.ts
+#: src/app/user/slice.ts
 msgid "Settings saved."
 msgstr "Gosodiadau wedi'u cadw."
 
@@ -716,11 +780,20 @@ msgstr "Rhannu"
 msgid "Sharing sites"
 msgstr "Rhannu gwefannau"
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Shift"
 msgstr "shifft"
 
+#: 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 ""
@@ -729,6 +802,10 @@ msgstr ""
 msgid "Show entry menu (mobile)"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show external link icon"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show feeds and categories with no unread entries"
 msgstr "Dangos ffrydiau a chategorïau heb unrhyw gofnodion heb eu darllen"
@@ -737,6 +814,14 @@ msgstr "Dangos ffrydiau a chategorïau heb unrhyw gofnodion heb eu darllen"
 msgid "Show keyboard shortcut help"
 msgstr "Dangos cymorth llwybr byr bysellfwrdd"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Show native menu (desktop)"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show star icon"
+msgstr ""
+
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/WelcomePage.tsx
@@ -754,6 +839,7 @@ msgstr "Gofod"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Star"
 msgstr "seren"
 
@@ -781,19 +867,22 @@ msgid "Success"
 msgstr "Llwyddiant"
 
 #: 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 "Newid i thema dywyll"
 
-#: src/components/header/ProfileMenu.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Newid i thema golau"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "System"
+msgstr ""
+
+#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Tags"
 msgstr "Tagiau"
@@ -806,6 +895,10 @@ msgstr "Y URL ar gyfer y porthwr rydych chi am danysgrifio iddo. "
 msgid "Theme"
 msgstr "Thema"
 
+#: 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 "Toglo statws darllen y cofnod cyfredol"
@@ -814,6 +907,10 @@ msgstr "Toglo statws darllen y cofnod cyfredol"
 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 "Rhowch gynnig ar CommaFeed gyda'r cyfrif demo: demo / demo"
@@ -828,6 +925,7 @@ msgstr "Heb ei ddarllen"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Unstar"
 msgstr "dad-seren"
 

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

@@ -13,10 +13,6 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/components/content/add/CategorySelect.tsx
-msgid "{0} (in {1})"
-msgstr ""
-
 #: src/pages/app/AboutPage.tsx
 msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
 msgstr ""
@@ -72,7 +68,8 @@ msgid "All"
 msgstr "Alle"
 
 #: src/components/settings/DisplaySettings.tsx
-msgid "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
+#: src/components/settings/DisplaySettings.tsx
+msgid "Always"
 msgstr ""
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
@@ -87,6 +84,10 @@ msgstr "En opml-fil er en XML-fil, der indeholder feed-URL'er og kategorier. "
 msgid "Analyze feed"
 msgstr "Analyser foder"
 
+#: src/components/AnnouncementDialog.tsx
+msgid "Announcement"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
 msgstr "API-nøgle"
@@ -171,10 +172,18 @@ msgstr "Ændring af adgangskode vil generere en ny API-nøgle"
 msgid "Check that the feed is working"
 msgstr "Tjek, at foderet virker"
 
+#: src/pages/app/Layout.tsx
+msgid "Close menu"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 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 næste ulæste element"
@@ -203,10 +212,6 @@ msgstr "Bekræft adgangskode"
 msgid "Cozy"
 msgstr "Hyggeligt"
 
-#: src/components/content/FeedEntryFooter.tsx
-msgid "Create tag: {query}"
-msgstr "Opret tag: {query}"
-
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr ""
@@ -227,6 +232,10 @@ msgstr ""
 msgid "Custom JS code that will be executed on page load"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Dark"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Dato oprettet"
@@ -304,6 +313,10 @@ msgstr ""
 msgid "Enter your current password to change profile settings"
 msgstr "Indtast din nuværende adgangskode for at ændre profilindstillinger"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Entry headers"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Error"
 msgstr "Fejl"
@@ -339,9 +352,13 @@ msgstr ""
 msgid "Fetch all my feeds now"
 msgstr ""
 
-#: src/components/content/add/ImportOpml.tsx
-msgid "file is required"
-msgstr "fil er påkrævet"
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API"
+msgstr ""
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API URL"
+msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Filtering expression"
@@ -391,6 +408,10 @@ 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 "Hvis det ikke er tomt, et udtryk, der vurderes til 'sand' eller 'falsk'. "
 
+#: 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 "Hvis du støder på et problem, bedes du rapportere det på problemsiden for GitHub-projektet."
@@ -429,6 +450,10 @@ msgstr "Sidste opdatering"
 msgid "Last refresh message"
 msgstr "Sidste opdateringsmeddelelse"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Light"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
@@ -521,6 +546,11 @@ msgstr "Navn"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Naviger til et abonnement ved at indtaste dets navn"
 
+#: src/components/settings/DisplaySettings.tsx
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "Ny adgangskode"
@@ -546,6 +576,10 @@ msgstr "Næste ulæste emne bogmærke"
 msgid "No more entries"
 msgstr "Ingen flere poster"
 
+#: src/components/content/ShareButtons.tsx
+msgid "No sharing options available."
+msgstr ""
+
 #: src/components/sidebar/TreeSearch.tsx
 msgid "Nothing found"
 msgstr "Intet fundet"
@@ -554,6 +588,18 @@ msgstr "Intet fundet"
 msgid "Oldest first"
 msgstr "Ældst først"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On desktop"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile"
+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 "Hovsa!"
@@ -571,6 +617,7 @@ msgid "Open current entry in a new tab in the background"
 msgstr "Åbn den aktuelle post i en ny fane i baggrunden"
 
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/OpenExternalLink.tsx
 msgid "Open link"
 msgstr "Åbent link"
 
@@ -582,6 +629,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 "Åbn næste post"
@@ -607,6 +658,10 @@ msgstr "OPML eksport"
 msgid "OPML file"
 msgstr "OPML fil"
 
+#: src/components/content/add/ImportOpml.tsx
+msgid "OPML file is required"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "Bestilling"
@@ -665,6 +720,7 @@ msgstr "Registreringer er lukket på denne CommaFeed-instans"
 msgid "REST API"
 msgstr ""
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Right click"
 msgstr ""
@@ -677,10 +733,18 @@ msgstr ""
 msgid "Save"
 msgstr "Gem"
 
+#: 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 "Rul jævnt, når du navigerer mellem poster"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scrolling"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/TreeSearch.tsx
@@ -704,7 +768,7 @@ msgstr "Sæt fokus på forrige indtastning uden at åbne den"
 msgid "Settings"
 msgstr "Indstillinger"
 
-#: src/app/slices/user.ts
+#: src/app/user/slice.ts
 msgid "Settings saved."
 msgstr "Indstillinger gemt."
 
@@ -716,11 +780,20 @@ msgstr "Del"
 msgid "Sharing sites"
 msgstr "Delingssider"
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Shift"
 msgstr "Skift"
 
+#: 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 ""
@@ -729,6 +802,10 @@ msgstr ""
 msgid "Show entry menu (mobile)"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show external link icon"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show feeds and categories with no unread entries"
 msgstr "Vis feeds og kategorier uden ulæste poster"
@@ -737,6 +814,14 @@ msgstr "Vis feeds og kategorier uden ulæste poster"
 msgid "Show keyboard shortcut help"
 msgstr "Vis hjælp til tastaturgenveje"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Show native menu (desktop)"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show star icon"
+msgstr ""
+
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/WelcomePage.tsx
@@ -754,6 +839,7 @@ msgstr "Rum"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Star"
 msgstr "Stjerne"
 
@@ -781,19 +867,22 @@ msgid "Success"
 msgstr "Succes"
 
 #: 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 "Skift til mørkt tema"
 
-#: src/components/header/ProfileMenu.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Skift til lystema"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "System"
+msgstr ""
+
+#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Tags"
 msgstr ""
@@ -806,6 +895,10 @@ msgstr "URL'en til det feed, du vil abonnere på. "
 msgid "Theme"
 msgstr "Tema"
 
+#: 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 "Skift læsestatus for den aktuelle post"
@@ -814,6 +907,10 @@ msgstr "Skift læsestatus for den aktuelle post"
 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 "Prøv CommaFeed med demokontoen: demo/demo"
@@ -828,6 +925,7 @@ msgstr "Ulæst"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Unstar"
 msgstr ""
 

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

@@ -13,17 +13,13 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/components/content/add/CategorySelect.tsx
-msgid "{0} (in {1})"
-msgstr ""
-
 #: src/pages/app/AboutPage.tsx
 msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
-msgstr ""
+msgstr "<0>CommaFeed ist ein Open Source Projekt. Der Quellcode wird auf auf </0><1>GitHub</1> gehostet."
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "<0>Complete syntax is available </0><1>here</1>."
-msgstr ""
+msgstr "<0>Die vollständige Syntax ist </0><1>hier</1> verfügbar."
 
 #: src/pages/auth/RegistrationPage.tsx
 msgid "<0>Have an account?</0><1>Log in!</1>"
@@ -31,16 +27,16 @@ msgstr "<0>Haben Sie ein Konto?</0><1>Melden Sie sich an!</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 ""
+msgstr "<0>Hey,</0><1>Ich bin Jérémie aus Belgien und arbeite seit über 10 Jahren in meiner Freizeit an CommaFeed. Vielen Dank für das Interesse, CommaFeed weiterhin zu unterstützen.</1>"
 
 #: src/pages/auth/LoginPage.tsx
 msgid "<0>Need an account?</0><1>Sign up!</1>"
-msgstr "<0>Benötigen Sie ein Konto?</0><1>Melden Sie sich an!</1>"
+msgstr "<0>Benötigen Sie ein Konto?</0><1>Hier geht's zur Registrierung!</1>"
 
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/AboutPage.tsx
 msgid "About"
-msgstr "Ungefähr"
+msgstr "Über"
 
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Actions"
@@ -72,21 +68,26 @@ msgid "All"
 msgstr "Alle"
 
 #: src/components/settings/DisplaySettings.tsx
-msgid "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
-msgstr ""
+#: src/components/settings/DisplaySettings.tsx
+msgid "Always"
+msgstr "Immer"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "An email has been sent if this address was registered. Check your inbox."
-msgstr "Eine E-Mail wurde gesendet, wenn diese Adresse registriert wurde. "
+msgstr "Falls diese Adresse registriert ist, wurde eine E-Mail gesendet. Bitte den Posteingang prüfen."
 
 #: src/components/content/add/ImportOpml.tsx
 msgid "An opml file is an XML file containing feed URLs and categories. You can get an OPML file by exporting your data from other feed reading services."
-msgstr "Eine opml-Datei ist eine XML-Datei, die Feed-URLs und Kategorien enthält. "
+msgstr "Eine opml-Datei ist eine XML-Datei, die Feed-URLs und Kategorien enthält."
 
 #: src/components/content/add/Subscribe.tsx
 msgid "Analyze feed"
 msgstr "Feed analysieren"
 
+#: src/components/AnnouncementDialog.tsx
+msgid "Announcement"
+msgstr "Ankündigung"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
 msgstr "API-Schlüssel"
@@ -101,7 +102,7 @@ msgstr "Sind Sie sicher, dass Sie Benutzer <0>{userName}</0> löschen möchten?"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "Are you sure you want to delete your account? There's no turning back!"
-msgstr "Sind Sie sicher, dass Sie Ihr Konto löschen möchten? "
+msgstr "Sind Sie sicher, dass Sie Ihr Konto löschen möchten?"
 
 #: src/components/header/MarkAllAsReadButton.tsx
 msgid "Are you sure you want to mark all entries of <0>{sourceLabel}</0> as read?"
@@ -117,7 +118,7 @@ msgstr "Sind Sie sicher, dass Sie <0>{feedName}</0> abbestellen möchten?"
 
 #: src/components/header/Header.tsx
 msgid "Asc"
-msgstr "Asz"
+msgstr "Aufsteigend"
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Available variables are 'title', 'content', 'url' 'author' and 'categories' and their content is converted to lower case to ease string comparison."
@@ -129,15 +130,15 @@ msgstr "Zurück"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "Back to log in"
-msgstr "Zurück zum Anmelden"
+msgstr "Zurück zum Login"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Browser extension required for Chrome"
-msgstr ""
+msgstr "Browser-Erweiterung für Chrome benötigt"
 
 #: src/pages/app/AboutPage.tsx
 msgid "Browser extention"
-msgstr ""
+msgstr "Browser-Erweiterung"
 
 #: src/components/admin/UserEdit.tsx
 #: src/components/content/add/AddCategory.tsx
@@ -169,11 +170,19 @@ msgstr "Das Ändern des Passworts generiert einen neuen API-Schlüssel"
 
 #: src/components/content/add/Subscribe.tsx
 msgid "Check that the feed is working"
-msgstr "Überprüfen Sie, ob der Feed funktioniert"
+msgstr "Überprüfe, ob der Feed funktioniert"
+
+#: src/pages/app/Layout.tsx
+msgid "Close menu"
+msgstr "Menü schließen"
 
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed browser extension version {browserExtensionVersion}."
-msgstr ""
+msgstr "CommaFeed Browser Erweiterung Version {browserExtensionVersion}."
+
+#: 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 "CommaFeed ist mit der Fever-API kompatibel. Verwenden Sie die folgende URL in Ihrem Fever-kompatiblen mobilen Client. Melden Sie sich mit Ihrem Benutzernamen und Ihrem <0>API-Schlüssel</0> an."
 
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed next unread item"
@@ -181,7 +190,7 @@ msgstr "CommaFeed nächstes ungelesenes Element"
 
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed version {version} ({revision})."
-msgstr ""
+msgstr "CommaFeed version {version} ({revision})."
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Compact"
@@ -203,10 +212,6 @@ msgstr "Passwort bestätigen"
 msgid "Cozy"
 msgstr "Gemütlich"
 
-#: src/components/content/FeedEntryFooter.tsx
-msgid "Create tag: {query}"
-msgstr "Tag erstellen: {query}"
-
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "Strg"
@@ -217,15 +222,19 @@ msgstr "Aktuelles Passwort"
 
 #: src/pages/app/SettingsPage.tsx
 msgid "Custom code"
-msgstr ""
+msgstr "Eigener Code"
 
 #: src/components/settings/CustomCodeSettings.tsx
 msgid "Custom CSS rules that will be applied"
-msgstr ""
+msgstr "Eigene CSS Regeln die angewandt werden"
 
 #: src/components/settings/CustomCodeSettings.tsx
 msgid "Custom JS code that will be executed on page load"
-msgstr ""
+msgstr "Einer JS Code der beim Laden der Seite ausgeführt wird"
+
+#: src/components/header/ProfileMenu.tsx
+msgid "Dark"
+msgstr "Dunkel"
 
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
@@ -254,7 +263,7 @@ msgstr "Beschr"
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Detailed"
-msgstr ""
+msgstr "Detailliert"
 
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/SettingsPage.tsx
@@ -264,7 +273,7 @@ msgstr "Anzeige"
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/app/DonatePage.tsx
 msgid "Donate"
-msgstr ""
+msgstr "Spenden"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "Download"
@@ -304,13 +313,17 @@ msgstr "Eintreten"
 msgid "Enter your current password to change profile settings"
 msgstr "Geben Sie Ihr aktuelles Passwort ein, um die Profileinstellungen zu ändern"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Entry headers"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Error"
 msgstr "Fehler"
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Example: {example}."
-msgstr "Beispiel: {Beispiel}."
+msgstr "Beispiel: {example}."
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Expanded"
@@ -323,7 +336,7 @@ msgstr "Exportieren Sie Ihre Abonnements und Kategorien als OPML-Datei, die in a
 #: src/components/header/Header.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Extension options"
-msgstr ""
+msgstr "Erweiterungsoptionen"
 
 #: src/components/content/add/Subscribe.tsx
 msgid "Feed name"
@@ -337,11 +350,15 @@ msgstr "Feed-URL"
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Fetch all my feeds now"
+msgstr "Alle Feeds jetzt abrufen"
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API"
 msgstr ""
 
-#: src/components/content/add/ImportOpml.tsx
-msgid "file is required"
-msgstr "Datei ist erforderlich"
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API URL"
+msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Filtering expression"
@@ -369,7 +386,7 @@ msgstr "Generierte Feed-URL"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Go to {0}"
-msgstr ""
+msgstr "Gehe zu {0}"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Go to the All view"
@@ -381,7 +398,7 @@ msgstr "Gehen Sie zur API-Dokumentation."
 
 #: src/pages/app/AboutPage.tsx
 msgid "Goodies"
-msgstr "Gutes"
+msgstr "Goodies"
 
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Id"
@@ -389,7 +406,11 @@ msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "If not empty, an expression evaluating to 'true' or 'false'. If false, new entries for this feed will be marked as read automatically."
-msgstr "Wenn nicht leer, ein Ausdruck, der als „wahr“ oder „falsch“ ausgewertet wird. "
+msgstr "Wenn nicht leer, ein Ausdruck, der als „wahr“ oder „falsch“ ausgewertet wird."
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "If the entry doesn't entirely fit on the screen"
+msgstr "Wenn der Eintrag nicht ganz auf den Bildschirm passt"
 
 #: src/pages/app/AboutPage.tsx
 msgid "If you encounter an issue, please report it on the issues page of the GitHub project."
@@ -411,7 +432,7 @@ msgstr "Ungelesen lassen"
 #: src/components/content/FeedEntries.tsx
 #: src/pages/app/AboutPage.tsx
 msgid "Keyboard shortcuts"
-msgstr "Tastenkürzel"
+msgstr "Tastaturkürzel"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Language"
@@ -429,6 +450,10 @@ msgstr "Letzte Aktualisierung"
 msgid "Last refresh message"
 msgstr "Letzte Aktualisierungsmeldung"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Light"
+msgstr "Hell"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
@@ -463,7 +488,7 @@ msgstr "Abmelden"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Long press"
-msgstr ""
+msgstr "Langer Tastendruck"
 
 #: src/components/header/ProfileMenu.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -495,7 +520,7 @@ msgstr "Metriken"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Middle click"
-msgstr ""
+msgstr "Mittelklick"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Move the page down"
@@ -508,7 +533,7 @@ msgstr "Bewege die Seite nach oben"
 #: src/components/RelativeDate.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "N/A"
-msgstr "n. z"
+msgstr "n.v."
 
 #: src/components/admin/UserEdit.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -521,6 +546,11 @@ msgstr ""
 msgid "Navigate to a subscription by entering its name"
 msgstr "Navigieren Sie zu einem Abonnement, indem Sie seinen Namen eingeben"
 
+#: src/components/settings/DisplaySettings.tsx
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr "Niemals"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "Neues Passwort"
@@ -546,6 +576,10 @@ msgstr "Lesezeichen für das nächste ungelesene Element"
 msgid "No more entries"
 msgstr "Keine weiteren Einträge"
 
+#: src/components/content/ShareButtons.tsx
+msgid "No sharing options available."
+msgstr ""
+
 #: src/components/sidebar/TreeSearch.tsx
 msgid "Nothing found"
 msgstr "Nichts gefunden"
@@ -554,13 +588,25 @@ msgstr "Nichts gefunden"
 msgid "Oldest first"
 msgstr "Älteste zuerst"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On desktop"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr "Auf mobilen Geräten die Aktion-Buttons am unteren Ende des Bildschirms anzeigen"
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Ups!"
 
 #: src/components/header/Header.tsx
 msgid "Open CommaFeed"
-msgstr ""
+msgstr "CommaFeed öffnen"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open current entry in a new tab"
@@ -571,16 +617,21 @@ msgid "Open current entry in a new tab in the background"
 msgstr "Aktuellen Eintrag in neuem Tab im Hintergrund öffnen"
 
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/OpenExternalLink.tsx
 msgid "Open link"
 msgstr "Link öffnen"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Open link in new background tab"
-msgstr ""
+msgstr "Link in neuem Tab im Hintergrund öffnen"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 msgid "Open link in new tab"
-msgstr ""
+msgstr "Link in neuem Tab öffnen"
+
+#: src/pages/app/Layout.tsx
+msgid "Open menu"
+msgstr "Menü öffnen"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open next entry"
@@ -607,17 +658,21 @@ msgstr "OPML-Export"
 msgid "OPML file"
 msgstr "OPML-Datei"
 
+#: src/components/content/add/ImportOpml.tsx
+msgid "OPML file is required"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "Bestellung"
 
 #: src/components/content/add/AddCategory.tsx
 msgid "Parent"
-msgstr "Elternteil"
+msgstr "Übergeordnet"
 
 #: src/pages/app/CategoryDetailsPage.tsx
 msgid "Parent Category"
-msgstr "Elternkategorie"
+msgstr "Übergeordnete Kategorie"
 
 #: src/components/admin/UserEdit.tsx
 #: src/pages/auth/LoginPage.tsx
@@ -638,11 +693,11 @@ msgstr "Passwörter stimmen nicht überein"
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Position"
-msgstr "Stellung"
+msgstr "Position"
 
 #: src/components/header/Header.tsx
 msgid "Previous"
-msgstr ""
+msgstr "Vorheriges"
 
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
@@ -665,9 +720,10 @@ msgstr "Registrierungen sind für diese CommaFeed-Instanz geschlossen"
 msgid "REST API"
 msgstr "REST-API"
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Right click"
-msgstr ""
+msgstr "Rechtsklick"
 
 #: src/components/admin/UserEdit.tsx
 #: src/components/settings/CustomCodeSettings.tsx
@@ -677,9 +733,17 @@ msgstr ""
 msgid "Save"
 msgstr "Speichern"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scroll selected entry to the top of the page"
+msgstr "Ausgewählten Eintrag an den Anfang der Seite verschieben"
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Scroll smoothly when navigating between entries"
-msgstr "Geschwindes Scrollen beim Navigieren zwischen Einträgen"
+msgstr "Schnelles Scrollen beim Navigieren zwischen Einträgen"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scrolling"
+msgstr "Scrollen"
 
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
@@ -704,7 +768,7 @@ msgstr "Fokus auf vorherigen Eintrag setzen, ohne ihn zu öffnen"
 msgid "Settings"
 msgstr "Einstellungen"
 
-#: src/app/slices/user.ts
+#: src/app/user/slice.ts
 msgid "Settings saved."
 msgstr "Einstellungen gespeichert."
 
@@ -716,17 +780,30 @@ msgstr "Teilen"
 msgid "Sharing sites"
 msgstr "Seiten teilen"
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Shift"
 msgstr "Verschiebung"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show CommaFeed's own context menu on right click"
+msgstr "CommaFeed-Kontextmenü anzeigen bei Rechtsklick"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show confirmation when marking all entries as read"
+msgstr "Bestätigung beim Markieren von allen Einträgen als gelesen"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Show entry menu (desktop)"
-msgstr ""
+msgstr "Eintragsmenü anzeigen (Desktop)"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Show entry menu (mobile)"
+msgstr "Eintragsmenü anzeigen (Handy)"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show external link icon"
 msgstr ""
 
 #: src/components/settings/DisplaySettings.tsx
@@ -737,6 +814,14 @@ msgstr "Feeds und Kategorien ohne ungelesene Einträge anzeigen"
 msgid "Show keyboard shortcut help"
 msgstr "Tastenkürzel-Hilfe anzeigen"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Show native menu (desktop)"
+msgstr "Natives Menü anzeigen (Desktop)"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show star icon"
+msgstr ""
+
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/WelcomePage.tsx
@@ -754,6 +839,7 @@ msgstr "Raum"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Star"
 msgstr "Stern"
 
@@ -781,19 +867,22 @@ msgid "Success"
 msgstr "Erfolg"
 
 #: src/components/KeyboardShortcutsHelp.tsx
-msgid "Swipe header to the right"
-msgstr ""
+msgid "Swipe header to the left"
+msgstr "Kopfzeile nach links schieben"
 
-#: src/components/header/ProfileMenu.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
-msgstr "Zum dunklen Design wechseln"
+msgstr "Zum Darkmode wechseln"
 
-#: src/components/header/ProfileMenu.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
-msgstr "Wechseln Sie zum Lichtdesign"
+msgstr "Zum Lightmode wechseln"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "System"
+msgstr ""
+
+#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Tags"
 msgstr ""
@@ -806,13 +895,21 @@ msgstr "Die URL für den Feed, den Sie abonnieren möchten. "
 msgid "Theme"
 msgstr "Thema"
 
+#: 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 "Dies ist Ihr API-Schlüssel. Er kann für einige schreibgeschützte API-Vorgänge verwendet werden und ermöglicht den Zugriff auf die Fever-API. Verwenden Sie das Formular unten auf der Seite, um einen neuen API-Schlüssel zu generieren"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "Lesestatus des aktuellen Eintrags umschalten"
 
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle sidebar"
-msgstr ""
+msgstr "Sidebar an- und ausschalten"
+
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle starred status of current entry"
+msgstr "Markierungsstatus des aktuellen Eintrags ändern"
 
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
@@ -820,7 +917,7 @@ msgstr "Testen Sie CommaFeed mit dem Demokonto: demo/demo"
 
 #: src/pages/WelcomePage.tsx
 msgid "Try the demo!"
-msgstr ""
+msgstr "Testen Sie die Demo!"
 
 #: src/components/header/Header.tsx
 msgid "Unread"
@@ -828,6 +925,7 @@ msgstr "Ungelesen"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Unstar"
 msgstr "Stern entfernen"
 
@@ -855,8 +953,8 @@ msgstr "Webseite"
 
 #: src/pages/app/FeedEntriesPage.tsx
 msgid "You don't have any subscriptions yet. Why not try adding one by clicking on the + sign at the top of the page?"
-msgstr "Sie haben noch keine Abonnements. "
+msgstr "Sie haben noch keine Abonnements."
 
 #: src/components/header/ProfileMenu.tsx
 msgid "Your feeds have been queued for refresh."
-msgstr ""
+msgstr "Ihr Feed wurde für die Aktualisierung eingereiht."

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

@@ -13,10 +13,6 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/components/content/add/CategorySelect.tsx
-msgid "{0} (in {1})"
-msgstr "{0} (in {1})"
-
 #: src/pages/app/AboutPage.tsx
 msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
 msgstr "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
@@ -72,8 +68,9 @@ msgid "All"
 msgstr "All"
 
 #: src/components/settings/DisplaySettings.tsx
-msgid "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
-msgstr "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
+#: src/components/settings/DisplaySettings.tsx
+msgid "Always"
+msgstr "Always"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "An email has been sent if this address was registered. Check your inbox."
@@ -87,6 +84,10 @@ msgstr "An opml file is an XML file containing feed URLs and categories. You can
 msgid "Analyze feed"
 msgstr "Analyze feed"
 
+#: src/components/AnnouncementDialog.tsx
+msgid "Announcement"
+msgstr "Announcement"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
 msgstr "API key"
@@ -171,10 +172,18 @@ msgstr "Changing password will generate a new API key"
 msgid "Check that the feed is working"
 msgstr "Check that the feed is working"
 
+#: src/pages/app/Layout.tsx
+msgid "Close menu"
+msgstr "Close menu"
+
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed browser extension version {browserExtensionVersion}."
 msgstr "CommaFeed browser extension version {browserExtensionVersion}."
 
+#: 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 "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>."
+
 #: src/pages/app/AboutPage.tsx
 msgid "CommaFeed next unread item"
 msgstr "CommaFeed next unread item"
@@ -203,10 +212,6 @@ msgstr "Confirm password"
 msgid "Cozy"
 msgstr "Cozy"
 
-#: src/components/content/FeedEntryFooter.tsx
-msgid "Create tag: {query}"
-msgstr "Create tag: {query}"
-
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "Ctrl"
@@ -227,6 +232,10 @@ msgstr "Custom CSS rules that will be applied"
 msgid "Custom JS code that will be executed on page load"
 msgstr "Custom JS code that will be executed on page load"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Dark"
+msgstr "Dark"
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Date created"
@@ -304,6 +313,10 @@ msgstr "Enter"
 msgid "Enter your current password to change profile settings"
 msgstr "Enter your current password to change profile settings"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Entry headers"
+msgstr "Entry headers"
+
 #: src/components/Alert.tsx
 msgid "Error"
 msgstr "Error"
@@ -339,9 +352,13 @@ msgstr "Feed URL"
 msgid "Fetch all my feeds now"
 msgstr "Fetch all my feeds now"
 
-#: src/components/content/add/ImportOpml.tsx
-msgid "file is required"
-msgstr "file is required"
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API"
+msgstr "Fever API"
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API URL"
+msgstr "Fever API URL"
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Filtering expression"
@@ -391,6 +408,10 @@ msgstr "Id"
 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 "If not empty, an expression evaluating to 'true' or 'false'. If false, new entries for this feed will be marked as read automatically."
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "If the entry doesn't entirely fit on the screen"
+msgstr "If the entry doesn't entirely fit on the screen"
+
 #: src/pages/app/AboutPage.tsx
 msgid "If you encounter an issue, please report it on the issues page of the GitHub project."
 msgstr "If you encounter an issue, please report it on the issues page of the GitHub project."
@@ -429,6 +450,10 @@ msgstr "Last refresh"
 msgid "Last refresh message"
 msgstr "Last refresh message"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Light"
+msgstr "Light"
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
@@ -521,6 +546,11 @@ msgstr "Name"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Navigate to a subscription by entering its name"
 
+#: src/components/settings/DisplaySettings.tsx
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr "Never"
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "New password"
@@ -546,6 +576,10 @@ msgstr "Next unread item bookmarklet"
 msgid "No more entries"
 msgstr "No more entries"
 
+#: src/components/content/ShareButtons.tsx
+msgid "No sharing options available."
+msgstr "No sharing options available."
+
 #: src/components/sidebar/TreeSearch.tsx
 msgid "Nothing found"
 msgstr "Nothing found"
@@ -554,6 +588,18 @@ msgstr "Nothing found"
 msgid "Oldest first"
 msgstr "Oldest first"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On desktop"
+msgstr "On desktop"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile"
+msgstr "On mobile"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile, show action buttons at the bottom of the screen"
+msgstr "On mobile, show action buttons at the bottom of the screen"
+
 #: src/pages/ErrorPage.tsx
 msgid "Oops!"
 msgstr "Oops!"
@@ -571,6 +617,7 @@ msgid "Open current entry in a new tab in the background"
 msgstr "Open current entry in a new tab in the background"
 
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/OpenExternalLink.tsx
 msgid "Open link"
 msgstr "Open link"
 
@@ -582,6 +629,10 @@ msgstr "Open link in new background tab"
 msgid "Open link in new tab"
 msgstr "Open link in new tab"
 
+#: src/pages/app/Layout.tsx
+msgid "Open menu"
+msgstr "Open menu"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Open next entry"
 msgstr "Open next entry"
@@ -607,6 +658,10 @@ msgstr "OPML export"
 msgid "OPML file"
 msgstr "OPML file"
 
+#: src/components/content/add/ImportOpml.tsx
+msgid "OPML file is required"
+msgstr "OPML file is required"
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "Order"
@@ -665,6 +720,7 @@ msgstr "Registrations are closed on this CommaFeed instance"
 msgid "REST API"
 msgstr "REST API"
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Right click"
 msgstr "Right click"
@@ -677,10 +733,18 @@ msgstr "Right click"
 msgid "Save"
 msgstr "Save"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scroll selected entry to the top of the page"
+msgstr "Scroll selected entry to the top of the page"
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Scroll smoothly when navigating between entries"
 msgstr "Scroll smoothly when navigating between entries"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scrolling"
+msgstr "Scrolling"
+
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/TreeSearch.tsx
@@ -704,7 +768,7 @@ msgstr "Set focus on previous entry without opening it"
 msgid "Settings"
 msgstr "Settings"
 
-#: src/app/slices/user.ts
+#: src/app/user/slice.ts
 msgid "Settings saved."
 msgstr "Settings saved."
 
@@ -716,11 +780,20 @@ msgstr "Share"
 msgid "Sharing sites"
 msgstr "Sharing sites"
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Shift"
 msgstr "Shift"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show CommaFeed's own context menu on right click"
+msgstr "Show CommaFeed's own context menu on right click"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show confirmation when marking all entries as read"
+msgstr "Show confirmation when marking all entries as read"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Show entry menu (desktop)"
 msgstr "Show entry menu (desktop)"
@@ -729,6 +802,10 @@ msgstr "Show entry menu (desktop)"
 msgid "Show entry menu (mobile)"
 msgstr "Show entry menu (mobile)"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show external link icon"
+msgstr "Show external link icon"
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show feeds and categories with no unread entries"
 msgstr "Show feeds and categories with no unread entries"
@@ -737,6 +814,14 @@ msgstr "Show feeds and categories with no unread entries"
 msgid "Show keyboard shortcut help"
 msgstr "Show keyboard shortcut help"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Show native menu (desktop)"
+msgstr "Show native menu (desktop)"
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show star icon"
+msgstr "Show star icon"
+
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/WelcomePage.tsx
@@ -754,6 +839,7 @@ msgstr "Space"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Star"
 msgstr "Star"
 
@@ -781,19 +867,22 @@ msgid "Success"
 msgstr "Success"
 
 #: src/components/KeyboardShortcutsHelp.tsx
-msgid "Swipe header to the right"
-msgstr "Swipe header to the right"
+msgid "Swipe header to the left"
+msgstr "Swipe header to the left"
 
-#: src/components/header/ProfileMenu.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Switch to dark theme"
 msgstr "Switch to dark theme"
 
-#: src/components/header/ProfileMenu.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Switch to light theme"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "System"
+msgstr "System"
+
+#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Tags"
 msgstr "Tags"
@@ -806,6 +895,10 @@ msgstr "The URL for the feed you want to subscribe to. You can also use the webs
 msgid "Theme"
 msgstr "Theme"
 
+#: 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 "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"
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Toggle read status of current entry"
 msgstr "Toggle read status of current entry"
@@ -814,6 +907,10 @@ msgstr "Toggle read status of current entry"
 msgid "Toggle sidebar"
 msgstr "Toggle sidebar"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Toggle starred status of current entry"
+msgstr "Toggle starred status of current entry"
+
 #: src/pages/auth/LoginPage.tsx
 msgid "Try out CommaFeed with the demo account: demo/demo"
 msgstr "Try out CommaFeed with the demo account: demo/demo"
@@ -828,6 +925,7 @@ msgstr "Unread"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Unstar"
 msgstr "Unstar"
 

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

@@ -13,10 +13,6 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/components/content/add/CategorySelect.tsx
-msgid "{0} (in {1})"
-msgstr ""
-
 #: src/pages/app/AboutPage.tsx
 msgid "<0>CommaFeed is an open-source project. Sources are hosted on </0><1>GitHub</1>."
 msgstr ""
@@ -72,7 +68,8 @@ msgid "All"
 msgstr "Todo"
 
 #: src/components/settings/DisplaySettings.tsx
-msgid "Always scroll selected entry to the top of the page, even if it fits entirely on screen"
+#: src/components/settings/DisplaySettings.tsx
+msgid "Always"
 msgstr ""
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
@@ -87,6 +84,10 @@ msgstr "Un archivo opml es un archivo XML que contiene categorías y direcciones
 msgid "Analyze feed"
 msgstr "Analizar alimentación"
 
+#: src/components/AnnouncementDialog.tsx
+msgid "Announcement"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
 msgstr "clave API"
@@ -171,10 +172,18 @@ msgstr "Cambiar la contraseña generará una nueva clave API"
 msgid "Check that the feed is working"
 msgstr "Compruebe que el feed funciona"
 
+#: src/pages/app/Layout.tsx
+msgid "Close menu"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 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 siguiente elemento no leído"
@@ -203,10 +212,6 @@ msgstr "Confirmar contraseña"
 msgid "Cozy"
 msgstr "Acogedor"
 
-#: src/components/content/FeedEntryFooter.tsx
-msgid "Create tag: {query}"
-msgstr "Crear etiqueta: {consulta}"
-
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr ""
@@ -227,6 +232,10 @@ msgstr ""
 msgid "Custom JS code that will be executed on page load"
 msgstr ""
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Dark"
+msgstr ""
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Fecha de creación"
@@ -304,6 +313,10 @@ msgstr "Entrar"
 msgid "Enter your current password to change profile settings"
 msgstr "Ingrese su contraseña actual para cambiar la configuración del perfil"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Entry headers"
+msgstr ""
+
 #: src/components/Alert.tsx
 msgid "Error"
 msgstr ""
@@ -339,9 +352,13 @@ msgstr "URL de fuente"
 msgid "Fetch all my feeds now"
 msgstr ""
 
-#: src/components/content/add/ImportOpml.tsx
-msgid "file is required"
-msgstr "archivo requerido"
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API"
+msgstr ""
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API URL"
+msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Filtering expression"
@@ -391,6 +408,10 @@ msgstr "Identificación"
 msgid "If not empty, an expression evaluating to 'true' or 'false'. If false, new entries for this feed will be marked as read automatically."
 msgstr "Si no está vacío, una expresión que se evalúa como 'verdadero' o 'falso'. "
 
+#: 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 "Si encuentra un problema, infórmelo en la página de problemas del proyecto GitHub."
@@ -429,6 +450,10 @@ msgstr "Última actualización"
 msgid "Last refresh message"
 msgstr "Último mensaje de actualización"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "Light"
+msgstr ""
+
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx
 #: src/pages/app/TagDetailsPage.tsx
@@ -521,6 +546,11 @@ msgstr "Nombre"
 msgid "Navigate to a subscription by entering its name"
 msgstr "Navegar a una suscripción ingresando su nombre"
 
+#: src/components/settings/DisplaySettings.tsx
+#: src/components/settings/DisplaySettings.tsx
+msgid "Never"
+msgstr ""
+
 #: src/components/settings/ProfileSettings.tsx
 msgid "New password"
 msgstr "Nueva contraseña"
@@ -546,6 +576,10 @@ msgstr "Bookmarklet del siguiente elemento no leído"
 msgid "No more entries"
 msgstr "No más entradas"
 
+#: src/components/content/ShareButtons.tsx
+msgid "No sharing options available."
+msgstr ""
+
 #: src/components/sidebar/TreeSearch.tsx
 msgid "Nothing found"
 msgstr "Nada encontrado"
@@ -554,6 +588,18 @@ msgstr "Nada encontrado"
 msgid "Oldest first"
 msgstr "más antigua primero"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "On desktop"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "On mobile"
+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 "¡Ups!"
@@ -571,6 +617,7 @@ msgid "Open current entry in a new tab in the background"
 msgstr "Abrir la entrada actual en una nueva pestaña en segundo plano"
 
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/OpenExternalLink.tsx
 msgid "Open link"
 msgstr "Abrir enlace"
 
@@ -582,6 +629,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 "Abrir siguiente entrada"
@@ -607,6 +658,10 @@ msgstr "Exportación OPML"
 msgid "OPML file"
 msgstr "archivo OPML"
 
+#: src/components/content/add/ImportOpml.tsx
+msgid "OPML file is required"
+msgstr ""
+
 #: src/pages/app/AboutPage.tsx
 msgid "Order"
 msgstr "Orden"
@@ -665,6 +720,7 @@ msgstr "Los registros están cerrados en esta instancia de CommaFeed"
 msgid "REST API"
 msgstr "API REST"
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Right click"
 msgstr ""
@@ -677,10 +733,18 @@ msgstr ""
 msgid "Save"
 msgstr "Guardar"
 
+#: 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 "Desplazarse suavemente al navegar entre entradas"
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Scrolling"
+msgstr ""
+
 #: src/components/header/Header.tsx
 #: src/components/header/Header.tsx
 #: src/components/sidebar/TreeSearch.tsx
@@ -704,7 +768,7 @@ msgstr "Poner el foco en la entrada anterior sin abrirla"
 msgid "Settings"
 msgstr "Configuraciones"
 
-#: src/app/slices/user.ts
+#: src/app/user/slice.ts
 msgid "Settings saved."
 msgstr "Ajustes guardados."
 
@@ -716,11 +780,20 @@ msgstr "Compartir"
 msgid "Sharing sites"
 msgstr "Compartir sitios"
 
+#: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Shift"
 msgstr "Cambio"
 
+#: 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 ""
@@ -729,6 +802,10 @@ msgstr ""
 msgid "Show entry menu (mobile)"
 msgstr ""
 
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show external link icon"
+msgstr ""
+
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show feeds and categories with no unread entries"
 msgstr "Mostrar feeds y categorías sin entradas no leídas"
@@ -737,6 +814,14 @@ msgstr "Mostrar feeds y categorías sin entradas no leídas"
 msgid "Show keyboard shortcut help"
 msgstr "Mostrar ayuda de atajo de teclado"
 
+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Show native menu (desktop)"
+msgstr ""
+
+#: src/components/settings/DisplaySettings.tsx
+msgid "Show star icon"
+msgstr ""
+
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/auth/RegistrationPage.tsx
 #: src/pages/WelcomePage.tsx
@@ -754,6 +839,7 @@ msgstr "Espacio"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Star"
 msgstr "estrella"
 
@@ -781,19 +867,22 @@ msgid "Success"
 msgstr "Éxito"
 
 #: 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 "Cambiar a tema oscuro"
 
-#: src/components/header/ProfileMenu.tsx
 #: src/pages/WelcomePage.tsx
 msgid "Switch to light theme"
 msgstr "Cambiar a tema claro"
 
+#: src/components/header/ProfileMenu.tsx
+msgid "System"
+msgstr ""
+
+#: src/components/content/FeedEntryFooter.tsx
 #: src/components/content/FeedEntryFooter.tsx
 msgid "Tags"
 msgstr "Etiquetas"
@@ -806,6 +895,10 @@ msgstr "La URL de la fuente a la que desea suscribirse. "
 msgid "Theme"
 msgstr "Tema"
 
+#: 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 "Alternar estado de lectura de la entrada actual"
@@ -814,6 +907,10 @@ msgstr "Alternar estado de lectura de la entrada actual"
 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 "Pruebe CommaFeed con la cuenta demo: demo/demo"
@@ -828,6 +925,7 @@ msgstr "No leído"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Unstar"
 msgstr "Desmarcar"