release 4.5.0

Update mysql Docker tag to v9

.github/workflows/build.yml

@@ -7,78 +7,110 @@ 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"
           cache: "maven"
 
-      # Build
+      # Build & Test
       - name: Build with Maven
-        run: mvn --batch-mode --update-snapshots verify
+        run: mvn --batch-mode --no-transfer-progress install
+        env:
+          TEST_DATABASE: h2
 
+      - name: Run integration tests on PostgreSQL
+        run: mvn --batch-mode --no-transfer-progress failsafe:integration-test failsafe:verify
+        env:
+          TEST_DATABASE: postgresql
+
+      - name: Run integration tests on MySQL
+        run: mvn --batch-mode --no-transfer-progress failsafe:integration-test failsafe:verify
+        env:
+          TEST_DATABASE: mysql
+
+      - name: Run integration tests on MariaDB
+        run: mvn --batch-mode --no-transfer-progress failsafe:integration-test failsafe:verify
+        env:
+          TEST_DATABASE: mariadb
+
+      - name: Run integration tests with Redis cache enabled
+        run: mvn --batch-mode --no-transfer-progress failsafe:integration-test failsafe:verify
+        env:
+          TEST_DATABASE: h2
+          REDIS: true
+
+      # Upload artifacts
       - name: Upload JAR
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
-        if: ${{ matrix.java == '8' }}
+        if: ${{ matrix.java == '17' }}
         with:
           name: commafeed.jar
           path: commafeed-server/target/commafeed.jar
 
+      - name: Upload Playwright artifacts
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-artifacts
+          path: |
+            **/target/playwright-artifacts/
+
       # Docker
       - name: Login to Container Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
-        if: ${{ matrix.java == '8' }}
+        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
+        uses: docker/build-push-action@v6
-        if: ${{ matrix.java == '8' && github.ref_type == 'tag' }}
+        if: ${{ matrix.java == '17' && github.ref_type == 'tag' }}
         with:
           context: .
           push: true
-          platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
+          platforms: linux/amd64,linux/arm64/v8
           tags: |
             athou/commafeed:latest
             athou/commafeed:${{ github.ref_name }}
 
       - name: Docker build and push master
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v6
-        if: ${{ matrix.java == '8' && github.ref_name == 'master' }}
+        if: ${{ matrix.java == '17' && github.ref_name == 'master' }}
         with:
           context: .
           push: true
-          platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
+          platforms: linux/amd64,linux/arm64/v8
           tags: athou/commafeed:master
 
       # Create GitHub release after Docker image has been published
       - name: Extract Changelog Entry
         uses: mindsers/changelog-reader-action@v2
-        if: ${{ matrix.java == '8' && github.ref_type == 'tag' }}
+        if: ${{ matrix.java == '17' && github.ref_type == 'tag' }}
         id: changelog_reader
         with:
           version: ${{ github.ref_name }}
 
       - name: Create GitHub release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
-        if: ${{ matrix.java == '8' && github.ref_type == 'tag' }}
+        if: ${{ matrix.java == '17' && github.ref_type == 'tag' }}
         with:
           name: CommaFeed ${{ github.ref_name }}
           body: ${{ steps.changelog_reader.outputs.changes }}

.gitignore

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

.mvn/wrapper/maven-wrapper.properties

@@ -6,7 +6,7 @@
 # "License"); you may not use this file except in compliance
 # with the License.  You may obtain a copy of the License at
 #
-#   https://www.apache.org/licenses/LICENSE-2.0
+#   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
@@ -14,5 +14,5 @@
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
-distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.8.3/apache-maven-3.8.3-bin.zip
+distributionType=only-script
-wrapperUrl=https://repo.maven.apache.org/maven2/org/apache/maven/wrapper/maven-wrapper/3.1.1/maven-wrapper-3.1.1.jar
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.8/apache-maven-3.9.8-bin.zip

CHANGELOG.md

@@ -1,5 +1,133 @@
 # Changelog
 
+## [4.5.0]
+
+- significantly reduce the time needed to retrieve entries or mark them as read, especially when there are a lot of
+  entries (#1452)
+- fix a race condition where a feed could be refreshed before it was created in the database
+- fix an issue that could cause the websocket notification to contain the wrong number of unread entries when using
+  mysql/mariadb
+- fix an error when trying to mark all starred entries as read
+- remove the `onlyIds` parameter from REST endpoints since retrieving all the entries is now just as fast
+- remove support for microsoft sqlserver because it's not covered with integration tests (please open an issue if you'd
+  like it back)
+
+## [4.4.1]
+
+- fix vertical scrolling issues with Safari (#1168)
+- the default value for new users for the "star entry" button and the "open in new tab" button in the entry headers is
+  now "on desktop" instead of "always"
+- the "keyboard shortcuts" help page now shows "Cmd" instead of "Ctrl" on macOS (#1389)
+- remove a superfluous feed fetch when subscribing to a feed (#1431)
+- the Docker image now uses Java 21
+
+## [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)
@@ -109,7 +237,8 @@
 ## [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`
 

Dockerfile

@@ -1,13 +1,12 @@
-FROM eclipse-temurin:17-jre
+FROM eclipse-temurin:21.0.3_9-jre
 
 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/.eslintignore

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

commafeed-client/.eslintrc

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

commafeed-client/.prettierrc

@@ -1,7 +0,0 @@
-{
-    "printWidth": 140,
-    "semi": false,
-    "tabWidth": 4,
-    "arrowParens": "avoid",
-    "endOfLine": "auto"
-}

commafeed-client/biome.json

@@ -0,0 +1,19 @@
+{
+    "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+    "formatter": {
+        "indentStyle": "space",
+        "indentWidth": 4,
+        "lineEnding": "lf",
+        "lineWidth": 140
+    },
+    "javascript": {
+        "formatter": {
+            "trailingCommas": "es5",
+            "semicolons": "asNeeded",
+            "arrowParentheses": "asNeeded"
+        }
+    },
+    "files": {
+        "ignore": ["dist", "node_modules", "target", "target-ide"]
+    }
+}

commafeed-client/package.json

@@ -1,85 +1,79 @@
 {
-  "name": "commafeed-client",
+    "name": "commafeed-client",
-  "private": true,
+    "private": true,
-  "version": "0.0.0",
+    "version": "0.0.0",
-  "type": "module",
+    "type": "module",
-  "scripts": {
+    "scripts": {
-    "dev": "vite --host",
+        "dev": "vite --host",
-    "dev:typescript": "tsc --watch",
+        "dev:typescript": "tsc --watch",
-    "build": "tsc && vite build",
+        "build": "tsc && vite build",
-    "preview": "vite preview",
+        "preview": "vite preview",
-    "test": "vitest",
+        "test": "vitest",
-    "test:ci": "vitest run",
+        "test:ci": "vitest run",
-    "eslint": "eslint --ext=.js,.jsx,.ts,.tsx src",
+        "lint": "biome check ./src",
-    "i18n:extract": "lingui extract --clean"
+        "lint:fix": "biome check --write ./src",
-  },
+        "i18n:extract": "lingui extract --clean"
-  "dependencies": {
+    },
-    "@emotion/react": "^11.11.0",
+    "dependencies": {
-    "@fontsource/open-sans": "^5.0.1",
+        "@emotion/react": "^11.11.4",
-    "@lingui/core": "^4.1.2",
+        "@fontsource/open-sans": "^5.0.28",
-    "@lingui/macro": "^4.1.2",
+        "@lingui/core": "^4.11.2",
-    "@lingui/react": "^4.1.2",
+        "@lingui/macro": "^4.11.2",
-    "@mantine/core": "^6.0.11",
+        "@lingui/react": "^4.11.2",
-    "@mantine/form": "^6.0.11",
+        "@mantine/core": "^7.11.1",
-    "@mantine/hooks": "^6.0.11",
+        "@mantine/form": "^7.11.1",
-    "@mantine/modals": "^6.0.11",
+        "@mantine/hooks": "^7.11.1",
-    "@mantine/notifications": "^6.0.11",
+        "@mantine/modals": "^7.11.1",
-    "@mantine/spotlight": "^6.0.11",
+        "@mantine/notifications": "^7.11.1",
-    "@mantine/styles": "^6.0.11",
+        "@mantine/spotlight": "^7.11.1",
-    "@monaco-editor/react": "^4.5.1",
+        "@monaco-editor/react": "^4.6.0",
-    "@reduxjs/toolkit": "^1.9.5",
+        "@reduxjs/toolkit": "^2.2.6",
-    "axios": "^1.4.0",
+        "axios": "^1.7.2",
-    "dayjs": "^1.11.7",
+        "dayjs": "^1.11.11",
-    "escape-string-regexp": "^5.0.0",
+        "escape-string-regexp": "^5.0.0",
-    "interweave": "^13.1.0",
+        "interweave": "^13.1.0",
-    "monaco-editor": "^0.38.0",
+        "monaco-editor": "^0.50.0",
-    "mousetrap": "^1.6.5",
+        "mousetrap": "^1.6.5",
-    "re-resizable": "^6.9.9",
+        "react": "^18.3.1",
-    "react": "^18.2.0",
+        "react-async-hook": "^4.0.0",
-    "react-async-hook": "^4.0.0",
+        "react-contexify": "^6.0.0",
-    "react-contexify": "^6.0.0",
+        "react-device-detect": "^2.2.3",
-    "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
-    "react-ga4": "^2.1.0",
+        "react-draggable": "^4.4.6",
-    "react-icons": "^4.8.0",
+        "react-ga4": "^2.1.0",
-    "react-infinite-scroller": "^1.2.6",
+        "react-helmet": "^6.1.0",
-    "react-redux": "^8.0.5",
+        "react-icons": "^5.2.1",
-    "react-router-dom": "^6.11.2",
+        "react-infinite-scroller": "^1.2.6",
-    "react-swipeable": "^7.0.0",
+        "react-redux": "^9.1.2",
-    "swagger-ui-react": "^4.18.3",
+        "react-router-dom": "^6.24.1",
-    "throttle-debounce": "^5.0.0",
+        "react-swipeable": "^7.0.1",
-    "tinycon": "^0.6.8",
+        "redoc": "^2.1.5",
-    "use-local-storage": "^3.0.0",
+        "throttle-debounce": "^5.0.2",
-    "websocket-heartbeat-js": "^1.1.2"
+        "tinycon": "^0.6.8",
-  },
+        "tss-react": "^4.9.10",
-  "devDependencies": {
+        "use-local-storage": "^3.0.0",
-    "@lingui/cli": "^4.1.2",
+        "vite-plugin-biome": "^1.0.12",
-    "@lingui/vite-plugin": "^4.1.2",
+        "websocket-heartbeat-js": "^1.1.3"
-    "@types/eslint": "^8.40.0",
+    },
-    "@types/mousetrap": "^1.6.11",
+    "devDependencies": {
-    "@types/react": "^18.2.6",
+        "@biomejs/biome": "^1.8.3",
-    "@types/react-dom": "^18.2.4",
+        "@lingui/cli": "^4.11.2",
-    "@types/react-infinite-scroller": "^1.2.3",
+        "@lingui/vite-plugin": "^4.11.2",
-    "@types/swagger-ui-react": "^4.18.0",
+        "@types/mousetrap": "^1.6.15",
-    "@types/throttle-debounce": "^5.0.0",
+        "@types/react": "^18.3.3",
-    "@types/tinycon": "^0.6.3",
+        "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
+        "@types/react-helmet": "^6.1.11",
-    "@typescript-eslint/parser": "^5.59.7",
+        "@types/react-infinite-scroller": "^1.2.5",
-    "@vitejs/plugin-react": "^4.0.0",
+        "@types/swagger-ui-react": "^4.18.3",
-    "babel-plugin-macros": "^3.1.0",
+        "@types/throttle-debounce": "^5.0.2",
-    "eslint": "^8.41.0",
+        "@types/tinycon": "^0.6.5",
-    "eslint-config-airbnb": "^19.0.4",
+        "@vitejs/plugin-react": "^4.3.1",
-    "eslint-config-airbnb-typescript": "^17.0.0",
+        "babel-plugin-macros": "^3.1.0",
-    "eslint-config-prettier": "^8.8.0",
+        "rollup-plugin-visualizer": "^5.12.0",
-    "eslint-config-react-app": "^7.0.1",
+        "typescript": "^5.5.3",
-    "eslint-plugin-hooks": "^0.4.3",
+        "vite": "^5.3.3",
-    "eslint-plugin-prettier": "^4.2.1",
+        "vite-tsconfig-paths": "^4.3.2",
-    "prettier": "^2.8.8",
+        "vitest": "^1.6.0",
-    "rollup-plugin-visualizer": "^5.9.0",
+        "vitest-mock-extended": "^1.3.1"
-    "typescript": "^5.0.4",
+    }
-    "vite": "^4.3.9",
-    "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.31.1",
-    "vitest-mock-extended": "^1.1.3"
-  }
 }

commafeed-client/pom.xml

@@ -1,21 +1,29 @@
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 
 	<modelVersion>4.0.0</modelVersion>
 
 	<parent>
 		<groupId>com.commafeed</groupId>
 		<artifactId>commafeed</artifactId>
-		<version>3.9.0</version>
+		<version>4.5.0</version>
 	</parent>
 	<artifactId>commafeed-client</artifactId>
 	<name>CommaFeed Client</name>
 
+	<properties>
+		<!-- renovate: datasource=node-version depName=node -->
+		<node.version>v20.15.0</node.version>
+		<!-- renovate: datasource=npm depName=npm -->
+		<npm.version>10.8.1</npm.version>
+	</properties>
+
 	<build>
 		<plugins>
 			<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 +33,8 @@
 						</goals>
 						<phase>compile</phase>
 						<configuration>
-							<nodeVersion>v16.16.0</nodeVersion>
+							<nodeVersion>${node.version}</nodeVersion>
-							<npmVersion>8.15.0</npmVersion>
+							<npmVersion>${npm.version}</npmVersion>
 						</configuration>
 					</execution>
 					<execution>
@@ -39,16 +47,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 +71,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,19 +1,20 @@
 import { i18n } from "@lingui/core"
 import { I18nProvider } from "@lingui/react"
-import { ColorScheme, ColorSchemeProvider, MantineProvider } from "@mantine/core"
+import { MantineProvider } from "@mantine/core"
-import { useColorScheme } 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 { redirectTo } from "app/redirect/slice"
-import { reloadServerInfos } from "app/slices/server"
+import { reloadServerInfos } from "app/server/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { categoryUnreadCount } from "app/utils"
+import { DisablePullToRefresh } from "components/DisablePullToRefresh"
 import { ErrorBoundary } from "components/ErrorBoundary"
 import { Header } from "components/header/Header"
 import { Tree } from "components/sidebar/Tree"
 import { useBrowserExtension } from "hooks/useBrowserExtension"
 import { useI18n } from "i18n"
+import { WelcomePage } from "pages/WelcomePage"
 import { AdminUsersPage } from "pages/admin/AdminUsersPage"
 import { MetricsPage } from "pages/admin/MetricsPage"
 import { AboutPage } from "pages/app/AboutPage"
@@ -28,45 +29,52 @@ import { TagDetailsPage } from "pages/app/TagDetailsPage"
 import { LoginPage } from "pages/auth/LoginPage"
 import { PasswordRecoveryPage } from "pages/auth/PasswordRecoveryPage"
 import { RegistrationPage } from "pages/auth/RegistrationPage"
-import { WelcomePage } from "pages/WelcomePage"
 import React, { useEffect } from "react"
+import { isSafari } from "react-device-detect"
 import ReactGA from "react-ga4"
+import { Helmet } from "react-helmet"
 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
-                <MantineProvider
+                defaultColorScheme="auto"
-                    withGlobalStyles
+                theme={{
-                    withNormalizeCSS
+                    primaryColor: "orange",
-                    theme={{
+                    fontFamily: "Open Sans",
-                        primaryColor: "orange",
+                    colors: {
-                        colorScheme,
+                        // keep using dark colors from mantine v6
-                        fontFamily: "Open Sans",
+                        // https://v6.mantine.dev/theming/colors/#default-colors
-                    }}
+                        dark: [
-                >
+                            "#C1C2C5",
-                    <ModalsProvider>
+                            "#A6A7AB",
-                        <Notifications position="bottom-right" zIndex={9999} />
+                            "#909296",
-                        <ErrorBoundary>{props.children}</ErrorBoundary>
+                            "#5c5f66",
-                    </ModalsProvider>
+                            "#373A40",
-                </MantineProvider>
+                            "#2C2E33",
-            </ColorSchemeProvider>
+                            "#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 +85,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 +168,15 @@ function BrowserExtensionBadgeUnreadCountHandler() {
     return null
 }
 
+function CustomCode() {
+    return (
+        <Helmet>
+            <link rel="stylesheet" type="text/css" href="custom_css.css" />
+            <script type="text/javascript" src="custom_js.js" />
+        </Helmet>
+    )
+}
+
 export function App() {
     useI18n()
     const dispatch = useAppDispatch()
@@ -177,6 +194,12 @@ export function App() {
                     <GoogleAnalyticsHandler />
                     <RedirectHandler />
                     <AppRoutes />
+                    <CustomCode />
+                    {/* disable pull-to-refresh as it messes with vertical scrolling
+                        safari behaves weirdly when overscroll-behavior is set to none so we disable it only for other browsers
+                        https://github.com/Athou/commafeed/issues/1168
+                    */}
+                    {!isSafari && <DisablePullToRefresh />}
                 </HashRouter>
             </>
         </Providers>

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

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

commafeed-client/src/app/client.ts

@@ -1,118 +1,127 @@
-import axios from "axios"
+import axios, { type AxiosError } from "axios"
-import {
+import type {
-    AddCategoryRequest,
+    AddCategoryRequest,
-    Category,
+    AdminSaveUserRequest,
-    CategoryModificationRequest,
+    AuthenticationError,
-    CollapseRequest,
+    Category,
-    Entries,
+    CategoryModificationRequest,
-    FeedInfo,
+    CollapseRequest,
-    FeedInfoRequest,
+    Entries,
-    FeedModificationRequest,
+    FeedInfo,
-    GetEntriesPaginatedRequest,
+    FeedInfoRequest,
-    IDRequest,
+    FeedModificationRequest,
-    LoginRequest,
+    GetEntriesPaginatedRequest,
-    MarkRequest,
+    IDRequest,
-    Metrics,
+    LoginRequest,
-    MultipleMarkRequest,
+    MarkRequest,
-    PasswordResetRequest,
+    Metrics,
-    ProfileModificationRequest,
+    MultipleMarkRequest,
-    RegistrationRequest,
+    PasswordResetRequest,
-    ServerInfo,
+    ProfileModificationRequest,
-    Settings,
+    RegistrationRequest,
-    StarRequest,
+    ServerInfo,
-    SubscribeRequest,
+    Settings,
-    Subscription,
+    StarRequest,
-    TagRequest,
+    SubscribeRequest,
-    UserModel,
+    Subscription,
-} from "./types"
+    TagRequest,
-
+    UserModel,
-const axiosInstance = axios.create({ baseURL: "./rest", withCredentials: true })
+} from "./types"
-axiosInstance.interceptors.response.use(
+
-    response => response,
+const axiosInstance = axios.create({ baseURL: "./rest", withCredentials: true })
-    error => {
+axiosInstance.interceptors.response.use(
-        if (
+    response => response,
-            (error.response.status === 401 && error.response.data === "Credentials are required to access this resource.") ||
+    error => {
-            (error.response.status === 403 && error.response.data === "You don't have the required role to access this resource.")
+        if (isAuthenticationError(error)) {
-        ) {
+            const data = error.response?.data
-            window.location.hash = "/welcome"
+            window.location.hash = data?.allowRegistrations ? "/welcome" : "/login"
-        }
+        }
-        throw error
+        throw error
-    }
+    }
-)
+)
-
+
-export const client = {
+function isAuthenticationError(error: unknown): error is AxiosError<AuthenticationError> {
-    category: {
+    return axios.isAxiosError(error) && !!error.response && [401, 403].includes(error.response.status)
-        getRoot: () => axiosInstance.get<Category>("category/get"),
+}
-        modify: (req: CategoryModificationRequest) => axiosInstance.post("category/modify", req),
+
-        collapse: (req: CollapseRequest) => axiosInstance.post("category/collapse", req),
+export const client = {
-        getEntries: (req: GetEntriesPaginatedRequest) => axiosInstance.get<Entries>("category/entries", { params: req }),
+    category: {
-        markEntries: (req: MarkRequest) => axiosInstance.post("category/mark", req),
+        getRoot: async () => await axiosInstance.get<Category>("category/get"),
-        add: (req: AddCategoryRequest) => axiosInstance.post("category/add", req),
+        modify: async (req: CategoryModificationRequest) => await axiosInstance.post("category/modify", req),
-        delete: (req: IDRequest) => axiosInstance.post("category/delete", req),
+        collapse: async (req: CollapseRequest) => await axiosInstance.post("category/collapse", req),
-    },
+        getEntries: async (req: GetEntriesPaginatedRequest) => await axiosInstance.get<Entries>("category/entries", { params: req }),
-    entry: {
+        markEntries: async (req: MarkRequest) => await axiosInstance.post("category/mark", req),
-        mark: (req: MarkRequest) => axiosInstance.post("entry/mark", req),
+        add: async (req: AddCategoryRequest) => await axiosInstance.post("category/add", req),
-        markMultiple: (req: MultipleMarkRequest) => axiosInstance.post("entry/markMultiple", req),
+        delete: async (req: IDRequest) => await axiosInstance.post("category/delete", req),
-        star: (req: StarRequest) => axiosInstance.post("entry/star", req),
+    },
-        getTags: () => axiosInstance.get<string[]>("entry/tags"),
+    entry: {
-        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),
-    feed: {
+        star: async (req: StarRequest) => await axiosInstance.post("entry/star", req),
-        get: (id: string) => axiosInstance.get<Subscription>(`feed/get/${id}`),
+        getTags: async () => await axiosInstance.get<string[]>("entry/tags"),
-        modify: (req: FeedModificationRequest) => axiosInstance.post("feed/modify", req),
+        tag: async (req: TagRequest) => await axiosInstance.post("entry/tag", req),
-        getEntries: (req: GetEntriesPaginatedRequest) => axiosInstance.get<Entries>("feed/entries", { params: req }),
+    },
-        markEntries: (req: MarkRequest) => axiosInstance.post("feed/mark", req),
+    feed: {
-        fetchFeed: (req: FeedInfoRequest) => axiosInstance.post<FeedInfo>("feed/fetch", req),
+        get: async (id: string) => await axiosInstance.get<Subscription>(`feed/get/${id}`),
-        refreshAll: () => axiosInstance.get("feed/refreshAll"),
+        modify: async (req: FeedModificationRequest) => await axiosInstance.post("feed/modify", req),
-        subscribe: (req: SubscribeRequest) => axiosInstance.post<number>("feed/subscribe", req),
+        getEntries: async (req: GetEntriesPaginatedRequest) => await axiosInstance.get<Entries>("feed/entries", { params: req }),
-        unsubscribe: (req: IDRequest) => axiosInstance.post("feed/unsubscribe", req),
+        markEntries: async (req: MarkRequest) => await axiosInstance.post("feed/mark", req),
-        importOpml: (req: File) => {
+        fetchFeed: async (req: FeedInfoRequest) => await axiosInstance.post<FeedInfo>("feed/fetch", req),
-            const formData = new FormData()
+        refreshAll: async () => await axiosInstance.get("feed/refreshAll"),
-            formData.append("file", req)
+        subscribe: async (req: SubscribeRequest) => await axiosInstance.post<number>("feed/subscribe", req),
-            return axiosInstance.post("feed/import", formData, {
+        unsubscribe: async (req: IDRequest) => await axiosInstance.post("feed/unsubscribe", req),
-                headers: {
+        importOpml: async (req: File) => {
-                    "Content-Type": "multipart/form-data",
+            const formData = new FormData()
-                },
+            formData.append("file", req)
-            })
+            return await axiosInstance.post("feed/import", formData, {
-        },
+                headers: {
-    },
+                    "Content-Type": "multipart/form-data",
-    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"),
+    user: {
-        saveSettings: (settings: Settings) => axiosInstance.post("user/settings", settings),
+        login: async (req: LoginRequest) => await axiosInstance.post("user/login", req),
-        getProfile: () => axiosInstance.get<UserModel>("user/profile"),
+        register: async (req: RegistrationRequest) => await axiosInstance.post("user/register", req),
-        saveProfile: (req: ProfileModificationRequest) => axiosInstance.post("user/profile", req),
+        passwordReset: async (req: PasswordResetRequest) => await axiosInstance.post("user/passwordReset", req),
-        deleteProfile: () => axiosInstance.post("user/profile/deleteAccount"),
+        getSettings: async () => await axiosInstance.get<Settings>("user/settings"),
-    },
+        saveSettings: async (settings: Settings) => await axiosInstance.post("user/settings", settings),
-    server: {
+        getProfile: async () => await axiosInstance.get<UserModel>("user/profile"),
-        getServerInfos: () => axiosInstance.get<ServerInfo>("server/get"),
+        saveProfile: async (req: ProfileModificationRequest) => await axiosInstance.post("user/profile", req),
-    },
+        deleteProfile: async () => await axiosInstance.post("user/profile/deleteAccount"),
-    admin: {
+    },
-        getAllUsers: () => axiosInstance.get<UserModel[]>("admin/user/getAll"),
+    server: {
-        saveUser: (req: UserModel) => axiosInstance.post("admin/user/save", req),
+        getServerInfos: async () => await axiosInstance.get<ServerInfo>("server/get"),
-        deleteUser: (req: IDRequest) => axiosInstance.post("admin/user/delete", req),
+    },
-        getMetrics: () => axiosInstance.get<Metrics>("admin/metrics"),
+    admin: {
-    },
+        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"),
- * transform an error object to an array of strings that can be displayed to the user
+    },
- * @param err an error object (e.g. from axios)
+}
- * @returns an array of messages to show the user
+
- */
+/**
-export const errorToStrings = (err: unknown) => {
+ * transform an error object to an array of strings that can be displayed to the user
-    let strings: string[] = []
+ * @param err an error object (e.g. from axios)
-
+ * @returns an array of messages to show the user
-    if (axios.isAxiosError(err)) {
+ */
-        if (err.response) {
+export const errorToStrings = (err: unknown) => {
-            const { data } = err.response
+    let strings: string[] = []
-            if (typeof data === "string") strings.push(data)
+
-            if (typeof data === "object" && data.message) strings.push(data.message)
+    if (axios.isAxiosError(err) && err.response) {
-            if (typeof data === "object" && data.errors) strings = [...strings, ...data.errors]
+        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
+
-}
+    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,101 +1,112 @@
-import { t } from "@lingui/macro"
+import { t } from "@lingui/macro"
-import { DEFAULT_THEME } from "@mantine/core"
+import type { IconType } from "react-icons"
-import { IconType } from "react-icons"
+import { FaAt } from "react-icons/fa"
-import { FaAt } from "react-icons/fa"
+import { SiBuffer, SiFacebook, SiGmail, SiInstapaper, SiPocket, SiTumblr, SiTwitter } from "react-icons/si"
-import { SiBuffer, SiFacebook, SiGmail, SiInstapaper, SiPocket, SiTumblr, SiTwitter } from "react-icons/si"
+import type { Category, Entry, SharingSettings } from "./types"
-import { Category, Entry, SharingSettings } from "./types"
+
-
+const categories: Record<string, Category> = {
-const categories: { [key: string]: Category } = {
+    all: {
-    all: {
+        id: "all",
-        id: "all",
+        name: t`All`,
-        name: t`All`,
+        expanded: false,
-        expanded: false,
+        children: [],
-        children: [],
+        feeds: [],
-        feeds: [],
+        position: 0,
-        position: 0,
+    },
-    },
+    starred: {
-    starred: {
+        id: "starred",
-        id: "starred",
+        name: t`Starred`,
-        name: t`Starred`,
+        expanded: false,
-        expanded: false,
+        children: [],
-        children: [],
+        feeds: [],
-        feeds: [],
+        position: 1,
-        position: 1,
+    },
-    },
+}
-}
+
-
+const sharing: {
-const sharing: {
+    [key in keyof SharingSettings]: {
-    [key in keyof SharingSettings]: {
+        label: string
-        label: string
+        icon: IconType
-        icon: IconType
+        color: `#${string}`
-        color: `#${string}`
+        url: (url: string, description: string) => string
-        url: (url: string, description: string) => string
+    }
-    }
+} = {
-} = {
+    email: {
-    email: {
+        label: "Email",
-        label: "Email",
+        icon: FaAt,
-        icon: FaAt,
+        color: "#000000",
-        color: "#000000",
+        url: (url, desc) => `mailto:?subject=${desc}&body=${url}`,
-        url: (url, desc) => `mailto:?subject=${desc}&body=${url}`,
+    },
-    },
+    gmail: {
-    gmail: {
+        label: "Gmail",
-        label: "Gmail",
+        icon: SiGmail,
-        icon: SiGmail,
+        color: "#EA4335",
-        color: "#EA4335",
+        url: (url, desc) => `https://mail.google.com/mail/?view=cm&fs=1&tf=1&source=mailto&su=${desc}&body=${url}`,
-        url: (url, desc) => `https://mail.google.com/mail/?view=cm&fs=1&tf=1&source=mailto&su=${desc}&body=${url}`,
+    },
-    },
+    facebook: {
-    facebook: {
+        label: "Facebook",
-        label: "Facebook",
+        icon: SiFacebook,
-        icon: SiFacebook,
+        color: "#1B74E4",
-        color: "#1B74E4",
+        url: url => `https://www.facebook.com/sharer/sharer.php?u=${url}`,
-        url: url => `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+    },
-    },
+    twitter: {
-    twitter: {
+        label: "Twitter",
-        label: "Twitter",
+        icon: SiTwitter,
-        icon: SiTwitter,
+        color: "#1D9BF0",
-        color: "#1D9BF0",
+        url: (url, desc) => `https://twitter.com/share?text=${desc}&url=${url}`,
-        url: (url, desc) => `https://twitter.com/share?text=${desc}&url=${url}`,
+    },
-    },
+    tumblr: {
-    tumblr: {
+        label: "Tumblr",
-        label: "Tumblr",
+        icon: SiTumblr,
-        icon: SiTumblr,
+        color: "#375672",
-        color: "#375672",
+        url: (url, desc) => `https://www.tumblr.com/share/link?url=${url}&name=${desc}`,
-        url: (url, desc) => `https://www.tumblr.com/share/link?url=${url}&name=${desc}`,
+    },
-    },
+    pocket: {
-    pocket: {
+        label: "Pocket",
-        label: "Pocket",
+        icon: SiPocket,
-        icon: SiPocket,
+        color: "#EF4154",
-        color: "#EF4154",
+        url: (url, desc) => `https://getpocket.com/save?url=${url}&title=${desc}`,
-        url: (url, desc) => `https://getpocket.com/save?url=${url}&title=${desc}`,
+    },
-    },
+    instapaper: {
-    instapaper: {
+        label: "Instapaper",
-        label: "Instapaper",
+        icon: SiInstapaper,
-        icon: SiInstapaper,
+        color: "#010101",
-        color: "#010101",
+        url: (url, desc) => `https://www.instapaper.com/hello2?url=${url}&title=${desc}`,
-        url: (url, desc) => `https://www.instapaper.com/hello2?url=${url}&title=${desc}`,
+    },
-    },
+    buffer: {
-    buffer: {
+        label: "Buffer",
-        label: "Buffer",
+        icon: SiBuffer,
-        icon: SiBuffer,
+        color: "#000000",
-        color: "#000000",
+        url: (url, desc) => `https://bufferapp.com/add?url=${url}&text=${desc}`,
-        url: (url, desc) => `https://bufferapp.com/add?url=${url}&text=${desc}`,
+    },
-    },
+}
-}
+
-
+export const Constants = {
-export const Constants = {
+    categories,
-    categories,
+    sharing,
-    sharing,
+    layout: {
-    layout: {
+        mobileBreakpoint: 992,
-        mobileBreakpoint: DEFAULT_THEME.breakpoints.md,
+        mobileBreakpointName: "md",
-        headerHeight: 60,
+        headerHeight: 60,
-        entryMaxWidth: 650,
+        entryMaxWidth: 650,
-        isTopVisible: (div: HTMLElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight,
+        isTopVisible: (div: HTMLElement) => {
-        isBottomVisible: (div: HTMLElement) => div.getBoundingClientRect().bottom <= window.innerHeight,
+            const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
-    },
+            return div.getBoundingClientRect().top >= (header?.bottom ?? 0)
-    dom: {
+        },
-        entryId: (entry: Entry) => `entry-id-${entry.id}`,
+        isBottomVisible: (div: HTMLElement) => {
-        entryContextMenuId: (entry: Entry) => entry.id,
+            const footer = document.getElementById(Constants.dom.footerId)?.getBoundingClientRect()
-    },
+            return div.getBoundingClientRect().bottom <= (footer?.top ?? window.innerHeight)
-    browserExtensionUrl: "https://github.com/Athou/commafeed-browser-extension",
+        },
-    bitcoinWalletAddress: "1dymfUxqCWpyD7a6rQSqNy4rLVDBsAr5e",
+    },
-}
+    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,146 +1,145 @@
-/* eslint-disable import/first */
+import { configureStore } from "@reduxjs/toolkit"
-import { configureStore } from "@reduxjs/toolkit"
+import type { client } from "app/client"
-import { client } from "app/client"
+import { loadEntries, loadMoreEntries, markAllEntries, markEntry } from "app/entries/thunks"
-import { reducers } from "app/store"
+import { type RootState, reducers } from "app/store"
-import { Entries, Entry } from "app/types"
+import type { Entries, Entry } from "app/types"
-import { AxiosResponse } from "axios"
+import type { AxiosResponse } from "axios"
-import { beforeEach, describe, expect, it, vi } from "vitest"
+import { beforeEach, describe, expect, it, vi } from "vitest"
-import { mockReset } from "vitest-mock-extended"
+import { mockReset } from "vitest-mock-extended"
-import { loadEntries, loadMoreEntries, markAllEntries, markEntry } from "./entries"
+
-
+const mockClient = await vi.hoisted(async () => {
-const mockClient = await vi.hoisted(async () => {
+    const mockModule = await import("vitest-mock-extended")
-    const mockModule = await import("vitest-mock-extended")
+    return mockModule.mockDeep<typeof client>()
-    return mockModule.mockDeep<typeof client>()
+})
-})
+vi.mock("app/client", () => ({ client: mockClient }))
-vi.mock("app/client", () => ({ client: mockClient }))
+
-
+describe("entries", () => {
-describe("entries", () => {
+    beforeEach(() => {
-    beforeEach(() => {
+        mockReset(mockClient)
-        mockReset(mockClient)
+    })
-    })
+
-
+    it("loads entries", async () => {
-    it("loads entries", async () => {
+        mockClient.feed.getEntries.mockResolvedValue({
-        mockClient.feed.getEntries.mockResolvedValue({
+            data: {
-            data: {
+                entries: [{ id: "3" } as Entry],
-                entries: [{ id: "3" } as Entry],
+                hasMore: false,
-                hasMore: false,
+                name: "my-feed",
-                name: "my-feed",
+                errorCount: 3,
-                errorCount: 3,
+                feedLink: "https://mysite.com/feed",
-                feedLink: "https://mysite.com/feed",
+                timestamp: 123,
-                timestamp: 123,
+                ignoredReadStatus: false,
-                ignoredReadStatus: false,
+            },
-            },
+        } as AxiosResponse<Entries>)
-        } as AxiosResponse<Entries>)
+
-
+        const store = configureStore({ reducer: reducers })
-        const store = configureStore({ reducer: reducers })
+        const promise = store.dispatch(loadEntries({ source: { type: "feed", id: "feed-id" }, clearSearch: true }))
-        const promise = store.dispatch(loadEntries({ source: { type: "feed", id: "feed-id" }, clearSearch: true }))
+
-
+        expect(store.getState().entries.source.type).toBe("feed")
-        expect(store.getState().entries.source.type).toBe("feed")
+        expect(store.getState().entries.source.id).toBe("feed-id")
-        expect(store.getState().entries.source.id).toBe("feed-id")
+        expect(store.getState().entries.entries).toStrictEqual([])
-        expect(store.getState().entries.entries).toStrictEqual([])
+        expect(store.getState().entries.hasMore).toBe(true)
-        expect(store.getState().entries.hasMore).toBe(true)
+        expect(store.getState().entries.sourceLabel).toBe("")
-        expect(store.getState().entries.sourceLabel).toBe("")
+        expect(store.getState().entries.sourceWebsiteUrl).toBe("")
-        expect(store.getState().entries.sourceWebsiteUrl).toBe("")
+        expect(store.getState().entries.timestamp).toBeUndefined()
-        expect(store.getState().entries.timestamp).toBeUndefined()
+
-
+        await promise
-        await promise
+        expect(store.getState().entries.source.type).toBe("feed")
-        expect(store.getState().entries.source.type).toBe("feed")
+        expect(store.getState().entries.source.id).toBe("feed-id")
-        expect(store.getState().entries.source.id).toBe("feed-id")
+        expect(store.getState().entries.entries).toStrictEqual([{ id: "3" }])
-        expect(store.getState().entries.entries).toStrictEqual([{ id: "3" }])
+        expect(store.getState().entries.hasMore).toBe(false)
-        expect(store.getState().entries.hasMore).toBe(false)
+        expect(store.getState().entries.sourceLabel).toBe("my-feed")
-        expect(store.getState().entries.sourceLabel).toBe("my-feed")
+        expect(store.getState().entries.sourceWebsiteUrl).toBe("https://mysite.com/feed")
-        expect(store.getState().entries.sourceWebsiteUrl).toBe("https://mysite.com/feed")
+        expect(store.getState().entries.timestamp).toBe(123)
-        expect(store.getState().entries.timestamp).toBe(123)
+    })
-    })
+
-
+    it("loads more entries", async () => {
-    it("loads more entries", async () => {
+        mockClient.category.getEntries.mockResolvedValue({
-        mockClient.category.getEntries.mockResolvedValue({
+            data: {
-            data: {
+                entries: [{ id: "4" } as Entry],
-                entries: [{ id: "4" } as Entry],
+                hasMore: false,
-                hasMore: false,
+                name: "my-feed",
-                name: "my-feed",
+                errorCount: 3,
-                errorCount: 3,
+                feedLink: "https://mysite.com/feed",
-                feedLink: "https://mysite.com/feed",
+                timestamp: 123,
-                timestamp: 123,
+                ignoredReadStatus: false,
-                ignoredReadStatus: false,
+            },
-            },
+        } as AxiosResponse<Entries>)
-        } as AxiosResponse<Entries>)
+
-
+        const store = configureStore({
-        const store = configureStore({
+            reducer: reducers,
-            reducer: reducers,
+            preloadedState: {
-            preloadedState: {
+                entries: {
-                entries: {
+                    source: {
-                    source: {
+                        type: "category",
-                        type: "category",
+                        id: "category-id",
-                        id: "category-id",
+                    },
-                    },
+                    sourceLabel: "",
-                    sourceLabel: "",
+                    sourceWebsiteUrl: "",
-                    sourceWebsiteUrl: "",
+                    entries: [{ id: "3" } as Entry],
-                    entries: [{ id: "3" } as Entry],
+                    hasMore: true,
-                    hasMore: true,
+                    loading: false,
-                    loading: false,
+                    scrollingToEntry: false,
-                    scrollingToEntry: false,
+                },
-                },
+            } as RootState,
-            },
+        })
-        })
+        const promise = store.dispatch(loadMoreEntries())
-        const promise = store.dispatch(loadMoreEntries())
+
-
+        await promise
-        await promise
+        expect(store.getState().entries.entries).toStrictEqual([{ id: "3" }, { id: "4" }])
-        expect(store.getState().entries.entries).toStrictEqual([{ id: "3" }, { id: "4" }])
+        expect(store.getState().entries.hasMore).toBe(false)
-        expect(store.getState().entries.hasMore).toBe(false)
+    })
-    })
+
-
+    it("marks an entry as read", () => {
-    it("marks an entry as read", async () => {
+        const store = configureStore({
-        const store = configureStore({
+            reducer: reducers,
-            reducer: reducers,
+            preloadedState: {
-            preloadedState: {
+                entries: {
-                entries: {
+                    source: {
-                    source: {
+                        type: "category",
-                        type: "category",
+                        id: "category-id",
-                        id: "category-id",
+                    },
-                    },
+                    sourceLabel: "",
-                    sourceLabel: "",
+                    sourceWebsiteUrl: "",
-                    sourceWebsiteUrl: "",
+                    entries: [{ id: "3", read: false } as Entry, { id: "4", read: false } as Entry],
-                    entries: [{ id: "3", read: false } as Entry, { id: "4", read: false } as Entry],
+                    hasMore: true,
-                    hasMore: true,
+                    loading: false,
-                    loading: false,
+                    scrollingToEntry: false,
-                    scrollingToEntry: false,
+                },
-                },
+            } as RootState,
-            },
+        })
-        })
+
-
+        store.dispatch(markEntry({ entry: { id: "3" } as Entry, read: true }))
-        store.dispatch(markEntry({ entry: { id: "3" } as Entry, read: true }))
+        expect(store.getState().entries.entries).toStrictEqual([
-        expect(store.getState().entries.entries).toStrictEqual([
+            { id: "3", read: true },
-            { id: "3", read: true },
+            { id: "4", read: false },
-            { id: "4", read: false },
+        ])
-        ])
+        expect(mockClient.entry.mark).toHaveBeenCalledWith({ id: "3", read: true })
-        expect(mockClient.entry.mark).toHaveBeenCalledWith({ id: "3", read: true })
+    })
-    })
+
-
+    it("marks all entries as read", () => {
-    it("marks all entries as read", async () => {
+        const store = configureStore({
-        const store = configureStore({
+            reducer: reducers,
-            reducer: reducers,
+            preloadedState: {
-            preloadedState: {
+                entries: {
-                entries: {
+                    source: {
-                    source: {
+                        type: "category",
-                        type: "category",
+                        id: "category-id",
-                        id: "category-id",
+                    },
-                    },
+                    sourceLabel: "",
-                    sourceLabel: "",
+                    sourceWebsiteUrl: "",
-                    sourceWebsiteUrl: "",
+                    entries: [{ id: "3", read: false } as Entry, { id: "4", read: false } as Entry],
-                    entries: [{ id: "3", read: false } as Entry, { id: "4", read: false } as Entry],
+                    hasMore: true,
-                    hasMore: true,
+                    loading: false,
-                    loading: false,
+                    scrollingToEntry: false,
-                    scrollingToEntry: false,
+                },
-                },
+            } as RootState,
-            },
+        })
-        })
+
-
+        store.dispatch(markAllEntries({ sourceType: "category", req: { id: "all", read: true } }))
-        store.dispatch(markAllEntries({ sourceType: "category", req: { id: "all", read: true } }))
+        expect(store.getState().entries.entries).toStrictEqual([
-        expect(store.getState().entries.entries).toStrictEqual([
+            { id: "3", read: true },
-            { id: "3", read: true },
+            { id: "4", read: true },
-            { id: "4", read: true },
+        ])
-        ])
+        expect(mockClient.category.markEntries).toHaveBeenCalledWith({ id: "all", read: true })
-        expect(mockClient.category.markEntries).toHaveBeenCalledWith({ id: "all", read: true })
+    })
-    })
+})
-})

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

@@ -0,0 +1,122 @@
+import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { Constants } from "app/constants"
+import { loadEntries, loadMoreEntries, markAllEntries, markEntry, markMultipleEntries, starEntry, tagEntry } from "app/entries/thunks"
+import type { Entry } from "app/types"
+
+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 }>) => {
+            for (const e of state.entries.filter(e => e.id === action.payload.entry.id)) {
+                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) => {
+            for (const e of state.entries.filter(e => e.id === action.meta.arg.entry.id)) {
+                e.read = action.meta.arg.read
+            }
+        })
+        builder.addCase(markMultipleEntries.pending, (state, action) => {
+            for (const e of state.entries.filter(e => action.meta.arg.entries.some(e2 => e2.id === e.id))) {
+                e.read = action.meta.arg.read
+            }
+        })
+        builder.addCase(markAllEntries.pending, (state, action) => {
+            for (const e of state.entries.filter(e => (action.meta.arg.req.olderThan ? e.date < action.meta.arg.req.olderThan : true))) {
+                e.read = true
+            }
+        })
+        builder.addCase(starEntry.pending, (state, action) => {
+            for (const e of state.entries.filter(e => action.meta.arg.entry.id === e.id && action.meta.arg.entry.feedId === e.feedId)) {
+                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) => {
+            for (const e of state.entries.filter(e => +e.id === action.meta.arg.entryId)) {
+                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 { type EntrySource, type EntrySourceType, entriesSlice, setSearch } from "app/entries/slice"
+import type { RootState } from "app/store"
+import { reloadTree } from "app/tree/thunks"
+import type { Entry, MarkRequest, TagRequest } from "app/types"
+import { reloadTags } from "app/user/thunks"
+import { scrollToWithCallback } from "app/utils"
+import { flushSync } from "react-dom"
+
+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,10 +1,10 @@
-import { store } from "app/store"
+import { redirectToCategory } from "app/redirect/thunks"
-import { describe, expect, it } from "vitest"
+import { store } from "app/store"
-import { redirectToCategory } from "./redirect"
+import { describe, expect, it } from "vitest"
-
+
-describe("redirects", () => {
+describe("redirects", () => {
-    it("redirects to category", async () => {
+    it("redirects to category", async () => {
-        await store.dispatch(redirectToCategory("1"))
+        await store.dispatch(redirectToCategory("1"))
-        expect(store.getState().redirect.to).toBe("/app/category/1")
+        expect(store.getState().redirect.to).toBe("/app/category/1")
-    })
+    })
-})
+})

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

@@ -0,0 +1,19 @@
+import { type PayloadAction, createSlice } 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 { type PayloadAction, createSlice } 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,365 +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
-    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,
-}
-
-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
-            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
-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,209 +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 changeMarkAllAsReadConfirmation = createAsyncThunk<
-    void,
-    boolean,
-    {
-        state: RootState
-    }
->("settings/markAllAsReadConfirmation", (markAllAsReadConfirmation, thunkApi) => {
-    const { settings } = thunkApi.getState().user
-    if (!settings) return
-    client.user.saveSettings({ ...settings, markAllAsReadConfirmation })
-})
-export const changeCustomContextMenu = createAsyncThunk<
-    void,
-    boolean,
-    {
-        state: RootState
-    }
->("settings/customContextMenu", (customContextMenu, thunkApi) => {
-    const { settings } = thunkApi.getState().user
-    if (!settings) return
-    client.user.saveSettings({ ...settings, customContextMenu })
-})
-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(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(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,
-                changeMarkAllAsReadConfirmation.fulfilled,
-                changeCustomContextMenu.fulfilled,
-                changeSharingSetting.fulfilled
-            ),
-            () => {
-                showNotification({
-                    message: t`Settings saved.`,
-                    color: "green",
-                })
-            }
-        )
-    },
-})
-
-export default userSlice.reducer

commafeed-client/src/app/store.ts

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

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

@@ -1,68 +1,68 @@
-import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { type PayloadAction, createSlice } from "@reduxjs/toolkit"
-import { client } from "app/client"
+import { markEntry } from "app/entries/thunks"
-import { Category, CollapseRequest } from "app/types"
+import { redirectTo } from "app/redirect/slice"
-import { visitCategoryTree } from "app/utils"
+import { collapseTreeCategory, reloadTree } from "app/tree/thunks"
-// eslint-disable-next-line import/no-cycle
+import type { Category } from "app/types"
-import { markEntry } from "./entries"
+import { visitCategoryTree } from "app/utils"
-import { redirectTo } from "./redirect"
+
-
+interface TreeState {
-interface TreeState {
+    rootCategory?: Category
-    rootCategory?: Category
+    mobileMenuOpen: boolean
-    mobileMenuOpen: boolean
+    sidebarVisible: boolean
-    sidebarWidth: number
+}
-    sidebarVisible: boolean
+
-}
+const initialState: TreeState = {
-
+    mobileMenuOpen: false,
-const initialState: TreeState = {
+    sidebarVisible: true,
-    mobileMenuOpen: false,
+}
-    sidebarWidth: 350,
+
-    sidebarVisible: true,
+export const treeSlice = createSlice({
-}
+    name: "tree",
-
+    initialState,
-export const reloadTree = createAsyncThunk("tree/reload", () => client.category.getRoot().then(r => r.data))
+    reducers: {
-export const collapseTreeCategory = createAsyncThunk("tree/category/collapse", async (req: CollapseRequest) =>
+        setMobileMenuOpen: (state, action: PayloadAction<boolean>) => {
-    client.category.collapse(req)
+            state.mobileMenuOpen = action.payload
-)
+        },
-
+        toggleSidebar: state => {
-export const treeSlice = createSlice({
+            state.sidebarVisible = !state.sidebarVisible
-    name: "tree",
+        },
-    initialState,
+        incrementUnreadCount: (
-    reducers: {
+            state,
-        setMobileMenuOpen: (state, action: PayloadAction<boolean>) => {
+            action: PayloadAction<{
-            state.mobileMenuOpen = action.payload
+                feedId: number
-        },
+                amount: number
-        setSidebarWidth: (state, action: PayloadAction<number>) => {
+            }>
-            state.sidebarWidth = action.payload
+        ) => {
-        },
+            if (!state.rootCategory) return
-        toggleSidebar: state => {
+            visitCategoryTree(state.rootCategory, c => {
-            state.sidebarVisible = !state.sidebarVisible
+                for (const f of c.feeds.filter(f => f.id === action.payload.feedId)) {
-        },
+                    f.unread += action.payload.amount
-    },
+                }
-    extraReducers: builder => {
+            })
-        builder.addCase(reloadTree.fulfilled, (state, action) => {
+        },
-            state.rootCategory = action.payload
+    },
-        })
+    extraReducers: builder => {
-        builder.addCase(collapseTreeCategory.pending, (state, action) => {
+        builder.addCase(reloadTree.fulfilled, (state, action) => {
-            if (!state.rootCategory) return
+            state.rootCategory = action.payload
-            visitCategoryTree(state.rootCategory, c => {
+        })
-                if (+c.id === action.meta.arg.id) c.expanded = !action.meta.arg.collapse
+        builder.addCase(collapseTreeCategory.pending, (state, action) => {
-            })
+            if (!state.rootCategory) return
-        })
+            visitCategoryTree(state.rootCategory, c => {
-        builder.addCase(markEntry.pending, (state, action) => {
+                if (+c.id === action.meta.arg.id) c.expanded = !action.meta.arg.collapse
-            if (!state.rootCategory) return
+            })
-            visitCategoryTree(state.rootCategory, c =>
+        })
-                c.feeds
+        builder.addCase(markEntry.pending, (state, action) => {
-                    .filter(f => f.id === +action.meta.arg.entry.feedId)
+            if (!state.rootCategory) return
-                    .forEach(f => {
+            visitCategoryTree(state.rootCategory, c => {
-                        f.unread = action.meta.arg.read ? f.unread - 1 : f.unread + 1
+                for (const f of c.feeds.filter(f => f.id === +action.meta.arg.entry.feedId)) {
-                    })
+                    f.unread = action.meta.arg.read ? f.unread - 1 : f.unread + 1
-            )
+                }
-        })
+            })
-        builder.addCase(redirectTo, state => {
+        })
-            state.mobileMenuOpen = false
+        builder.addCase(redirectTo, state => {
-        })
+            state.mobileMenuOpen = false
-    },
+        })
-})
+    },
-
+})
-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,277 +1,295 @@
-export interface AddCategoryRequest {
+export type ReadingMode = "all" | "unread"
-    name: string
+
-    parentId?: string
+export type ReadingOrder = "asc" | "desc"
-}
+
-
+export type ViewMode = "title" | "cozy" | "detailed" | "expanded"
-export interface Category {
+
-    id: string
+export type ScrollMode = "always" | "never" | "if_needed"
-    parentId?: string
+
-    parentName?: string
+export type IconDisplayMode = "always" | "never" | "on_desktop" | "on_mobile"
-    name: string
+
-    children: Category[]
+export interface AddCategoryRequest {
-    feeds: Subscription[]
+    name: string
-    expanded: boolean
+    parentId?: string
-    position: number
+}
-}
+
-
+export interface Subscription {
-export interface CategoryModificationRequest {
+    id: number
-    id: number
+    name: string
-    name?: string
+    message?: string
-    parentId?: string
+    errorCount: number
-    position?: number
+    lastRefresh?: number
-}
+    nextRefresh?: number
-
+    feedUrl: string
-export interface CollapseRequest {
+    feedLink: string
-    id: number
+    iconUrl: string
-    collapse: boolean
+    unread: number
-}
+    categoryId?: string
-
+    position: number
-export interface Entries {
+    newestItemTime?: number
-    name: string
+    filter?: string
-    message?: string
+}
-    errorCount: number
+
-    feedLink: string
+export interface Category {
-    timestamp: number
+    id: string
-    hasMore: boolean
+    parentId?: string
-    offset?: number
+    parentName?: string
-    limit?: number
+    name: string
-    entries: Entry[]
+    children: Category[]
-    ignoredReadStatus: boolean
+    feeds: Subscription[]
-}
+    expanded: boolean
-
+    position: number
-export interface Entry {
+}
-    id: string
+
-    guid: string
+export interface CategoryModificationRequest {
-    title: string
+    id: number
-    content: string
+    name?: string
-    categories?: string
+    parentId?: string
-    rtl: boolean
+    position?: number
-    author?: string
+}
-    enclosureUrl?: string
+
-    enclosureType?: string
+export interface CollapseRequest {
-    mediaDescription?: string
+    id: number
-    mediaThumbnailUrl?: string
+    collapse: boolean
-    mediaThumbnailWidth?: number
+}
-    mediaThumbnailHeight?: number
+
-    date: number
+export interface Entry {
-    insertedDate: number
+    id: string
-    feedId: string
+    guid: string
-    feedName: string
+    title: string
-    feedUrl: string
+    content: string
-    feedLink: string
+    categories?: string
-    iconUrl: string
+    rtl: boolean
-    url: string
+    author?: string
-    read: boolean
+    enclosureUrl?: string
-    starred: boolean
+    enclosureType?: string
-    markable: boolean
+    mediaDescription?: string
-    tags: string[]
+    mediaThumbnailUrl?: string
-}
+    mediaThumbnailWidth?: number
-
+    mediaThumbnailHeight?: number
-export interface FeedInfo {
+    date: number
-    url: string
+    insertedDate: number
-    title: string
+    feedId: string
-}
+    feedName: string
-
+    feedUrl: string
-export interface FeedInfoRequest {
+    feedLink: string
-    url: string
+    iconUrl: string
-}
+    url: string
-
+    read: boolean
-export interface FeedModificationRequest {
+    starred: boolean
-    id: number
+    markable: boolean
-    name?: string
+    tags: string[]
-    categoryId?: string
+}
-    position?: number
+
-    filter?: string
+export interface Entries {
-}
+    name: string
-
+    message?: string
-export interface GetEntriesRequest {
+    errorCount: number
-    id: string
+    feedLink: string
-    readType?: ReadingMode
+    timestamp: number
-    newerThan?: number
+    hasMore: boolean
-    order?: ReadingOrder
+    offset?: number
-    keywords?: string
+    limit?: number
-    onlyIds?: boolean
+    entries: Entry[]
-    excludedSubscriptionIds?: string
+    ignoredReadStatus: boolean
-    tag?: string
+}
-}
+
-
+export interface FeedInfo {
-export interface GetEntriesPaginatedRequest extends GetEntriesRequest {
+    url: string
-    offset: number
+    title: string
-    limit: number
+}
-}
+
-
+export interface FeedInfoRequest {
-export interface IDRequest {
+    url: string
-    id: number
+}
-}
+
-
+export interface FeedModificationRequest {
-export interface LoginRequest {
+    id: number
-    name: string
+    name?: string
-    password: string
+    categoryId?: string
-}
+    position?: number
-
+    filter?: string
-export interface MarkRequest {
+}
-    id: string
+
-    read: boolean
+export interface GetEntriesRequest {
-    olderThan?: number
+    id: string
-    keywords?: string
+    readType?: ReadingMode
-    excludedSubscriptions?: number[]
+    newerThan?: number
-}
+    order?: ReadingOrder
-
+    keywords?: string
-export interface MetricCounter {
+    excludedSubscriptionIds?: string
-    count: number
+    tag?: string
-}
+}
-
+
-export interface MetricGauge {
+export interface GetEntriesPaginatedRequest extends GetEntriesRequest {
-    value: number
+    offset: number
-}
+    limit: number
-
+}
-export interface MetricMeter {
+
-    count: number
+export interface IDRequest {
-    m15_rate: number
+    id: number
-    m1_rate: number
+}
-    m5_rate: number
+
-    mean_rate: number
+export interface LoginRequest {
-    units: string
+    name: string
-}
+    password: string
-
+}
-export type MetricTimer = {
+
-    count: number
+export interface MarkRequest {
-    max: number
+    id: string
-    mean: number
+    read: boolean
-    min: number
+    olderThan?: number
-    p50: number
+    insertedBefore?: number
-    p75: number
+    keywords?: string
-    p95: number
+    excludedSubscriptions?: number[]
-    p98: number
+}
-    p99: number
+
-    p999: number
+export interface MetricCounter {
-    stddev: number
+    count: number
-    m15_rate: number
+}
-    m1_rate: number
+
-    m5_rate: number
+export interface MetricGauge {
-    mean_rate: number
+    value: number
-    duration_units: string
+}
-    rate_units: string
+
-}
+export interface MetricMeter {
-
+    count: number
-export interface Metrics {
+    m15_rate: number
-    counters: { [key: string]: MetricCounter }
+    m1_rate: number
-    gauges: { [key: string]: MetricGauge }
+    m5_rate: number
-    meters: { [key: string]: MetricMeter }
+    mean_rate: number
-    timers: { [key: string]: MetricTimer }
+    units: string
-}
+}
-
+
-export interface MultipleMarkRequest {
+export interface MetricTimer {
-    requests: MarkRequest[]
+    count: number
-}
+    max: number
-
+    mean: number
-export interface PasswordResetRequest {
+    min: number
-    email: string
+    p50: number
-}
+    p75: number
-
+    p95: number
-export interface ProfileModificationRequest {
+    p98: number
-    currentPassword: string
+    p99: number
-    email: string
+    p999: number
-    newPassword?: string
+    stddev: number
-    newApiKey?: boolean
+    m15_rate: number
-}
+    m1_rate: number
-
+    m5_rate: number
-export interface RegistrationRequest {
+    mean_rate: number
-    name: string
+    duration_units: string
-    password: string
+    rate_units: string
-    email: string
+}
-}
+
-
+export interface Metrics {
-export interface ServerInfo {
+    counters: Record<string, MetricCounter>
-    announcement?: string
+    gauges: Record<string, MetricGauge>
-    version: string
+    meters: Record<string, MetricMeter>
-    gitCommit: string
+    timers: Record<string, MetricTimer>
-    allowRegistrations: boolean
+}
-    googleAnalyticsCode?: string
+
-    smtpEnabled: boolean
+export interface MultipleMarkRequest {
-    demoAccountEnabled: boolean
+    requests: MarkRequest[]
-}
+}
-
+
-export interface Settings {
+export interface PasswordResetRequest {
-    language: string
+    email: string
-    readingMode: ReadingMode
+}
-    readingOrder: ReadingOrder
+
-    showRead: boolean
+export interface ProfileModificationRequest {
-    scrollMarks: boolean
+    currentPassword: string
-    customCss?: string
+    email: string
-    customJs?: string
+    newPassword?: string
-    scrollSpeed: number
+    newApiKey?: boolean
-    alwaysScrollToEntry: boolean
+}
-    markAllAsReadConfirmation: boolean
+
-    customContextMenu: boolean
+export interface RegistrationRequest {
-    sharingSettings: SharingSettings
+    name: string
-}
+    password: string
-
+    email: string
-export interface SharingSettings {
+}
-    email: boolean
+
-    gmail: boolean
+export interface ServerInfo {
-    facebook: boolean
+    announcement?: string
-    twitter: boolean
+    version: string
-    tumblr: boolean
+    gitCommit: string
-    pocket: boolean
+    allowRegistrations: boolean
-    instapaper: boolean
+    googleAnalyticsCode?: string
-    buffer: boolean
+    smtpEnabled: boolean
-}
+    demoAccountEnabled: boolean
-
+    websocketEnabled: boolean
-export interface StarRequest {
+    websocketPingInterval: number
-    id: string
+    treeReloadInterval: number
-    feedId: number
+}
-    starred: boolean
+
-}
+export interface SharingSettings {
-
+    email: boolean
-export interface SubscribeRequest {
+    gmail: boolean
-    url: string
+    facebook: boolean
-    title: string
+    twitter: boolean
-    categoryId?: string
+    tumblr: boolean
-}
+    pocket: boolean
-
+    instapaper: boolean
-export interface Subscription {
+    buffer: boolean
-    id: number
+}
-    name: string
+
-    message?: string
+export interface Settings {
-    errorCount: number
+    language: string
-    lastRefresh?: number
+    readingMode: ReadingMode
-    nextRefresh?: number
+    readingOrder: ReadingOrder
-    feedUrl: string
+    showRead: boolean
-    feedLink: string
+    scrollMarks: boolean
-    iconUrl: string
+    customCss?: string
-    unread: number
+    customJs?: string
-    categoryId?: string
+    scrollSpeed: number
-    position: number
+    scrollMode: ScrollMode
-    newestItemTime?: number
+    starIconDisplayMode: IconDisplayMode
-    filter?: string
+    externalLinkIconDisplayMode: IconDisplayMode
-}
+    markAllAsReadConfirmation: boolean
-
+    customContextMenu: boolean
-export interface TagRequest {
+    mobileFooter: boolean
-    entryId: number
+    sharingSettings: SharingSettings
-    tags: string[]
+}
-}
+
-
+export interface StarRequest {
-export interface UnreadCount {
+    id: string
-    feedId?: number
+    feedId: number
-    unreadCount?: number
+    starred: boolean
-    newestItemTime?: number
+}
-}
+
-
+export interface SubscribeRequest {
-export interface UserModel {
+    url: string
-    id: number
+    title: string
-    name: string
+    categoryId?: string
-    email?: string
+}
-    apiKey?: string
+
-    password?: string
+export interface TagRequest {
-    enabled: boolean
+    entryId: number
-    created: number
+    tags: string[]
-    lastLogin?: number
+}
-    admin: boolean
+
-}
+export interface UserModel {
-
+    id: number
-export type ReadingMode = "all" | "unread"
+    name: string
-
+    email?: string
-export type ReadingOrder = "asc" | "desc"
+    apiKey?: string
-
+    password?: string
-export type ViewMode = "title" | "cozy" | "detailed" | "expanded"
+    enabled: boolean
+    created: number
+    lastLogin?: number
+    admin: boolean
+}
+
+export interface AdminSaveUserRequest {
+    id?: number
+    name: string
+    email?: string
+    password?: string
+    enabled: boolean
+    admin: boolean
+}
+
+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, 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,47 +1,49 @@
-import { throttle } from "throttle-debounce"
+import { throttle } from "throttle-debounce"
-import { Category } from "./types"
+import type { Category } from "./types"
-
+
-export function visitCategoryTree(category: Category, visitor: (category: Category) => void): void {
+export function visitCategoryTree(category: Category, visitor: (category: Category) => void): void {
-    visitor(category)
+    visitor(category)
-    category.children.forEach(child => visitCategoryTree(child, visitor))
+    for (const child of category.children) {
-}
+        visitCategoryTree(child, visitor)
-
+    }
-export function flattenCategoryTree(category: Category): Category[] {
+}
-    const categories: Category[] = []
+
-    visitCategoryTree(category, c => categories.push(c))
+export function flattenCategoryTree(category: Category): Category[] {
-    return categories
+    const categories: Category[] = []
-}
+    visitCategoryTree(category, c => categories.push(c))
-
+    return categories
-export function categoryUnreadCount(category?: Category): number {
+}
-    if (!category) return 0
+
-
+export function categoryUnreadCount(category?: Category): number {
-    return flattenCategoryTree(category)
+    if (!category) return 0
-        .flatMap(c => c.feeds)
+
-        .map(f => f.unread)
+    return flattenCategoryTree(category)
-        .reduce((total, current) => total + current, 0)
+        .flatMap(c => c.feeds)
-}
+        .map(f => f.unread)
-
+        .reduce((total, current) => total + current, 0)
-export const calculatePlaceholderSize = ({ width, height, maxWidth }: { width?: number; height?: number; maxWidth: number }) => {
+}
-    const placeholderWidth = width && Math.min(width, maxWidth)
+
-    const placeholderHeight = height && width && width > maxWidth ? height * (maxWidth / width) : height
+export const calculatePlaceholderSize = ({ width, height, maxWidth }: { width?: number; height?: number; maxWidth: number }) => {
-    return { width: placeholderWidth, height: placeholderHeight }
+    const placeholderWidth = width && Math.min(width, maxWidth)
-}
+    const placeholderHeight = height && width && width > maxWidth ? height * (maxWidth / width) : height
-
+    return { width: placeholderWidth, height: placeholderHeight }
-export const scrollToWithCallback = ({ options, onScrollEnded }: { options: ScrollToOptions; onScrollEnded: () => void }) => {
+}
-    const offset = (options.top ?? 0).toFixed()
+
-
+export const scrollToWithCallback = ({ options, onScrollEnded }: { options: ScrollToOptions; onScrollEnded: () => void }) => {
-    const onScroll = throttle(100, () => {
+    const offset = (options.top ?? 0).toFixed()
-        if (window.scrollY.toFixed() === offset) {
+
-            window.removeEventListener("scroll", onScroll)
+    const onScroll = throttle(100, () => {
-            onScrollEnded()
+        if (window.scrollY.toFixed() === offset) {
-        }
+            window.removeEventListener("scroll", onScroll)
-    })
+            onScrollEnded()
-    window.addEventListener("scroll", onScroll)
+        }
-
+    })
-    // scrollTo does not trigger if there's nothing to do, trigger it manually
+    window.addEventListener("scroll", onScroll)
-    onScroll()
+
-
+    // scrollTo does not trigger if there's nothing to do, trigger it manually
-    window.scrollTo(options)
+    onScroll()
-}
+
-
+    window.scrollTo(options)
-export const truncate = (str: string, n: number) => (str.length > n ? `${str.slice(0, n - 1)}\u2026` : str)
+}
+
+export const truncate = (str: string, n: number) => (str.length > n ? `${str.slice(0, n - 1)}\u2026` : str)

commafeed-client/src/assets/logo.svg

@@ -1,20 +1,10 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg height="512" width="512" viewBox="0 0 6.5625 6.5625" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd">
+<svg height="512" width="512" viewBox="0 0 6.5625 6.5625" xmlns="http://www.w3.org/2000/svg">
- <sodipodi:namedview guidetolerance="10">
+	<rect fill="#f88a14" rx="0.7" ry="0.7" height="6.5625" width="6.5625" />
-  <sodipodi:guide position="154.17325,117.15254" orientation="0,1"/>
+	<path d="m1.9761,1.5289c2.9002,0,2.9002,2.9101,2.9002,2.9101" fill="none" stroke="#FFF" stroke-linecap="round"
-  <sodipodi:guide position="154.17325,166.44575" orientation="0,1"/>
+		  stroke-width="0.78125" />
-  <sodipodi:guide position="154.17325,288.40369" orientation="0,1"/>
+	<path d="m1.9688,2.875c1.5705-0.00908,1.5705,1.5639,1.5705,1.5639" fill="none" stroke="#FFF" stroke-linecap="round"
-  <sodipodi:guide position="380.44742,392.71992" orientation="0,1"/>
+		  stroke-width="0.78125" />
-  <sodipodi:guide position="101.9661,166.44575" orientation="1,0"/>
+	<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"
-  <sodipodi:guide position="276.13119,288.40369" orientation="1,0"/>
+		  fill="#FFF" />
-  <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>

commafeed-client/src/components/ActionButton.tsx

@@ -1,37 +1,37 @@
-import { ActionIcon, Button, Tooltip, useMantineTheme } from "@mantine/core"
+import { ActionIcon, Button, type ButtonVariant, Tooltip, useMantineTheme } from "@mantine/core"
-import { ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon"
+import type { ActionIconVariant } from "@mantine/core/lib/components/ActionIcon/ActionIcon"
-import { ButtonProps } from "@mantine/core/lib/Button/Button"
+import { Constants } from "app/constants"
-import { useActionButton } from "hooks/useActionButton"
+import { useActionButton } from "hooks/useActionButton"
-import { forwardRef, MouseEventHandler, ReactNode } from "react"
+import { type MouseEventHandler, type ReactNode, forwardRef } from "react"
-
+
-interface ActionButtonProps {
+interface ActionButtonProps {
-    className?: string
+    className?: string
-    icon?: ReactNode
+    icon?: ReactNode
-    label: ReactNode
+    label: ReactNode
-    onClick?: MouseEventHandler
+    onClick?: MouseEventHandler
-    variant?: ActionIconProps["variant"] & ButtonProps["variant"]
+    variant?: ActionIconVariant & ButtonVariant
-    hideLabelOnDesktop?: boolean
+    hideLabelOnDesktop?: boolean
-    showLabelOnMobile?: boolean
+    showLabelOnMobile?: boolean
-}
+}
-
+
-/**
+/**
- * Switches between Button with label (desktop) and ActionIcon (mobile)
+ * Switches between Button with label (desktop) and ActionIcon (mobile)
- */
+ */
-export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
+export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
-    const { mobile } = useActionButton()
+    const { mobile } = useActionButton()
-    const theme = useMantineTheme()
+    const theme = useMantineTheme()
-    const variant = props.variant ?? "subtle"
+    const variant = props.variant ?? "subtle"
-    const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
+    const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
-    return iconOnly ? (
+    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}>
+            <ActionIcon ref={ref} color={theme.primaryColor} variant={variant} className={props.className} onClick={props.onClick}>
-                {props.icon}
+                {props.icon}
-            </ActionIcon>
+            </ActionIcon>
-        </Tooltip>
+        </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}
+            {props.label}
-        </Button>
+        </Button>
-    )
+    )
-})
+})
-ActionButton.displayName = "HeaderButton"
+ActionButton.displayName = "HeaderButton"

commafeed-client/src/components/Alert.tsx

@@ -1,48 +1,47 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
-import { Box, Alert as MantineAlert } from "@mantine/core"
+import { Box, Alert as MantineAlert } from "@mantine/core"
-import { Fragment } from "react"
+import { Fragment } from "react"
-import { TbAlertCircle, TbAlertTriangle, TbCircleCheck } from "react-icons/tb"
+import { TbAlertCircle, TbAlertTriangle, TbCircleCheck } from "react-icons/tb"
-
+
-type Level = "error" | "warning" | "success"
+type Level = "error" | "warning" | "success"
-export interface ErrorsAlertProps {
+
-    level?: Level
+export interface ErrorsAlertProps {
-    messages: string[]
+    level?: Level
-}
+    messages: string[]
-
+}
-export function Alert(props: ErrorsAlertProps) {
+
-    let title: React.ReactNode
+export function Alert(props: ErrorsAlertProps) {
-    let color: string
+    let title: React.ReactNode
-    let icon: React.ReactNode
+    let color: string
-
+    let icon: React.ReactNode
-    const level = props.level ?? "error"
+
-    switch (level) {
+    const level = props.level ?? "error"
-        case "error":
+    switch (level) {
-            title = <Trans>Error</Trans>
+        case "error":
-            color = "red"
+            title = <Trans>Error</Trans>
-            icon = <TbAlertCircle />
+            color = "red"
-            break
+            icon = <TbAlertCircle />
-        case "warning":
+            break
-            title = <Trans>Warning</Trans>
+        case "warning":
-            color = "orange"
+            title = <Trans>Warning</Trans>
-            icon = <TbAlertTriangle />
+            color = "orange"
-            break
+            icon = <TbAlertTriangle />
-        case "success":
+            break
-            title = <Trans>Success</Trans>
+        case "success":
-            color = "green"
+            title = <Trans>Success</Trans>
-            icon = <TbCircleCheck />
+            color = "green"
-            break
+            icon = <TbCircleCheck />
-        default:
+            break
-            throw Error(`unsupported level: ${level}`)
+    }
-    }
+
-
+    return (
-    return (
+        <MantineAlert title={title} color={color} icon={icon}>
-        <MantineAlert title={title} color={color} icon={icon}>
+            {props.messages.map((m, i) => (
-            {props.messages.map((m, i) => (
+                <Fragment key={m}>
-                <Fragment key={m}>
+                    <Box>{m}</Box>
-                    <Box>{m}</Box>
+                    {i !== props.messages.length - 1 && <br />}
-                    {i !== props.messages.length - 1 && <br />}
+                </Fragment>
-                </Fragment>
+            ))}
-            ))}
+        </MantineAlert>
-        </MantineAlert>
+    )
-    )
+}
-}

commafeed-client/src/components/AnnouncementDialog.tsx

@@ -24,7 +24,7 @@ export function AnnouncementDialog() {
     return (
         <Dialog opened={opened} withCloseButton onClose={onClosed} size="xl" radius="md">
             <Box>
-                <Text weight="bold">
+                <Text fw="bold">
                     <Trans>Announcement</Trans>
                 </Text>
             </Box>

commafeed-client/src/components/DisablePullToRefresh.tsx

@@ -0,0 +1,15 @@
+import { Helmet } from "react-helmet"
+
+export const DisablePullToRefresh = () => {
+    return (
+        <Helmet>
+            <style type="text/css">
+                {`
+                    html, body {
+                        overscroll-behavior: none;
+                    }
+                `}
+            </style>
+        </Helmet>
+    )
+}

commafeed-client/src/components/ErrorBoundary.tsx

@@ -1,26 +1,26 @@
-import { ErrorPage } from "pages/ErrorPage"
+import { ErrorPage } from "pages/ErrorPage"
-import React, { ReactNode } from "react"
+import React, { type ReactNode } from "react"
-
+
-interface ErrorBoundaryProps {
+interface ErrorBoundaryProps {
-    children?: ReactNode
+    children?: ReactNode
-}
+}
-
+
-interface ErrorBoundaryState {
+interface ErrorBoundaryState {
-    error?: Error
+    error?: Error
-}
+}
-
+
-export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    constructor(props: ErrorBoundaryProps) {
+    constructor(props: ErrorBoundaryProps) {
-        super(props)
+        super(props)
-        this.state = {}
+        this.state = {}
-    }
+    }
-
+
-    componentDidCatch(error: Error) {
+    componentDidCatch(error: Error) {
-        this.setState({ error })
+        this.setState({ error })
-    }
+    }
-
+
-    render() {
+    render() {
-        if (this.state.error) return <ErrorPage error={this.state.error} />
+        if (this.state.error) return <ErrorPage error={this.state.error} />
-        return this.props.children
+        return this.props.children
-    }
+    }
-}
+}

commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx

@@ -1,54 +1,75 @@
-import { Box, Center, createStyles } from "@mantine/core"
+import { Box, Center } from "@mantine/core"
-import { useState } from "react"
+import { useState } from "react"
-import { TbPhoto } from "react-icons/tb"
+import { TbPhoto } from "react-icons/tb"
-
+import { tss } from "tss"
-interface ImageWithPlaceholderWhileLoadingProps {
+
-    src: string
+interface ImageWithPlaceholderWhileLoadingProps {
-    alt: string
+    src: string
-    title?: string
+    alt: string
-    width?: number
+    title?: string
-    height?: number | "auto"
+    width?: number
-    placeholderWidth?: number
+    height?: number | "auto"
-    placeholderHeight?: number
+    placeholderWidth?: number
-    placeholderBackgroundColor?: string
+    placeholderHeight?: number
-    placeholderIconSize?: number
+    placeholderBackgroundColor?: string
-    placeholderIconColor?: string
+    placeholderIconSize?: number
-}
+}
-
+
-const useStyles = createStyles((theme, props: ImageWithPlaceholderWhileLoadingProps) => ({
+const useStyles = tss
-    placeholder: {
+    .withParams<{
-        width: props.placeholderWidth ?? 400,
+        placeholderWidth?: number
-        height: props.placeholderHeight ?? 600,
+        placeholderHeight?: number
-        maxWidth: "100%",
+        placeholderBackgroundColor?: string
-        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]),
+    .create(props => ({
-    },
+        placeholder: {
-}))
+            width: props.placeholderWidth ?? 400,
-
+            height: props.placeholderHeight ?? 600,
-export function ImageWithPlaceholderWhileLoading(props: ImageWithPlaceholderWhileLoadingProps) {
+            maxWidth: "100%",
-    const { classes } = useStyles(props)
+            backgroundColor:
-    const [loading, setLoading] = useState(true)
+                props.placeholderBackgroundColor ??
-
+                (props.colorScheme === "dark" ? props.theme.colors.dark[5] : props.theme.colors.gray[1]),
-    return (
+        },
-        <>
+    }))
-            {loading && (
+
-                <Box>
+export function ImageWithPlaceholderWhileLoading({
-                    <Center className={classes.placeholder}>
+    alt,
-                        <div>
+    height,
-                            <TbPhoto size={props.placeholderIconSize ?? 48} />
+    placeholderBackgroundColor,
-                        </div>
+    placeholderHeight,
-                    </Center>
+    placeholderIconSize,
-                </Box>
+    placeholderWidth,
-            )}
+    src,
-            <img
+    title,
-                src={props.src}
+    width,
-                alt={props.alt}
+}: ImageWithPlaceholderWhileLoadingProps) {
-                title={props.title}
+    const { classes } = useStyles({
-                width={props.width}
+        placeholderWidth,
-                height={props.height}
+        placeholderHeight,
-                onLoad={() => setLoading(false)}
+        placeholderBackgroundColor,
-                style={{ display: loading ? "none" : "block" }}
+    })
-            />
+    const [loading, setLoading] = useState(true)
-        </>
+
-    )
+    return (
-}
+        <>
+            {loading && (
+                <Box>
+                    <Center className={classes.placeholder}>
+                        <div>
+                            <TbPhoto size={placeholderIconSize ?? 48} />
+                        </div>
+                    </Center>
+                </Box>
+            )}
+            <img
+                src={src}
+                alt={alt}
+                title={title}
+                width={width}
+                height={height}
+                onLoad={() => setLoading(false)}
+                style={{ display: loading ? "none" : "block" }}
+            />
+        </>
+    )
+}

commafeed-client/src/components/KeyboardShortcutsHelp.tsx

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

commafeed-client/src/components/Loader.tsx

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

commafeed-client/src/components/Logo.tsx

@@ -1,10 +1,10 @@
-import { Image } from "@mantine/core"
+import { Image } from "@mantine/core"
-import logo from "assets/logo.svg"
+import logo from "assets/logo.svg"
-
+
-export interface LogoProps {
+export interface LogoProps {
-    size: number
+    size: number
-}
+}
-
+
-export function Logo(props: 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,20 +1,21 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
-import { Tooltip } from "@mantine/core"
+import { Tooltip } from "@mantine/core"
-import dayjs from "dayjs"
+import { Constants } from "app/constants"
-import { useEffect, useState } from "react"
+import dayjs from "dayjs"
-
+import { useEffect, useState } from "react"
-export function RelativeDate(props: { date: Date | number | undefined }) {
+
-    const [now, setNow] = useState(new Date())
+export function RelativeDate(props: { date: Date | number | undefined }) {
-    useEffect(() => {
+    const [now, setNow] = useState(new Date())
-        const interval = setInterval(() => setNow(new Date()), 60 * 1000)
+    useEffect(() => {
-        return () => clearInterval(interval)
+        const interval = setInterval(() => setNow(new Date()), 60 * 1000)
-    }, [])
+        return () => clearInterval(interval)
-
+    }, [])
-    if (!props.date) return <Trans>N/A</Trans>
+
-    const date = dayjs(props.date)
+    if (!props.date) return <Trans>N/A</Trans>
-    return (
+    const date = dayjs(props.date)
-        <Tooltip label={date.toDate().toLocaleString()} openDelay={500}>
+    return (
-            <span>{date.from(dayjs(now))}</span>
+        <Tooltip label={date.toDate().toLocaleString()} openDelay={Constants.tooltip.delay}>
-        </Tooltip>
+            <span>{date.from(dayjs(now))}</span>
-    )
+        </Tooltip>
-}
+    )
+}

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

@@ -1,50 +1,54 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
-import { Box, Button, Checkbox, Group, PasswordInput, Stack, TextInput } from "@mantine/core"
+import { Box, Button, Checkbox, Group, PasswordInput, Stack, TextInput } from "@mantine/core"
-import { useForm } from "@mantine/form"
+import { useForm } from "@mantine/form"
-import { client, errorToStrings } from "app/client"
+import { client, errorToStrings } from "app/client"
-import { UserModel } from "app/types"
+import type { AdminSaveUserRequest, UserModel } from "app/types"
-import { Alert } from "components/Alert"
+import { Alert } from "components/Alert"
-import { useAsyncCallback } from "react-async-hook"
+import { useAsyncCallback } from "react-async-hook"
-import { TbDeviceFloppy } from "react-icons/tb"
+import { TbDeviceFloppy } from "react-icons/tb"
-
+
-interface UserEditProps {
+interface UserEditProps {
-    user?: UserModel
+    user?: UserModel
-    onCancel: () => void
+    onCancel: () => void
-    onSave: () => void
+    onSave: () => void
-}
+}
-
+
-export function UserEdit(props: UserEditProps) {
+export function UserEdit(props: UserEditProps) {
-    const form = useForm<UserModel>({
+    const form = useForm<AdminSaveUserRequest>({
-        initialValues: props.user ?? ({ enabled: true } as UserModel),
+        initialValues: props.user ?? {
-    })
+            name: "",
-    const saveUser = useAsyncCallback(client.admin.saveUser, { onSuccess: props.onSave })
+            enabled: true,
-
+            admin: false,
-    return (
+        },
-        <>
+    })
-            {saveUser.error && (
+    const saveUser = useAsyncCallback(client.admin.saveUser, { onSuccess: props.onSave })
-                <Box mb="md">
+
-                    <Alert messages={errorToStrings(saveUser.error)} />
+    return (
-                </Box>
+        <>
-            )}
+            {saveUser.error && (
-
+                <Box mb="md">
-            <form onSubmit={form.onSubmit(saveUser.execute)}>
+                    <Alert messages={errorToStrings(saveUser.error)} />
-                <Stack>
+                </Box>
-                    <TextInput label={<Trans>Name</Trans>} {...form.getInputProps("name")} required />
+            )}
-                    <PasswordInput label={<Trans>Password</Trans>} {...form.getInputProps("password")} required={!props.user} />
+
-                    <TextInput type="email" label={<Trans>E-mail</Trans>} {...form.getInputProps("email")} />
+            <form onSubmit={form.onSubmit(saveUser.execute)}>
-                    <Checkbox label={<Trans>Admin</Trans>} {...form.getInputProps("admin", { type: "checkbox" })} />
+                <Stack>
-                    <Checkbox label={<Trans>Enabled</Trans>} {...form.getInputProps("enabled", { type: "checkbox" })} />
+                    <TextInput label={<Trans>Name</Trans>} {...form.getInputProps("name")} required />
-
+                    <PasswordInput label={<Trans>Password</Trans>} {...form.getInputProps("password")} required={!props.user} />
-                    <Group>
+                    <TextInput type="email" label={<Trans>E-mail</Trans>} {...form.getInputProps("email")} />
-                        <Button variant="default" onClick={props.onCancel}>
+                    <Checkbox label={<Trans>Admin</Trans>} {...form.getInputProps("admin", { type: "checkbox" })} />
-                            <Trans>Cancel</Trans>
+                    <Checkbox label={<Trans>Enabled</Trans>} {...form.getInputProps("enabled", { type: "checkbox" })} />
-                        </Button>
+
-                        <Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveUser.loading}>
+                    <Group justify="right">
-                            <Trans>Save</Trans>
+                        <Button variant="default" onClick={props.onCancel}>
-                        </Button>
+                            <Trans>Cancel</Trans>
-                    </Group>
+                        </Button>
-                </Stack>
+                        <Button type="submit" leftSection={<TbDeviceFloppy size={16} />} loading={saveUser.loading}>
-            </form>
+                            <Trans>Save</Trans>
-        </>
+                        </Button>
-    )
+                    </Group>
-}
+                </Stack>
+            </form>
+        </>
+    )
+}

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

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

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

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

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

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

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

@@ -1,101 +1,103 @@
-import { Box, createStyles, Mark, TypographyStylesProvider } from "@mantine/core"
+import { Box, Mark } from "@mantine/core"
-import { Constants } from "app/constants"
+import { Constants } from "app/constants"
-import { calculatePlaceholderSize } from "app/utils"
+import { calculatePlaceholderSize } from "app/utils"
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
+import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
-import escapeStringRegexp from "escape-string-regexp"
+import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
-import { ChildrenNode, Interweave, Matcher, MatchResponse, Node, TransformCallback } from "interweave"
+import escapeStringRegexp from "escape-string-regexp"
-import React from "react"
+import { type ChildrenNode, Interweave, type MatchResponse, Matcher, type Node, type TransformCallback } from "interweave"
-
+import React from "react"
-export interface ContentProps {
+import { tss } from "tss"
-    content: string
+
-    highlight?: string
+export interface ContentProps {
-}
+    content: string
-
+    highlight?: string
-const useStyles = createStyles(theme => ({
+}
-    content: {
+
-        // break long links or long words
+const useStyles = tss.create(() => ({
-        overflowWrap: "anywhere",
+    content: {
-        "& a": {
+        // break long links or long words
-            color: theme.fn.variant({ color: theme.primaryColor, variant: "subtle" }).color,
+        overflowWrap: "anywhere",
-        },
+        "& a": {
-        "& iframe": {
+            color: "inherit",
-            maxWidth: "100%",
+            textDecoration: "underline",
-        },
+        },
-        "& pre, & code": {
+        "& iframe": {
-            whiteSpace: "pre-wrap",
+            maxWidth: "100%",
-        },
+        },
-    },
+        "& pre, & code": {
-}))
+            whiteSpace: "pre-wrap",
-
+        },
-const transform: TransformCallback = node => {
+    },
-    if (node.tagName === "IMG") {
+}))
-        // show placeholders for loading img tags, this allows the entry to have its final height immediately
+
-        const src = node.getAttribute("src") ?? undefined
+const transform: TransformCallback = node => {
-        if (!src) return undefined
+    if (node.tagName === "IMG") {
-
+        // show placeholders for loading img tags, this allows the entry to have its final height immediately
-        const alt = node.getAttribute("alt") ?? "image"
+        const src = node.getAttribute("src") ?? undefined
-        const title = node.getAttribute("title") ?? undefined
+        if (!src) return undefined
-        const nodeWidth = node.getAttribute("width")
+
-        const nodeHeight = node.getAttribute("height")
+        const alt = node.getAttribute("alt") ?? "image"
-        const width = nodeWidth ? parseInt(nodeWidth, 10) : undefined
+        const title = node.getAttribute("title") ?? undefined
-        const height = nodeHeight ? parseInt(nodeHeight, 10) : undefined
+        const nodeWidth = node.getAttribute("width")
-        const placeholderSize = calculatePlaceholderSize({
+        const nodeHeight = node.getAttribute("height")
-            width,
+        const width = nodeWidth ? Number.parseInt(nodeWidth, 10) : undefined
-            height,
+        const height = nodeHeight ? Number.parseInt(nodeHeight, 10) : undefined
-            maxWidth: Constants.layout.entryMaxWidth,
+        const placeholderSize = calculatePlaceholderSize({
-        })
+            width,
-
+            height,
-        return (
+            maxWidth: Constants.layout.entryMaxWidth,
-            <ImageWithPlaceholderWhileLoading
+        })
-                src={src}
+
-                alt={alt}
+        return (
-                title={title}
+            <ImageWithPlaceholderWhileLoading
-                width={width}
+                src={src}
-                height="auto"
+                alt={alt}
-                placeholderWidth={placeholderSize.width}
+                title={title}
-                placeholderHeight={placeholderSize.height}
+                width={width}
-            />
+                height="auto"
-        )
+                placeholderWidth={placeholderSize.width}
-    }
+                placeholderHeight={placeholderSize.height}
-    return undefined
+            />
-}
+        )
-
+    }
-class HighlightMatcher extends Matcher {
+    return undefined
-    private search: string
+}
-
+
-    constructor(search: string) {
+class HighlightMatcher extends Matcher {
-        super("highlight")
+    private readonly search: string
-        this.search = escapeStringRegexp(search)
+
-    }
+    constructor(search: string) {
-
+        super("highlight")
-    match(string: string): MatchResponse<unknown> | null {
+        this.search = escapeStringRegexp(search)
-        const pattern = this.search.split(" ").join("|")
+    }
-        return this.doMatch(string, new RegExp(pattern, "i"), () => ({}))
+
-    }
+    match(string: string): MatchResponse<unknown> | null {
-
+        const pattern = this.search.split(" ").join("|")
-    // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
+        return this.doMatch(string, new RegExp(pattern, "i"), () => ({}))
-    replaceWith(children: ChildrenNode, props: unknown): Node {
+    }
-        return <Mark>{children}</Mark>
+
-    }
+    replaceWith(children: ChildrenNode): Node {
-
+        return <Mark>{children}</Mark>
-    // eslint-disable-next-line class-methods-use-this
+    }
-    asTag(): string {
+
-        return "span"
+    asTag(): string {
-    }
+        return "span"
-}
+    }
-
+}
-// memoize component because Interweave is costly
+
-const Content = React.memo((props: ContentProps) => {
+// memoize component because Interweave is costly
-    const { classes } = useStyles()
+const Content = React.memo((props: ContentProps) => {
-    const matchers = props.highlight ? [new HighlightMatcher(props.highlight)] : []
+    const { classes } = useStyles()
-
+    const matchers = props.highlight ? [new HighlightMatcher(props.highlight)] : []
-    return (
+
-        <TypographyStylesProvider>
+    return (
-            <Box className={classes.content}>
+        <BasicHtmlStyles>
-                <Interweave content={props.content} transform={transform} matchers={matchers} />
+            <Box className={classes.content}>
-            </Box>
+                <Interweave content={props.content} transform={transform} matchers={matchers} />
-        </TypographyStylesProvider>
+            </Box>
-    )
+        </BasicHtmlStyles>
-})
+    )
-
+})
-export { Content }
+Content.displayName = "Content"
+
+export { Content }

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

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

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

@@ -1,314 +1,329 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
-import { Box } from "@mantine/core"
+import { Box } from "@mantine/core"
-import { openModal } from "@mantine/modals"
+import { openModal } from "@mantine/modals"
-import { Constants } from "app/constants"
+import { Constants } from "app/constants"
-import {
+import type { ExpendableEntry } from "app/entries/slice"
-    ExpendableEntry,
+import {
-    loadMoreEntries,
+    loadMoreEntries,
-    markAllEntries,
+    markAllEntries,
-    markEntry,
+    markEntry,
-    reloadEntries,
+    reloadEntries,
-    selectEntry,
+    selectEntry,
-    selectNextEntry,
+    selectNextEntry,
-    selectPreviousEntry,
+    selectPreviousEntry,
-} from "app/slices/entries"
+    starEntry,
-import { redirectToRootCategory } from "app/slices/redirect"
+} from "app/entries/thunks"
-import { toggleSidebar } from "app/slices/tree"
+import { redirectToRootCategory } from "app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
+import { useAppDispatch, useAppSelector } from "app/store"
-import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
+import { toggleSidebar } from "app/tree/slice"
-import { Loader } from "components/Loader"
+import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
+import { Loader } from "components/Loader"
-import { useMousetrap } from "hooks/useMousetrap"
+import { useBrowserExtension } from "hooks/useBrowserExtension"
-import { useViewMode } from "hooks/useViewMode"
+import { useMousetrap } from "hooks/useMousetrap"
-import { useEffect } from "react"
+import { useViewMode } from "hooks/useViewMode"
-import { useContextMenu } from "react-contexify"
+import { useEffect } from "react"
-import InfiniteScroll from "react-infinite-scroller"
+import { useContextMenu } from "react-contexify"
-import { throttle } from "throttle-debounce"
+import InfiniteScroll from "react-infinite-scroller"
-import { FeedEntry } from "./FeedEntry"
+import { throttle } from "throttle-debounce"
-
+import { FeedEntry } from "./FeedEntry"
-export function FeedEntries() {
+
-    const source = useAppSelector(state => state.entries.source)
+export function FeedEntries() {
-    const entries = useAppSelector(state => state.entries.entries)
+    const source = useAppSelector(state => state.entries.source)
-    const entriesTimestamp = useAppSelector(state => state.entries.timestamp)
+    const entries = useAppSelector(state => state.entries.entries)
-    const selectedEntryId = useAppSelector(state => state.entries.selectedEntryId)
+    const entriesTimestamp = useAppSelector(state => state.entries.timestamp)
-    const hasMore = useAppSelector(state => state.entries.hasMore)
+    const selectedEntryId = useAppSelector(state => state.entries.selectedEntryId)
-    const loading = useAppSelector(state => state.entries.loading)
+    const hasMore = useAppSelector(state => state.entries.hasMore)
-    const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
+    const loading = useAppSelector(state => state.entries.loading)
-    const scrollingToEntry = useAppSelector(state => state.entries.scrollingToEntry)
+    const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
-    const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible)
+    const scrollingToEntry = useAppSelector(state => state.entries.scrollingToEntry)
-    const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
+    const sidebarVisible = useAppSelector(state => state.tree.sidebarVisible)
-    const { viewMode } = useViewMode()
+    const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
-    const dispatch = useAppDispatch()
+    const { viewMode } = useViewMode()
-    const { openLinkInBackgroundTab } = useBrowserExtension()
+    const dispatch = useAppDispatch()
-
+    const { openLinkInBackgroundTab } = useBrowserExtension()
-    const selectedEntry = entries.find(e => e.id === selectedEntryId)
+
-
+    const selectedEntry = entries.find(e => e.id === selectedEntryId)
-    const headerClicked = (entry: ExpendableEntry, event: React.MouseEvent) => {
+
-        const middleClick = event.button === 1 || event.ctrlKey || event.metaKey
+    const headerClicked = (entry: ExpendableEntry, event: React.MouseEvent) => {
-        if (middleClick || viewMode === "expanded") {
+        const middleClick = event.button === 1 || event.ctrlKey || event.metaKey
-            dispatch(markEntry({ entry, read: true }))
+        if (middleClick || viewMode === "expanded") {
-        } else if (event.button === 0) {
+            dispatch(markEntry({ entry, read: true }))
-            // main click
+        } else if (event.button === 0) {
-            // don't trigger the link
+            // main click
-            event.preventDefault()
+            // don't trigger the link
-
+            event.preventDefault()
-            dispatch(
+
-                selectEntry({
+            dispatch(
-                    entry,
+                selectEntry({
-                    expand: !entry.expanded,
+                    entry,
-                    markAsRead: !entry.expanded,
+                    expand: !entry.expanded,
-                    scrollToEntry: true,
+                    markAsRead: !entry.expanded,
-                })
+                    scrollToEntry: true,
-            )
+                })
-        }
+            )
-    }
+        }
-
+    }
-    const contextMenu = useContextMenu()
+
-    const headerRightClicked = (entry: ExpendableEntry, event: React.MouseEvent) => {
+    const contextMenu = useContextMenu()
-        if (event.shiftKey || !customContextMenu) return
+    const headerRightClicked = (entry: ExpendableEntry, event: React.MouseEvent) => {
-
+        if (event.shiftKey || !customContextMenu) return
-        event.preventDefault()
+
-        contextMenu.show({
+        event.preventDefault()
-            id: Constants.dom.entryContextMenuId(entry),
+        contextMenu.show({
-            event,
+            id: Constants.dom.entryContextMenuId(entry),
-        })
+            event,
-    }
+        })
-
+    }
-    const bodyClicked = (entry: ExpendableEntry) => {
+
-        if (viewMode !== "expanded") return
+    const bodyClicked = (entry: ExpendableEntry) => {
-
+        if (viewMode !== "expanded") return
-        // entry is already selected
+
-        if (entry.id === selectedEntryId) return
+        // entry is already selected
-
+        if (entry.id === selectedEntryId) return
-        dispatch(
+
-            selectEntry({
+        dispatch(
-                entry,
+            selectEntry({
-                expand: true,
+                entry,
-                markAsRead: true,
+                expand: true,
-                scrollToEntry: true,
+                markAsRead: true,
-            })
+                scrollToEntry: true,
-        )
+            })
-    }
+        )
-
+    }
-    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(() => {
+    // close context menu on scroll
-        const listener = throttle(100, () => contextMenu.hideAll())
+    useEffect(() => {
-        window.addEventListener("scroll", listener)
+        const listener = throttle(100, () => contextMenu.hideAll())
-        return () => window.removeEventListener("scroll", listener)
+        window.addEventListener("scroll", listener)
-    }, [contextMenu])
+        return () => window.removeEventListener("scroll", listener)
-
+    }, [contextMenu])
-    useEffect(() => {
+
-        const listener = throttle(100, () => {
+    useEffect(() => {
-            if (viewMode !== "expanded") return
+        const listener = throttle(100, () => {
-            if (scrollingToEntry) return
+            if (viewMode !== "expanded") return
-
+            if (scrollingToEntry) return
-            const currentEntry = entries
+
-                // use slice to get a copy of the array because reverse mutates the array in-place
+            const currentEntry = entries
-                .slice()
+                // use slice to get a copy of the array because reverse mutates the array in-place
-                .reverse()
+                .slice()
-                .find(e => {
+                .reverse()
-                    const el = document.getElementById(Constants.dom.entryId(e))
+                .find(e => {
-                    return el && !Constants.layout.isTopVisible(el)
+                    const el = document.getElementById(Constants.dom.entryId(e))
-                })
+                    return el && !Constants.layout.isTopVisible(el)
-            if (currentEntry) {
+                })
-                dispatch(
+            if (currentEntry) {
-                    selectEntry({
+                dispatch(
-                        entry: currentEntry,
+                    selectEntry({
-                        expand: false,
+                        entry: currentEntry,
-                        markAsRead: !!scrollMarks,
+                        expand: false,
-                        scrollToEntry: false,
+                        markAsRead: !!scrollMarks,
-                    })
+                        scrollToEntry: false,
-                )
+                    })
-            }
+                )
-        })
+            }
-        window.addEventListener("scroll", listener)
+        })
-        return () => window.removeEventListener("scroll", listener)
+        window.addEventListener("scroll", listener)
-    }, [dispatch, contextMenu, entries, viewMode, scrollMarks, scrollingToEntry])
+        return () => window.removeEventListener("scroll", listener)
-
+    }, [dispatch, entries, viewMode, scrollMarks, scrollingToEntry])
-    useMousetrap("r", () => dispatch(reloadEntries()))
+
-    useMousetrap("j", () =>
+    useMousetrap("r", async () => await dispatch(reloadEntries()))
-        dispatch(
+    useMousetrap(
-            selectNextEntry({
+        "j",
-                expand: true,
+        async () =>
-                markAsRead: true,
+            await dispatch(
-                scrollToEntry: true,
+                selectNextEntry({
-            })
+                    expand: true,
-        )
+                    markAsRead: true,
-    )
+                    scrollToEntry: true,
-    useMousetrap("n", () =>
+                })
-        dispatch(
+            )
-            selectNextEntry({
+    )
-                expand: false,
+    useMousetrap(
-                markAsRead: false,
+        "n",
-                scrollToEntry: true,
+        async () =>
-            })
+            await dispatch(
-        )
+                selectNextEntry({
-    )
+                    expand: false,
-    useMousetrap("k", () =>
+                    markAsRead: false,
-        dispatch(
+                    scrollToEntry: true,
-            selectPreviousEntry({
+                })
-                expand: true,
+            )
-                markAsRead: true,
+    )
-                scrollToEntry: true,
+    useMousetrap(
-            })
+        "k",
-        )
+        async () =>
-    )
+            await dispatch(
-    useMousetrap("p", () =>
+                selectPreviousEntry({
-        dispatch(
+                    expand: true,
-            selectPreviousEntry({
+                    markAsRead: true,
-                expand: false,
+                    scrollToEntry: true,
-                markAsRead: false,
+                })
-                scrollToEntry: true,
+            )
-            })
+    )
-        )
+    useMousetrap(
-    )
+        "p",
-    useMousetrap("space", () => {
+        async () =>
-        if (selectedEntry) {
+            await dispatch(
-            if (selectedEntry.expanded) {
+                selectPreviousEntry({
-                const entryElement = document.getElementById(Constants.dom.entryId(selectedEntry))
+                    expand: false,
-                if (entryElement && Constants.layout.isBottomVisible(entryElement)) {
+                    markAsRead: false,
-                    dispatch(
+                    scrollToEntry: true,
-                        selectNextEntry({
+                })
-                            expand: true,
+            )
-                            markAsRead: true,
+    )
-                            scrollToEntry: true,
+    useMousetrap("space", () => {
-                        })
+        if (selectedEntry) {
-                    )
+            if (selectedEntry.expanded) {
-                } else {
+                const entryElement = document.getElementById(Constants.dom.entryId(selectedEntry))
-                    window.scrollTo({
+                if (entryElement && Constants.layout.isBottomVisible(entryElement)) {
-                        top: window.scrollY + document.documentElement.clientHeight * 0.8,
+                    dispatch(
-                        behavior: "smooth",
+                        selectNextEntry({
-                    })
+                            expand: true,
-                }
+                            markAsRead: true,
-            } else {
+                            scrollToEntry: true,
-                dispatch(
+                        })
-                    selectEntry({
+                    )
-                        entry: selectedEntry,
+                } else {
-                        expand: true,
+                    window.scrollTo({
-                        markAsRead: true,
+                        top: window.scrollY + document.documentElement.clientHeight * 0.8,
-                        scrollToEntry: true,
+                        behavior: "smooth",
-                    })
+                    })
-                )
+                }
-            }
+            } else {
-        } else {
+                dispatch(
-            dispatch(
+                    selectEntry({
-                selectNextEntry({
+                        entry: selectedEntry,
-                    expand: true,
+                        expand: true,
-                    markAsRead: true,
+                        markAsRead: true,
-                    scrollToEntry: true,
+                        scrollToEntry: true,
-                })
+                    })
-            )
+                )
-        }
+            }
-    })
+        } else {
-    useMousetrap("shift+space", () => {
+            dispatch(
-        if (selectedEntry) {
+                selectNextEntry({
-            if (selectedEntry.expanded) {
+                    expand: true,
-                const entryElement = document.getElementById(Constants.dom.entryId(selectedEntry))
+                    markAsRead: true,
-                if (entryElement && Constants.layout.isTopVisible(entryElement)) {
+                    scrollToEntry: true,
-                    dispatch(
+                })
-                        selectPreviousEntry({
+            )
-                            expand: true,
+        }
-                            markAsRead: true,
+    })
-                            scrollToEntry: true,
+    useMousetrap("shift+space", () => {
-                        })
+        if (selectedEntry) {
-                    )
+            if (selectedEntry.expanded) {
-                } else {
+                const entryElement = document.getElementById(Constants.dom.entryId(selectedEntry))
-                    window.scrollTo({
+                if (entryElement && Constants.layout.isTopVisible(entryElement)) {
-                        top: window.scrollY - document.documentElement.clientHeight * 0.8,
+                    dispatch(
-                        behavior: "smooth",
+                        selectPreviousEntry({
-                    })
+                            expand: true,
-                }
+                            markAsRead: true,
-            } else {
+                            scrollToEntry: true,
-                dispatch(
+                        })
-                    selectPreviousEntry({
+                    )
-                        expand: true,
+                } else {
-                        markAsRead: true,
+                    window.scrollTo({
-                        scrollToEntry: true,
+                        top: window.scrollY - document.documentElement.clientHeight * 0.8,
-                    })
+                        behavior: "smooth",
-                )
+                    })
-            }
+                }
-        }
+            } else {
-    })
+                dispatch(
-    useMousetrap(["o", "enter"], () => {
+                    selectPreviousEntry({
-        // toggle expanded status
+                        expand: true,
-        if (!selectedEntry) return
+                        markAsRead: true,
-        dispatch(
+                        scrollToEntry: true,
-            selectEntry({
+                    })
-                entry: selectedEntry,
+                )
-                expand: !selectedEntry.expanded,
+            }
-                markAsRead: !selectedEntry.expanded,
+        }
-                scrollToEntry: true,
+    })
-            })
+    useMousetrap(["o", "enter"], () => {
-        )
+        // toggle expanded status
-    })
+        if (!selectedEntry) return
-    useMousetrap("v", () => {
+        dispatch(
-        // open tab in foreground
+            selectEntry({
-        if (!selectedEntry) return
+                entry: selectedEntry,
-        window.open(selectedEntry.url, "_blank", "noreferrer")
+                expand: !selectedEntry.expanded,
-    })
+                markAsRead: !selectedEntry.expanded,
-    useMousetrap("b", () => {
+                scrollToEntry: true,
-        if (!selectedEntry) return
+            })
-        openLinkInBackgroundTab(selectedEntry.url)
+        )
-    })
+    })
-    useMousetrap("m", () => {
+    useMousetrap("v", () => {
-        // toggle read status
+        // open tab in foreground
-        if (!selectedEntry) return
+        if (!selectedEntry) return
-        dispatch(markEntry({ entry: selectedEntry, read: !selectedEntry.read }))
+        window.open(selectedEntry.url, "_blank", "noreferrer")
-    })
+    })
-    useMousetrap("shift+a", () => {
+    useMousetrap("b", () => {
-        // mark all entries as read
+        if (!selectedEntry) return
-        dispatch(
+        openLinkInBackgroundTab(selectedEntry.url)
-            markAllEntries({
+    })
-                sourceType: source.type,
+    useMousetrap("m", () => {
-                req: {
+        // toggle read status
-                    id: source.id,
+        if (!selectedEntry) return
-                    read: true,
+        dispatch(markEntry({ entry: selectedEntry, read: !selectedEntry.read }))
-                    olderThan: entriesTimestamp,
+    })
-                },
+    useMousetrap("s", () => {
-            })
+        // toggle starred status
-        )
+        if (!selectedEntry) return
-    })
+        dispatch(starEntry({ entry: selectedEntry, starred: !selectedEntry.starred }))
-    useMousetrap("g a", () => dispatch(redirectToRootCategory()))
+    })
-    useMousetrap("f", () => dispatch(toggleSidebar()))
+    useMousetrap("shift+a", () => {
-    useMousetrap("?", () =>
+        // mark all entries as read
-        openModal({
+        dispatch(
-            title: <Trans>Keyboard shortcuts</Trans>,
+            markAllEntries({
-            size: "xl",
+                sourceType: source.type,
-            children: <KeyboardShortcutsHelp />,
+                req: {
-        })
+                    id: source.id,
-    )
+                    read: true,
-
+                    olderThan: Date.now(),
-    if (!entries) return <Loader />
+                    insertedBefore: entriesTimestamp,
-    return (
+                },
-        <InfiniteScroll
+            })
-            id="entries"
+        )
-            initialLoad={false}
+    })
-            loadMore={() => !loading && dispatch(loadMoreEntries())}
+    useMousetrap("g a", async () => await dispatch(redirectToRootCategory()))
-            hasMore={hasMore}
+    useMousetrap("f", () => dispatch(toggleSidebar()))
-            loader={<Box key={0}>{loading && <Loader />}</Box>}
+    useMousetrap("?", () =>
-        >
+        openModal({
-            {entries.map(entry => (
+            title: <Trans>Keyboard shortcuts</Trans>,
-                <div
+            size: "xl",
-                    key={entry.id}
+            children: <KeyboardShortcutsHelp />,
-                    ref={el => {
+        })
-                        if (el) el.id = Constants.dom.entryId(entry)
+    )
-                    }}
+
-                >
+    return (
-                    <FeedEntry
+        <InfiniteScroll
-                        entry={entry}
+            id="entries"
-                        expanded={!!entry.expanded || viewMode === "expanded"}
+            className={`view-mode-${viewMode}`}
-                        selected={entry.id === selectedEntryId}
+            initialLoad={false}
-                        showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
+            loadMore={async () => await (!loading && dispatch(loadMoreEntries()))}
-                        maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
+            hasMore={hasMore}
-                        onHeaderClick={event => headerClicked(entry, event)}
+            loader={<Box key={0}>{loading && <Loader />}</Box>}
-                        onHeaderRightClick={event => headerRightClicked(entry, event)}
+        >
-                        onBodyClick={() => bodyClicked(entry)}
+            {entries.map(entry => (
-                        onSwipedRight={() => swipedRight(entry)}
+                <div
-                    />
+                    key={entry.id}
-                </div>
+                    ref={el => {
-            ))}
+                        if (el) el.id = Constants.dom.entryId(entry)
-        </InfiniteScroll>
+                    }}
-    )
+                >
-}
+                    <FeedEntry
+                        entry={entry}
+                        expanded={!!entry.expanded || viewMode === "expanded"}
+                        selected={entry.id === selectedEntryId}
+                        showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
+                        maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
+                        onHeaderClick={event => headerClicked(entry, event)}
+                        onHeaderRightClick={event => headerRightClicked(entry, event)}
+                        onBodyClick={() => bodyClicked(entry)}
+                        onSwipedLeft={async () => await swipedLeft(entry)}
+                    />
+                </div>
+            ))}
+        </InfiniteScroll>
+    )
+}

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

@@ -1,151 +1,191 @@
-import { Box, createStyles, Divider, Paper } from "@mantine/core"
+import { Box, Divider, type MantineRadius, type MantineSpacing, Paper } from "@mantine/core"
-import { MantineNumberSize } from "@mantine/styles"
+import { Constants } from "app/constants"
-import { Constants } from "app/constants"
+import { useAppSelector } from "app/store"
-import { Entry, ViewMode } from "app/types"
+import type { Entry, ViewMode } from "app/types"
-import { useViewMode } from "hooks/useViewMode"
+import { FeedEntryCompactHeader } from "components/content/header/FeedEntryCompactHeader"
-import React from "react"
+import { FeedEntryHeader } from "components/content/header/FeedEntryHeader"
-import { useSwipeable } from "react-swipeable"
+import { useMobile } from "hooks/useMobile"
-import { FeedEntryBody } from "./FeedEntryBody"
+import { useViewMode } from "hooks/useViewMode"
-import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader"
+import type React from "react"
-import { FeedEntryContextMenu } from "./FeedEntryContextMenu"
+import { useSwipeable } from "react-swipeable"
-import { FeedEntryFooter } from "./FeedEntryFooter"
+import { tss } from "tss"
-import { FeedEntryHeader } from "./FeedEntryHeader"
+import { FeedEntryBody } from "./FeedEntryBody"
-
+import { FeedEntryContextMenu } from "./FeedEntryContextMenu"
-interface FeedEntryProps {
+import { FeedEntryFooter } from "./FeedEntryFooter"
-    entry: Entry
+
-    expanded: boolean
+interface FeedEntryProps {
-    selected: boolean
+    entry: Entry
-    showSelectionIndicator: boolean
+    expanded: boolean
-    maxWidth?: number
+    selected: boolean
-    onHeaderClick: (e: React.MouseEvent) => void
+    showSelectionIndicator: boolean
-    onHeaderRightClick: (e: React.MouseEvent) => void
+    maxWidth?: number
-    onBodyClick: (e: React.MouseEvent) => void
+    onHeaderClick: (e: React.MouseEvent) => void
-    onSwipedRight: () => void
+    onHeaderRightClick: (e: React.MouseEvent) => void
-}
+    onBodyClick: (e: React.MouseEvent) => void
-
+    onSwipedLeft: () => void
-const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: ViewMode }) => {
+}
-    let backgroundColor
+
-    if (theme.colorScheme === "dark") {
+const useStyles = tss
-        backgroundColor = props.entry.read ? "inherit" : theme.colors.dark[5]
+    .withParams<{
-    } else {
+        read: boolean
-        backgroundColor = props.entry.read && !props.expanded ? theme.colors.gray[0] : "inherit"
+        expanded: boolean
-    }
+        viewMode: ViewMode
-
+        rtl: boolean
-    let marginY = 10
+        showSelectionIndicator: boolean
-    if (props.viewMode === "title") {
+        maxWidth?: number
-        marginY = 2
+    }>()
-    } else if (props.viewMode === "cozy") {
+    .create(({ theme, colorScheme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth }) => {
-        marginY = 6
+        let backgroundColor: string
-    }
+        if (colorScheme === "dark") {
-
+            backgroundColor = read ? "inherit" : theme.colors.dark[5]
-    let mobileMarginY = 6
+        } else {
-    if (props.viewMode === "title") {
+            backgroundColor = read && !expanded ? theme.colors.gray[0] : "inherit"
-        mobileMarginY = 2
+        }
-    } else if (props.viewMode === "cozy") {
+
-        mobileMarginY = 4
+        let marginY = 10
-    }
+        if (viewMode === "title") {
-
+            marginY = 2
-    let backgroundHoverColor = backgroundColor
+        } else if (viewMode === "cozy") {
-    if (!props.expanded && !props.entry.read) {
+            marginY = 6
-        backgroundHoverColor = theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
+        }
-    }
+
-
+        let mobileMarginY = 6
-    let paperBorderLeftColor
+        if (viewMode === "title") {
-    if (props.showSelectionIndicator) {
+            mobileMarginY = 2
-        const borderLeftColor = theme.colorScheme === "dark" ? theme.colors.orange[4] : theme.colors.orange[6]
+        } else if (viewMode === "cozy") {
-        paperBorderLeftColor = `${borderLeftColor} !important`
+            mobileMarginY = 4
-    }
+        }
-
+
-    return {
+        let backgroundHoverColor = backgroundColor
-        paper: {
+        if (!expanded && !read) {
-            backgroundColor,
+            backgroundHoverColor = colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
-            borderLeftColor: paperBorderLeftColor,
+        }
-            marginTop: marginY,
+
-            marginBottom: marginY,
+        let paperBorderLeftColor = ""
-            [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: {
+        if (showSelectionIndicator) {
-                marginTop: mobileMarginY,
+            const borderLeftColor = colorScheme === "dark" ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6]
-                marginBottom: mobileMarginY,
+            paperBorderLeftColor = `${borderLeftColor} !important`
-            },
+        }
-            "@media (hover: hover)": {
+
-                "&:hover": {
+        return {
-                    backgroundColor: backgroundHoverColor,
+            paper: {
-                },
+                backgroundColor,
-            },
+                borderLeftColor: paperBorderLeftColor,
-        },
+                marginTop: marginY,
-        headerLink: {
+                marginBottom: marginY,
-            color: "inherit",
+                [`@media (max-width: ${Constants.layout.mobileBreakpoint}px)`]: {
-            textDecoration: "none",
+                    marginTop: mobileMarginY,
-        },
+                    marginBottom: mobileMarginY,
-        body: {
+                },
-            direction: props.entry.rtl ? "rtl" : "ltr",
+                "@media (hover: hover)": {
-            maxWidth: props.maxWidth ?? "100%",
+                    "&:hover": {
-        },
+                        backgroundColor: backgroundHoverColor,
-    }
+                    },
-})
+                },
-
+            },
-export function FeedEntry(props: FeedEntryProps) {
+            headerLink: {
-    const { viewMode } = useViewMode()
+                color: "inherit",
-    const { classes, cx } = useStyles({ ...props, viewMode })
+                textDecoration: "none",
-
+            },
-    const swipeHandlers = useSwipeable({
+            body: {
-        onSwipedRight: props.onSwipedRight,
+                direction: rtl ? "rtl" : "ltr",
-    })
+                maxWidth: maxWidth ?? "100%",
-
+            },
-    let paddingX: MantineNumberSize = "xs"
+        }
-    if (viewMode === "title" || viewMode === "cozy") paddingX = 6
+    })
-
+
-    let paddingY: MantineNumberSize = "xs"
+export function FeedEntry(props: FeedEntryProps) {
-    if (viewMode === "title") {
+    const { viewMode } = useViewMode()
-        paddingY = 4
+    const { classes, cx } = useStyles({
-    } else if (viewMode === "cozy") {
+        read: props.entry.read,
-        paddingY = 8
+        expanded: props.expanded,
-    }
+        viewMode,
-
+        rtl: props.entry.rtl,
-    let borderRadius: MantineNumberSize = "sm"
+        showSelectionIndicator: props.showSelectionIndicator,
-    if (viewMode === "title") {
+        maxWidth: props.maxWidth,
-        borderRadius = 0
+    })
-    } else if (viewMode === "cozy") {
+
-        borderRadius = "xs"
+    const externalLinkDisplayMode = useAppSelector(state => state.user.settings?.externalLinkIconDisplayMode)
-    }
+    const starIconDisplayMode = useAppSelector(state => state.user.settings?.starIconDisplayMode)
-
+    const mobile = useMobile()
-    const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
+
-    return (
+    const showExternalLinkIcon =
-        <Paper
+        externalLinkDisplayMode && ["always", mobile ? "on_mobile" : "on_desktop"].includes(externalLinkDisplayMode)
-            withBorder
+    const showStarIcon =
-            radius={borderRadius}
+        props.entry.markable && starIconDisplayMode && ["always", mobile ? "on_mobile" : "on_desktop"].includes(starIconDisplayMode)
-            className={cx(classes.paper, {
+
-                read: props.entry.read,
+    const swipeHandlers = useSwipeable({
-                unread: !props.entry.read,
+        onSwipedLeft: props.onSwipedLeft,
-                expanded: props.expanded,
+    })
-                selected: props.selected,
+
-                "show-selection-indicator": props.showSelectionIndicator,
+    let paddingX: MantineSpacing = "xs"
-            })}
+    if (viewMode === "title" || viewMode === "cozy") paddingX = 6
-        >
+
-            <a
+    let paddingY: MantineSpacing = "xs"
-                className={classes.headerLink}
+    if (viewMode === "title") {
-                href={props.entry.url}
+        paddingY = 4
-                target="_blank"
+    } else if (viewMode === "cozy") {
-                rel="noreferrer"
+        paddingY = 8
-                onClick={props.onHeaderClick}
+    }
-                onAuxClick={props.onHeaderClick}
+
-                onContextMenu={props.onHeaderRightClick}
+    let borderRadius: MantineRadius = "sm"
-            >
+    if (viewMode === "title") {
-                <Box px={paddingX} py={paddingY} {...swipeHandlers}>
+        borderRadius = 0
-                    {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
+    } else if (viewMode === "cozy") {
-                    {!compactHeader && <FeedEntryHeader entry={props.entry} expanded={props.expanded} />}
+        borderRadius = "xs"
-                </Box>
+    }
-            </a>
+
-            {props.expanded && (
+    const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
-                <Box px={paddingX} pb={paddingY} onClick={props.onBodyClick}>
+    return (
-                    <Box className={classes.body}>
+        <Paper
-                        <FeedEntryBody entry={props.entry} />
+            withBorder
-                    </Box>
+            radius={borderRadius}
-                    <Divider variant="dashed" my={paddingY} />
+            className={cx(classes.paper, {
-                    <FeedEntryFooter entry={props.entry} />
+                read: props.entry.read,
-                </Box>
+                unread: !props.entry.read,
-            )}
+                expanded: props.expanded,
-
+                selected: props.selected,
-            <FeedEntryContextMenu entry={props.entry} />
+                "show-selection-indicator": props.showSelectionIndicator,
-        </Paper>
+            })}
-    )
+        >
-}
+            <a
+                className={classes.headerLink}
+                href={props.entry.url}
+                target="_blank"
+                rel="noreferrer"
+                onClick={props.onHeaderClick}
+                onAuxClick={props.onHeaderClick}
+                onContextMenu={props.onHeaderRightClick}
+            >
+                <Box px={paddingX} py={paddingY} {...swipeHandlers}>
+                    {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 && (
+                <Box px={paddingX} pb={paddingY} onClick={props.onBodyClick}>
+                    <Box className={classes.body}>
+                        <FeedEntryBody entry={props.entry} />
+                    </Box>
+                    <Divider variant="dashed" my={paddingY} />
+                    <FeedEntryFooter entry={props.entry} />
+                </Box>
+            )}
+
+            <FeedEntryContextMenu entry={props.entry} />
+        </Paper>
+    )
+}

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

@@ -1,37 +1,37 @@
-import { Box } from "@mantine/core"
+import { Box } from "@mantine/core"
-import { useAppSelector } from "app/store"
+import { useAppSelector } from "app/store"
-import { Entry } from "app/types"
+import type { Entry } from "app/types"
-import { Content } from "./Content"
+import { Content } from "./Content"
-import { Enclosure } from "./Enclosure"
+import { Enclosure } from "./Enclosure"
-import { Media } from "./Media"
+import { Media } from "./Media"
-
+
-export interface FeedEntryBodyProps {
+export interface FeedEntryBodyProps {
-    entry: Entry
+    entry: Entry
-}
+}
-
+
-export function FeedEntryBody(props: FeedEntryBodyProps) {
+export function FeedEntryBody(props: FeedEntryBodyProps) {
-    const search = useAppSelector(state => state.entries.search)
+    const search = useAppSelector(state => state.entries.search)
-    return (
+    return (
-        <Box>
+        <Box>
-            <Box>
+            <Box>
-                <Content content={props.entry.content} highlight={search} />
+                <Content content={props.entry.content} highlight={search} />
-            </Box>
+            </Box>
-            {props.entry.enclosureType && props.entry.enclosureUrl && (
+            {props.entry.enclosureType && props.entry.enclosureUrl && (
-                <Box pt="md">
+                <Box pt="md">
-                    <Enclosure enclosureType={props.entry.enclosureType} enclosureUrl={props.entry.enclosureUrl} />
+                    <Enclosure enclosureType={props.entry.enclosureType} enclosureUrl={props.entry.enclosureUrl} />
-                </Box>
+                </Box>
-            )}
+            )}
-            {/* show media only if we don't have content to avoid duplicate content */}
+            {/* show media only if we don't have content to avoid duplicate content */}
-            {!props.entry.content && props.entry.mediaThumbnailUrl && (
+            {!props.entry.content && props.entry.mediaThumbnailUrl && (
-                <Box pt="md">
+                <Box pt="md">
-                    <Media
+                    <Media
-                        thumbnailUrl={props.entry.mediaThumbnailUrl}
+                        thumbnailUrl={props.entry.mediaThumbnailUrl}
-                        thumbnailWidth={props.entry.mediaThumbnailWidth}
+                        thumbnailWidth={props.entry.mediaThumbnailWidth}
-                        thumbnailHeight={props.entry.mediaThumbnailHeight}
+                        thumbnailHeight={props.entry.mediaThumbnailHeight}
-                        description={props.entry.mediaDescription}
+                        description={props.entry.mediaDescription}
-                    />
+                    />
-                </Box>
+                </Box>
-            )}
+            )}
-        </Box>
+        </Box>
-    )
+    )
-}
+}

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,100 +1,103 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
-import { createStyles, Group } from "@mantine/core"
+import { Group } from "@mantine/core"
-import { Constants } from "app/constants"
+import { Constants } from "app/constants"
-import { markEntriesUpToEntry, markEntry, starEntry } from "app/slices/entries"
+import { markEntriesUpToEntry, markEntry, starEntry } from "app/entries/thunks"
-import { redirectToFeed } from "app/slices/redirect"
+import { redirectToFeed } from "app/redirect/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
+import { useAppDispatch, useAppSelector } from "app/store"
-import { Entry } from "app/types"
+import type { Entry } from "app/types"
-import { truncate } from "app/utils"
+import { truncate } from "app/utils"
-import { useBrowserExtension } from "hooks/useBrowserExtension"
+import { useBrowserExtension } from "hooks/useBrowserExtension"
-import { Item, Menu, Separator } from "react-contexify"
+import { useColorScheme } from "hooks/useColorScheme"
-import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb"
+import { Item, Menu, Separator } from "react-contexify"
-
+import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb"
-interface FeedEntryContextMenuProps {
+import { tss } from "tss"
-    entry: Entry
+
-}
+interface FeedEntryContextMenuProps {
-
+    entry: Entry
-const iconSize = 16
+}
-const useStyles = createStyles(theme => ({
+
-    menu: {
+const iconSize = 16
-        // apply mantine theme from MenuItem.styles.ts
+const useStyles = tss.create(({ theme, colorScheme }) => ({
-        fontSize: theme.fontSizes.sm,
+    menu: {
-        "--contexify-item-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
+        // apply mantine theme from MenuItem.styles.ts
-        "--contexify-activeItem-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
+        fontSize: theme.fontSizes.sm,
-        "--contexify-activeItem-bgColor": `${
+        "--contexify-item-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
-            theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors.dark[3], 0.35) : theme.colors.gray[1]
+        "--contexify-activeItem-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
-        } !important`,
+        "--contexify-activeItem-bgColor": `${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]} !important`,
-    },
+    },
-}))
+}))
-
+
-export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
+export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
-    const { classes, theme } = useStyles()
+    const colorScheme = useColorScheme()
-    const sourceType = useAppSelector(state => state.entries.source.type)
+    const { classes } = useStyles()
-    const dispatch = useAppDispatch()
+    const sourceType = useAppSelector(state => state.entries.source.type)
-    const { openLinkInBackgroundTab } = useBrowserExtension()
+    const dispatch = useAppDispatch()
-
+    const { openLinkInBackgroundTab } = useBrowserExtension()
-    return (
+
-        <Menu id={Constants.dom.entryContextMenuId(props.entry)} theme={theme.colorScheme} animation={false} className={classes.menu}>
+    return (
-            <Item
+        <Menu id={Constants.dom.entryContextMenuId(props.entry)} theme={colorScheme} animation={false} className={classes.menu}>
-                onClick={() => {
+            <Item
-                    window.open(props.entry.url, "_blank", "noreferrer")
+                onClick={() => {
-                    dispatch(markEntry({ entry: props.entry, read: true }))
+                    window.open(props.entry.url, "_blank", "noreferrer")
-                }}
+                    dispatch(markEntry({ entry: props.entry, read: true }))
-            >
+                }}
-                <Group>
+            >
-                    <TbExternalLink size={iconSize} />
+                <Group>
-                    <Trans>Open link in new tab</Trans>
+                    <TbExternalLink size={iconSize} />
-                </Group>
+                    <Trans>Open link in new tab</Trans>
-            </Item>
+                </Group>
-            <Item
+            </Item>
-                onClick={() => {
+            <Item
-                    openLinkInBackgroundTab(props.entry.url)
+                onClick={() => {
-                    dispatch(markEntry({ entry: props.entry, read: true }))
+                    openLinkInBackgroundTab(props.entry.url)
-                }}
+                    dispatch(markEntry({ entry: props.entry, read: true }))
-            >
+                }}
-                <Group>
+            >
-                    <TbExternalLink size={iconSize} />
+                <Group>
-                    <Trans>Open link in new background tab</Trans>
+                    <TbExternalLink size={iconSize} />
-                </Group>
+                    <Trans>Open link in new background tab</Trans>
-            </Item>
+                </Group>
-
+            </Item>
-            <Separator />
+
-
+            <Separator />
-            <Item onClick={() => dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}>
+
-                <Group>
+            <Item onClick={async () => await dispatch(starEntry({ entry: props.entry, starred: !props.entry.starred }))}>
-                    {props.entry.starred ? <TbStarOff size={iconSize} /> : <TbStar size={iconSize} />}
+                <Group>
-                    {props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
+                    {props.entry.starred ? <TbStarOff size={iconSize} /> : <TbStar size={iconSize} />}
-                </Group>
+                    {props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
-            </Item>
+                </Group>
-            <Item onClick={() => dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))}>
+            </Item>
-                <Group>
+            {props.entry.markable && (
-                    {props.entry.read ? <TbEyeOff size={iconSize} /> : <TbEyeCheck size={iconSize} />}
+                <Item onClick={async () => await dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))}>
-                    {props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
+                    <Group>
-                </Group>
+                        {props.entry.read ? <TbEyeOff size={iconSize} /> : <TbEyeCheck size={iconSize} />}
-            </Item>
+                        {props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
-            <Item onClick={() => dispatch(markEntriesUpToEntry(props.entry))}>
+                    </Group>
-                <Group>
+                </Item>
-                    <TbArrowBarToDown size={iconSize} />
+            )}
-                    <Trans>Mark as read up to here</Trans>
+            <Item onClick={async () => await dispatch(markEntriesUpToEntry(props.entry))}>
-                </Group>
+                <Group>
-            </Item>
+                    <TbArrowBarToDown size={iconSize} />
-
+                    <Trans>Mark as read up to here</Trans>
-            {sourceType === "category" && (
+                </Group>
-                <>
+            </Item>
-                    <Separator />
+
-
+            {sourceType === "category" && (
-                    <Item
+                <>
-                        onClick={() => {
+                    <Separator />
-                            dispatch(redirectToFeed(props.entry.feedId))
+
-                        }}
+                    <Item
-                    >
+                        onClick={() => {
-                        <Group>
+                            dispatch(redirectToFeed(props.entry.feedId))
-                            <TbRss size={iconSize} />
+                        }}
-                            <Trans>Go to {truncate(props.entry.feedName, 30)}</Trans>
+                    >
-                        </Group>
+                        <Group>
-                    </Item>
+                            <TbRss size={iconSize} />
-                </>
+                            <Trans>Go to {truncate(props.entry.feedName, 30)}</Trans>
-            )}
+                        </Group>
-        </Menu>
+                    </Item>
-    )
+                </>
-}
+            )}
+        </Menu>
+    )
+}

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

@@ -1,95 +1,102 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans, t } from "@lingui/macro"
-import { Group, Indicator, MultiSelect, Popover } from "@mantine/core"
+import { Group, Indicator, Popover, TagsInput } from "@mantine/core"
-import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/slices/entries"
+import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/entries/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
+import { useAppDispatch, useAppSelector } from "app/store"
-import { Entry } from "app/types"
+import type { Entry } from "app/types"
-import { ActionButton } from "components/ActionButton"
+import { ActionButton } from "components/ActionButton"
-import { useActionButton } from "hooks/useActionButton"
+import { useActionButton } from "hooks/useActionButton"
-import { useMobile } from "hooks/useMobile"
+import { useMobile } from "hooks/useMobile"
-import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
+import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
-import { ShareButtons } from "./ShareButtons"
+import { ShareButtons } from "./ShareButtons"
-
+
-interface FeedEntryFooterProps {
+interface FeedEntryFooterProps {
-    entry: Entry
+    entry: Entry
-}
+}
-
+
-export function FeedEntryFooter(props: FeedEntryFooterProps) {
+export function FeedEntryFooter(props: FeedEntryFooterProps) {
-    const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
+    const tags = useAppSelector(state => state.user.tags)
-    const tags = useAppSelector(state => state.user.tags)
+    const mobile = useMobile()
-    const mobile = useMobile()
+    const { spacing } = useActionButton()
-    const { spacing } = useActionButton()
+    const dispatch = useAppDispatch()
-    const dispatch = useAppDispatch()
+
-
+    const readStatusButtonClicked = async () =>
-    const showSharingButtons = sharingSettings && Object.values(sharingSettings).some(v => v)
+        await dispatch(
-
+            markEntry({
-    const readStatusButtonClicked = () => dispatch(markEntry({ entry: props.entry, read: !props.entry.read }))
+                entry: props.entry,
-    const onTagsChange = (values: string[]) =>
+                read: !props.entry.read,
-        dispatch(
+            })
-            tagEntry({
+        )
-                entryId: +props.entry.id,
+    const onTagsChange = async (values: string[]) =>
-                tags: values,
+        await dispatch(
-            })
+            tagEntry({
-        )
+                entryId: +props.entry.id,
-
+                tags: values,
-    return (
+            })
-        <Group position="apart">
+        )
-            <Group spacing={spacing}>
+
-                {props.entry.markable && (
+    return (
-                    <ActionButton
+        <Group justify="space-between">
-                        icon={props.entry.read ? <TbEyeOff size={18} /> : <TbEyeCheck size={18} />}
+            <Group gap={spacing}>
-                        label={props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
+                {props.entry.markable && (
-                        onClick={readStatusButtonClicked}
+                    <ActionButton
-                    />
+                        icon={props.entry.read ? <TbEyeOff size={18} /> : <TbEyeCheck size={18} />}
-                )}
+                        label={props.entry.read ? <Trans>Keep unread</Trans> : <Trans>Mark as read</Trans>}
-                <ActionButton
+                        onClick={readStatusButtonClicked}
-                    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 }))}
+                <ActionButton
-                />
+                    icon={props.entry.starred ? <TbStarOff size={18} /> : <TbStar size={18} />}
-
+                    label={props.entry.starred ? <Trans>Unstar</Trans> : <Trans>Star</Trans>}
-                {showSharingButtons && (
+                    onClick={async () =>
-                    <Popover withArrow withinPortal shadow="md" closeOnClickOutside={!mobile}>
+                        await dispatch(
-                        <Popover.Target>
+                            starEntry({
-                            <ActionButton icon={<TbShare size={18} />} label={<Trans>Share</Trans>} />
+                                entry: props.entry,
-                        </Popover.Target>
+                                starred: !props.entry.starred,
-                        <Popover.Dropdown>
+                            })
-                            <ShareButtons url={props.entry.url} description={props.entry.title} />
+                        )
-                        </Popover.Dropdown>
+                    }
-                    </Popover>
+                />
-                )}
+
-
+                <Popover withArrow withinPortal shadow="md" closeOnClickOutside={!mobile}>
-                {tags && (
+                    <Popover.Target>
-                    <Popover withArrow withinPortal shadow="md" closeOnClickOutside={!mobile}>
+                        <ActionButton icon={<TbShare size={18} />} label={<Trans>Share</Trans>} />
-                        <Popover.Target>
+                    </Popover.Target>
-                            <Indicator label={props.entry.tags.length} disabled={props.entry.tags.length === 0} inline size={16}>
+                    <Popover.Dropdown>
-                                <ActionButton icon={<TbTag size={18} />} label={<Trans>Tags</Trans>} />
+                        <ShareButtons url={props.entry.url} description={props.entry.title} />
-                            </Indicator>
+                    </Popover.Dropdown>
-                        </Popover.Target>
+                </Popover>
-                        <Popover.Dropdown>
+
-                            <MultiSelect
+                {tags && (
-                                data={tags}
+                    <Popover withArrow shadow="md" closeOnClickOutside={!mobile}>
-                                placeholder="Tags"
+                        <Popover.Target>
-                                searchable
+                            <Indicator label={props.entry.tags.length} disabled={props.entry.tags.length === 0} inline size={16}>
-                                creatable
+                                <ActionButton icon={<TbTag size={18} />} label={<Trans>Tags</Trans>} />
-                                autoFocus
+                            </Indicator>
-                                getCreateLabel={query => t`Create tag: ${query}`}
+                        </Popover.Target>
-                                value={props.entry.tags}
+                        <Popover.Dropdown>
-                                onChange={onTagsChange}
+                            <TagsInput
-                            />
+                                placeholder={t`Tags`}
-                        </Popover.Dropdown>
+                                data={tags}
-                    </Popover>
+                                value={props.entry.tags}
-                )}
+                                onChange={onTagsChange}
-
+                                comboboxProps={{
-                <a href={props.entry.url} target="_blank" rel="noreferrer">
+                                    withinPortal: false,
-                    <ActionButton icon={<TbExternalLink size={18} />} label={<Trans>Open link</Trans>} />
+                                }}
-                </a>
+                            />
-            </Group>
+                        </Popover.Dropdown>
-
+                    </Popover>
-            <ActionButton
+                )}
-                icon={<TbArrowBarToDown size={18} />}
+
-                label={<Trans>Mark as read up to here</Trans>}
+                <a href={props.entry.url} target="_blank" rel="noreferrer">
-                onClick={() => dispatch(markEntriesUpToEntry(props.entry))}
+                    <ActionButton icon={<TbExternalLink size={18} />} label={<Trans>Open link</Trans>} />
-            />
+                </a>
-        </Group>
+            </Group>
-    )
+
-}
+            <ActionButton
+                icon={<TbArrowBarToDown size={18} />}
+                label={<Trans>Mark as read up to here</Trans>}
+                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

@@ -1,22 +1,21 @@
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
+import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
-
+
-export interface FeedFaviconProps {
+export interface FeedFaviconProps {
-    url: string
+    url: string
-    size?: number
+    size?: number
-}
+}
-
+
-export function FeedFavicon({ url, size = 18 }: FeedFaviconProps) {
+export function FeedFavicon({ url, size = 18 }: FeedFaviconProps) {
-    return (
+    return (
-        <ImageWithPlaceholderWhileLoading
+        <ImageWithPlaceholderWhileLoading
-            src={url}
+            src={url}
-            alt="feed favicon"
+            alt="feed favicon"
-            width={size}
+            width={size}
-            height={size}
+            height={size}
-            placeholderWidth={size}
+            placeholderWidth={size}
-            placeholderHeight={size}
+            placeholderHeight={size}
-            placeholderBackgroundColor="inherit"
+            placeholderBackgroundColor="inherit"
-            placeholderIconSize={size}
+            placeholderIconSize={size}
-            placeholderIconColor="inherit"
+        />
-        />
+    )
-    )
+}
-}

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

@@ -1,39 +1,40 @@
-import { Box, TypographyStylesProvider } from "@mantine/core"
+import { Box } from "@mantine/core"
-import { Constants } from "app/constants"
+import { Constants } from "app/constants"
-import { calculatePlaceholderSize } from "app/utils"
+import { calculatePlaceholderSize } from "app/utils"
-import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
+import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
-import { Content } from "./Content"
+import { BasicHtmlStyles } from "components/content/BasicHtmlStyles"
-
+import { Content } from "./Content"
-export interface MediaProps {
+
-    thumbnailUrl: string
+export interface MediaProps {
-    thumbnailWidth?: number
+    thumbnailUrl: string
-    thumbnailHeight?: number
+    thumbnailWidth?: number
-    description?: string
+    thumbnailHeight?: number
-}
+    description?: string
-
+}
-export function Media(props: MediaProps) {
+
-    const width = props.thumbnailWidth
+export function Media(props: MediaProps) {
-    const height = props.thumbnailHeight
+    const width = props.thumbnailWidth
-    const placeholderSize = calculatePlaceholderSize({
+    const height = props.thumbnailHeight
-        width,
+    const placeholderSize = calculatePlaceholderSize({
-        height,
+        width,
-        maxWidth: Constants.layout.entryMaxWidth,
+        height,
-    })
+        maxWidth: Constants.layout.entryMaxWidth,
-    return (
+    })
-        <TypographyStylesProvider>
+    return (
-            <ImageWithPlaceholderWhileLoading
+        <BasicHtmlStyles>
-                src={props.thumbnailUrl}
+            <ImageWithPlaceholderWhileLoading
-                alt="media thumbnail"
+                src={props.thumbnailUrl}
-                width={props.thumbnailWidth}
+                alt="media thumbnail"
-                height={props.thumbnailHeight}
+                width={props.thumbnailWidth}
-                placeholderWidth={placeholderSize.width}
+                height={props.thumbnailHeight}
-                placeholderHeight={placeholderSize.height}
+                placeholderWidth={placeholderSize.width}
-            />
+                placeholderHeight={placeholderSize.height}
-            {props.description && (
+            />
-                <Box pt="md">
+            {props.description && (
-                    <Content content={props.description} />
+                <Box pt="md">
-                </Box>
+                    <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 { Constants } from "app/constants"
+import { ActionIcon, Box, CopyButton, Divider, SimpleGrid } from "@mantine/core"
-import { useAppSelector } from "app/store"
+import { Constants } from "app/constants"
-import { SharingSettings } from "app/types"
+import { useAppSelector } from "app/store"
-import { IconType } from "react-icons"
+import type { SharingSettings } from "app/types"
-
+import { useBrowserExtension } from "hooks/useBrowserExtension"
-type Color = `#${string}`
+import { useMobile } from "hooks/useMobile"
-
+import type { IconType } from "react-icons"
-const useStyles = createStyles((theme, props: { color: Color }) => ({
+import { TbCheck, TbCopy, TbDeviceDesktopShare, TbDeviceMobileShare } from "react-icons/tb"
-    socialIcon: {
+import { tss } from "tss"
-        color: props.color,
+
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[2] : "white",
+type Color = `#${string}`
-        borderRadius: "50%",
+
-    },
+const useStyles = tss
-}))
+    .withParams<{
-
+        color: Color
-function ShareButton({ url, icon, color }: { url: string; icon: IconType; color: Color }) {
+    }>()
-    const { classes } = useStyles({ color })
+    .create(({ theme, colorScheme, color }) => ({
-
+        icon: {
-    const onClick = (e: React.MouseEvent) => {
+            color,
-        e.preventDefault()
+            backgroundColor: colorScheme === "dark" ? theme.colors.gray[2] : "white",
-        window.open(url, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=800,height=600")
+        },
-    }
+    }))
-
+
-    return (
+function ShareButton({ icon, color, onClick }: { icon: IconType; color: Color; onClick: () => void }) {
-        <ActionIcon>
+    const { classes } = useStyles({
-            <a href={url} target="_blank" rel="noreferrer" onClick={onClick}>
+        color,
-                <Box p={6} className={classes.socialIcon}>
+    })
-                    {icon({ size: 18 })}
+
-                </Box>
+    return (
-            </a>
+        <ActionIcon variant="transparent" radius="xl" size={32}>
-        </ActionIcon>
+            <Box p={6} className={classes.icon} onClick={onClick}>
-    )
+                {icon({ size: 18 })}
-}
+            </Box>
-
+        </ActionIcon>
-export function ShareButtons(props: { url: string; description: string }) {
+    )
-    const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
+}
-    const url = encodeURIComponent(props.url)
+
-    const desc = encodeURIComponent(props.description)
+function SiteShareButton({ url, icon, color }: { icon: IconType; color: Color; url: string }) {
-
+    const onClick = () => {
-    return (
+        window.open(url, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=800,height=600")
-        <SimpleGrid cols={4}>
+    }
-            {(Object.keys(Constants.sharing) as Array<keyof SharingSettings>)
+
-                .filter(site => sharingSettings && sharingSettings[site])
+    return <ShareButton icon={icon} color={color} onClick={onClick} />
-                .map(site => (
+}
-                    <ShareButton
+
-                        key={site}
+function CopyUrlButton({ url }: { url: string }) {
-                        icon={Constants.sharing[site].icon}
+    return (
-                        color={Constants.sharing[site].color}
+        <CopyButton value={url}>
-                        url={Constants.sharing[site].url(url, desc)}
+            {({ copied, copy }) => <ShareButton icon={copied ? TbCheck : TbCopy} color="#000" onClick={copy} />}
-                    />
+        </CopyButton>
-                ))}
+    )
-        </SimpleGrid>
+}
-    )
+
-}
+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 (
+        <>
+            {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

@@ -1,50 +1,50 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans, t } from "@lingui/macro"
-import { Box, Button, Group, Stack, TextInput } from "@mantine/core"
+import { Box, Button, Group, Stack, TextInput } from "@mantine/core"
-import { useForm } from "@mantine/form"
+import { useForm } from "@mantine/form"
-import { client, errorToStrings } from "app/client"
+import { client, errorToStrings } from "app/client"
-import { redirectToSelectedSource } from "app/slices/redirect"
+import { redirectToSelectedSource } from "app/redirect/thunks"
-import { reloadTree } from "app/slices/tree"
+import { useAppDispatch } from "app/store"
-import { useAppDispatch } from "app/store"
+import { reloadTree } from "app/tree/thunks"
-import { AddCategoryRequest } from "app/types"
+import type { AddCategoryRequest } from "app/types"
-import { Alert } from "components/Alert"
+import { Alert } from "components/Alert"
-import { useAsyncCallback } from "react-async-hook"
+import { useAsyncCallback } from "react-async-hook"
-import { TbFolderPlus } from "react-icons/tb"
+import { TbFolderPlus } from "react-icons/tb"
-import { CategorySelect } from "./CategorySelect"
+import { CategorySelect } from "./CategorySelect"
-
+
-export function AddCategory() {
+export function AddCategory() {
-    const dispatch = useAppDispatch()
+    const dispatch = useAppDispatch()
-
+
-    const form = useForm<AddCategoryRequest>()
+    const form = useForm<AddCategoryRequest>()
-
+
-    const addCategory = useAsyncCallback(client.category.add, {
+    const addCategory = useAsyncCallback(client.category.add, {
-        onSuccess: () => {
+        onSuccess: () => {
-            dispatch(reloadTree())
+            dispatch(reloadTree())
-            dispatch(redirectToSelectedSource())
+            dispatch(redirectToSelectedSource())
-        },
+        },
-    })
+    })
-
+
-    return (
+    return (
-        <>
+        <>
-            {addCategory.error && (
+            {addCategory.error && (
-                <Box mb="md">
+                <Box mb="md">
-                    <Alert messages={errorToStrings(addCategory.error)} />
+                    <Alert messages={errorToStrings(addCategory.error)} />
-                </Box>
+                </Box>
-            )}
+            )}
-
+
-            <form onSubmit={form.onSubmit(addCategory.execute)}>
+            <form onSubmit={form.onSubmit(addCategory.execute)}>
-                <Stack>
+                <Stack>
-                    <TextInput label={<Trans>Category</Trans>} placeholder={t`Category`} {...form.getInputProps("name")} required />
+                    <TextInput label={<Trans>Category</Trans>} placeholder={t`Category`} {...form.getInputProps("name")} required />
-                    <CategorySelect label={<Trans>Parent</Trans>} {...form.getInputProps("parentId")} clearable />
+                    <CategorySelect label={<Trans>Parent</Trans>} {...form.getInputProps("parentId")} clearable />
-                    <Group position="center">
+                    <Group justify="center">
-                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
+                        <Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
-                            <Trans>Cancel</Trans>
+                            <Trans>Cancel</Trans>
-                        </Button>
+                        </Button>
-                        <Button type="submit" leftIcon={<TbFolderPlus size={16} />} loading={addCategory.loading}>
+                        <Button type="submit" leftSection={<TbFolderPlus size={16} />} loading={addCategory.loading}>
-                            <Trans>Add</Trans>
+                            <Trans>Add</Trans>
-                        </Button>
+                        </Button>
-                    </Group>
+                    </Group>
-                </Stack>
+                </Stack>
-            </form>
+            </form>
-        </>
+        </>
-    )
+    )
-}
+}

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

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

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

@@ -1,63 +1,64 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans, t } from "@lingui/macro"
-import { Box, Button, FileInput, Group, Stack } from "@mantine/core"
+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 { client, errorToStrings } from "app/client"
-import { redirectToSelectedSource } from "app/slices/redirect"
+import { redirectToSelectedSource } from "app/redirect/thunks"
-import { reloadTree } from "app/slices/tree"
+import { useAppDispatch } from "app/store"
-import { useAppDispatch } from "app/store"
+import { reloadTree } from "app/tree/thunks"
-import { Alert } from "components/Alert"
+import { Alert } from "components/Alert"
-import { useAsyncCallback } from "react-async-hook"
+import { useAsyncCallback } from "react-async-hook"
-import { TbFileImport } from "react-icons/tb"
+import { TbFileImport } from "react-icons/tb"
-
+
-export function ImportOpml() {
+export function ImportOpml() {
-    const dispatch = useAppDispatch()
+    const dispatch = useAppDispatch()
-
+
-    const form = useForm<{ file: File }>({
+    const form = useForm<{ file: File }>({
-        validate: {
+        validate: {
-            file: v => (v ? null : t`file is required`),
+            file: isNotEmpty(t`OPML file is required`),
-        },
+        },
-    })
+    })
-
+
-    const importOpml = useAsyncCallback(client.feed.importOpml, {
+    const importOpml = useAsyncCallback(client.feed.importOpml, {
-        onSuccess: () => {
+        onSuccess: () => {
-            dispatch(reloadTree())
+            dispatch(reloadTree())
-            dispatch(redirectToSelectedSource())
+            dispatch(redirectToSelectedSource())
-        },
+        },
-    })
+    })
-
+
-    return (
+    return (
-        <>
+        <>
-            {importOpml.error && (
+            {importOpml.error && (
-                <Box mb="md">
+                <Box mb="md">
-                    <Alert messages={errorToStrings(importOpml.error)} />
+                    <Alert messages={errorToStrings(importOpml.error)} />
-                </Box>
+                </Box>
-            )}
+            )}
-
+
-            <form onSubmit={form.onSubmit(v => importOpml.execute(v.file))}>
+            <form onSubmit={form.onSubmit(async v => await importOpml.execute(v.file))}>
-                <Stack>
+                <Stack>
-                    <FileInput
+                    <FileInput
-                        label={<Trans>OPML file</Trans>}
+                        label={<Trans>OPML file</Trans>}
-                        placeholder={t`OPML file`}
+                        leftSection={<TbFileImport />}
-                        description={
+                        placeholder={t`OPML file`}
-                            <Trans>
+                        description={
-                                An opml file is an XML file containing feed URLs and categories. You can get an OPML file by exporting your
+                            <Trans>
-                                data from other feed reading services.
+                                An opml file is an XML file containing feed URLs and categories. You can get an OPML file by exporting your
-                            </Trans>
+                                data from other feed reading services.
-                        }
+                            </Trans>
-                        {...form.getInputProps("file")}
+                        }
-                        required
+                        {...form.getInputProps("file")}
-                        accept="application/xml"
+                        required
-                    />
+                        accept=".xml,.opml"
-                    <Group position="center">
+                    />
-                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
+                    <Group justify="center">
-                            <Trans>Cancel</Trans>
+                        <Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
-                        </Button>
+                            <Trans>Cancel</Trans>
-                        <Button type="submit" leftIcon={<TbFileImport size={16} />} loading={importOpml.loading}>
+                        </Button>
-                            <Trans>Import</Trans>
+                        <Button type="submit" leftSection={<TbFileImport size={16} />} loading={importOpml.loading}>
-                        </Button>
+                            <Trans>Import</Trans>
-                    </Group>
+                        </Button>
-                </Stack>
+                    </Group>
-            </form>
+                </Stack>
-        </>
+            </form>
-    )
+        </>
-}
+    )
+}

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

@@ -1,126 +1,129 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
-import { Box, Button, Group, Stack, Stepper, TextInput } from "@mantine/core"
+import { Box, Button, Group, Stack, Stepper, TextInput } from "@mantine/core"
-import { useForm } from "@mantine/form"
+import { useForm } from "@mantine/form"
-import { client, errorToStrings } from "app/client"
+import { client, errorToStrings } from "app/client"
-import { Constants } from "app/constants"
+import { Constants } from "app/constants"
-import { redirectToFeed, redirectToSelectedSource } from "app/slices/redirect"
+import { redirectToFeed, redirectToSelectedSource } from "app/redirect/thunks"
-import { reloadTree } from "app/slices/tree"
+import { useAppDispatch } from "app/store"
-import { useAppDispatch } from "app/store"
+import { reloadTree } from "app/tree/thunks"
-import { FeedInfoRequest, SubscribeRequest } from "app/types"
+import type { FeedInfoRequest, SubscribeRequest } from "app/types"
-import { Alert } from "components/Alert"
+import { Alert } from "components/Alert"
-import { useState } from "react"
+import { useState } from "react"
-import { useAsyncCallback } from "react-async-hook"
+import { useAsyncCallback } from "react-async-hook"
-import { TbRss } from "react-icons/tb"
+import { TbRss } from "react-icons/tb"
-import { CategorySelect } from "./CategorySelect"
+import { CategorySelect } from "./CategorySelect"
-
+
-export function Subscribe() {
+export function Subscribe() {
-    const [activeStep, setActiveStep] = useState(0)
+    const [activeStep, setActiveStep] = useState(0)
-    const dispatch = useAppDispatch()
+    const dispatch = useAppDispatch()
-
+
-    const step0Form = useForm<FeedInfoRequest>({
+    const step0Form = useForm<FeedInfoRequest>({
-        initialValues: {
+        initialValues: {
-            url: "",
+            url: "",
-        },
+        },
-    })
+    })
-
+
-    const step1Form = useForm<SubscribeRequest>({
+    const step1Form = useForm<SubscribeRequest>({
-        initialValues: {
+        initialValues: {
-            url: "",
+            url: "",
-            title: "",
+            title: "",
-            categoryId: Constants.categories.all.id,
+            categoryId: Constants.categories.all.id,
-        },
+        },
-    })
+    })
-
+
-    const fetchFeed = useAsyncCallback(client.feed.fetchFeed, {
+    const fetchFeed = useAsyncCallback(client.feed.fetchFeed, {
-        onSuccess: ({ data }) => {
+        onSuccess: ({ data }) => {
-            step1Form.setFieldValue("url", data.url)
+            step1Form.setFieldValue("url", data.url)
-            step1Form.setFieldValue("title", data.title)
+            step1Form.setFieldValue("title", data.title)
-            setActiveStep(step => step + 1)
+            setActiveStep(step => step + 1)
-        },
+        },
-    })
+    })
-    const subscribe = useAsyncCallback(client.feed.subscribe, {
+    const subscribe = useAsyncCallback(client.feed.subscribe, {
-        onSuccess: sub => {
+        onSuccess: sub => {
-            dispatch(reloadTree())
+            dispatch(reloadTree())
-            dispatch(redirectToFeed(sub.data))
+            dispatch(redirectToFeed(sub.data))
-        },
+        },
-    })
+    })
-
+
-    const previousStep = () => {
+    const previousStep = () => {
-        if (activeStep === 0) dispatch(redirectToSelectedSource())
+        if (activeStep === 0) {
-        else setActiveStep(activeStep - 1)
+            dispatch(redirectToSelectedSource())
-    }
+        } else {
-    const nextStep = (e: React.FormEvent<HTMLFormElement>) => {
+            setActiveStep(activeStep - 1)
-        if (activeStep === 0) {
+        }
-            step0Form.onSubmit(fetchFeed.execute)(e)
+    }
-        } else if (activeStep === 1) {
+    const nextStep = (e: React.FormEvent<HTMLFormElement>) => {
-            step1Form.onSubmit(subscribe.execute)(e)
+        if (activeStep === 0) {
-        }
+            step0Form.onSubmit(fetchFeed.execute)(e)
-    }
+        } else if (activeStep === 1) {
-
+            step1Form.onSubmit(subscribe.execute)(e)
-    return (
+        }
-        <>
+    }
-            {fetchFeed.error && (
+
-                <Box mb="md">
+    return (
-                    <Alert messages={errorToStrings(fetchFeed.error)} />
+        <>
-                </Box>
+            {fetchFeed.error && (
-            )}
+                <Box mb="md">
-
+                    <Alert messages={errorToStrings(fetchFeed.error)} />
-            {subscribe.error && (
+                </Box>
-                <Box mb="md">
+            )}
-                    <Alert messages={errorToStrings(subscribe.error)} />
+
-                </Box>
+            {subscribe.error && (
-            )}
+                <Box mb="md">
-
+                    <Alert messages={errorToStrings(subscribe.error)} />
-            <form onSubmit={nextStep}>
+                </Box>
-                <Stepper active={activeStep} onStepClick={setActiveStep}>
+            )}
-                    <Stepper.Step
+
-                        label={<Trans>Analyze feed</Trans>}
+            <form onSubmit={nextStep}>
-                        description={<Trans>Check that the feed is working</Trans>}
+                <Stepper active={activeStep} onStepClick={setActiveStep}>
-                        allowStepSelect={activeStep === 1}
+                    <Stepper.Step
-                    >
+                        label={<Trans>Analyze feed</Trans>}
-                        <TextInput
+                        description={<Trans>Check that the feed is working</Trans>}
-                            label={<Trans>Feed URL</Trans>}
+                        allowStepSelect={activeStep === 1}
-                            placeholder="http://www.mysite.com/rss"
+                    >
-                            description={
+                        <TextInput
-                                <Trans>
+                            label={<Trans>Feed URL</Trans>}
-                                    The URL for the feed you want to subscribe to. You can also use the website's url directly and CommaFeed
+                            placeholder="https://www.mysite.com/rss"
-                                    will try to find the feed in the page.
+                            description={
-                                </Trans>
+                                <Trans>
-                            }
+                                    The URL for the feed you want to subscribe to. You can also use the website's url directly and CommaFeed
-                            required
+                                    will try to find the feed in the page.
-                            autoFocus
+                                </Trans>
-                            {...step0Form.getInputProps("url")}
+                            }
-                        />
+                            required
-                    </Stepper.Step>
+                            autoFocus
-                    <Stepper.Step
+                            {...step0Form.getInputProps("url")}
-                        label={<Trans>Subscribe</Trans>}
+                        />
-                        description={<Trans>Subscribe to the feed</Trans>}
+                    </Stepper.Step>
-                        allowStepSelect={false}
+                    <Stepper.Step
-                    >
+                        label={<Trans>Subscribe</Trans>}
-                        <Stack>
+                        description={<Trans>Subscribe to the feed</Trans>}
-                            <TextInput label={<Trans>Feed URL</Trans>} {...step1Form.getInputProps("url")} disabled />
+                        allowStepSelect={false}
-                            <TextInput label={<Trans>Feed name</Trans>} {...step1Form.getInputProps("title")} required autoFocus />
+                    >
-                            <CategorySelect label={<Trans>Category</Trans>} {...step1Form.getInputProps("categoryId")} clearable />
+                        <Stack>
-                        </Stack>
+                            <TextInput label={<Trans>Feed URL</Trans>} {...step1Form.getInputProps("url")} disabled />
-                    </Stepper.Step>
+                            <TextInput label={<Trans>Feed name</Trans>} {...step1Form.getInputProps("title")} required autoFocus />
-                </Stepper>
+                            <CategorySelect label={<Trans>Category</Trans>} {...step1Form.getInputProps("categoryId")} clearable />
-
+                        </Stack>
-                <Group position="center" mt="xl">
+                    </Stepper.Step>
-                    <Button variant="default" onClick={previousStep}>
+                </Stepper>
-                        <Trans>Back</Trans>
+
-                    </Button>
+                <Group justify="center" mt="xl">
-                    {activeStep === 0 && (
+                    <Button variant="default" onClick={previousStep}>
-                        <Button type="submit" loading={fetchFeed.loading}>
+                        <Trans>Back</Trans>
-                            <Trans>Next</Trans>
+                    </Button>
-                        </Button>
+                    {activeStep === 0 && (
-                    )}
+                        <Button type="submit" loading={fetchFeed.loading}>
-                    {activeStep === 1 && (
+                            <Trans>Next</Trans>
-                        <Button type="submit" leftIcon={<TbRss size={16} />} loading={fetchFeed.loading || subscribe.loading}>
+                        </Button>
-                            <Trans>Subscribe</Trans>
+                    )}
-                        </Button>
+                    {activeStep === 1 && (
-                    )}
+                        <Button type="submit" leftSection={<TbRss size={16} />} loading={fetchFeed.loading || subscribe.loading}>
-                </Group>
+                            <Trans>Subscribe</Trans>
-            </form>
+                        </Button>
-        </>
+                    )}
-    )
+                </Group>
-}
+            </form>
+        </>
+    )
+}

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 { RelativeDate } from "components/RelativeDate"
+import { FeedFavicon } from "components/content/FeedFavicon"
+import { OpenExternalLink } from "components/content/header/OpenExternalLink"
+import { Star } from "components/content/header/Star"
+import { OnDesktop } from "components/responsive/OnDesktop"
+import { tss } from "tss"
+import { 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 { RelativeDate } from "components/RelativeDate"
+import { FeedFavicon } from "components/content/FeedFavicon"
+import { OpenExternalLink } from "components/content/header/OpenExternalLink"
+import { Star } from "components/content/header/Star"
+import { tss } from "tss"
+import { 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,21 +1,22 @@
-import { Highlight } from "@mantine/core"
+import { Highlight } from "@mantine/core"
-import { useAppSelector } from "app/store"
+import { useAppSelector } from "app/store"
-import { Entry } from "app/types"
+import type { Entry } from "app/types"
-
+
-export interface FeedEntryTitleProps {
+export interface FeedEntryTitleProps {
-    entry: Entry
+    entry: Entry
-}
+}
-
+
-export function FeedEntryTitle(props: FeedEntryTitleProps) {
+export function FeedEntryTitle(props: FeedEntryTitleProps) {
-    const search = useAppSelector(state => state.entries.search)
+    const search = useAppSelector(state => state.entries.search)
-    const keywords = search?.split(" ")
+    const keywords = search?.split(" ")
-    return (
+    return (
-        <Highlight
+        <Highlight
-            highlight={keywords ?? ""}
+            inherit
-            // make sure ellipsis is shown when title is too long
+            highlight={keywords ?? ""}
-            span
+            // make sure ellipsis is shown when title is too long
-        >
+            span
-            {props.entry.title}
+        >
-        </Highlight>
+            {props.entry.title}
-    )
+        </Highlight>
-}
+    )
+}

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

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

@@ -1,95 +1,97 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
-
+
-import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
+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 { useAppDispatch, useAppSelector } from "app/store"
-import { ActionButton } from "components/ActionButton"
+import { ActionButton } from "components/ActionButton"
-import { useState } from "react"
+import { useState } from "react"
-import { TbChecks } from "react-icons/tb"
+import { TbChecks } from "react-icons/tb"
-
+
-export function MarkAllAsReadButton(props: { iconSize: number }) {
+export function MarkAllAsReadButton(props: { iconSize: number }) {
-    const [opened, setOpened] = useState(false)
+    const [opened, setOpened] = useState(false)
-    const [threshold, setThreshold] = useState(0)
+    const [threshold, setThreshold] = useState(0)
-    const source = useAppSelector(state => state.entries.source)
+    const source = useAppSelector(state => state.entries.source)
-    const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
+    const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
-    const entriesTimestamp = useAppSelector(state => state.entries.timestamp) ?? Date.now()
+    const entriesTimestamp = useAppSelector(state => state.entries.timestamp) ?? Date.now()
-    const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
+    const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
-    const dispatch = useAppDispatch()
+    const dispatch = useAppDispatch()
-
+
-    const buttonClicked = () => {
+    const buttonClicked = () => {
-        if (markAllAsReadConfirmation) {
+        if (markAllAsReadConfirmation) {
-            setThreshold(0)
+            setThreshold(0)
-            setOpened(true)
+            setOpened(true)
-        } else {
+        } else {
-            dispatch(
+            dispatch(
-                markAllEntries({
+                markAllEntries({
-                    sourceType: source.type,
+                    sourceType: source.type,
-                    req: {
+                    req: {
-                        id: source.id,
+                        id: source.id,
-                        read: true,
+                        read: true,
-                        olderThan: entriesTimestamp,
+                        olderThan: Date.now(),
-                    },
+                        insertedBefore: entriesTimestamp,
-                })
+                    },
-            )
+                })
-        }
+            )
-    }
+        }
-
+    }
-    return (
+
-        <>
+    return (
-            <Modal opened={opened} onClose={() => setOpened(false)} title={<Trans>Mark all entries as read</Trans>}>
+        <>
-                <Stack>
+            <Modal opened={opened} onClose={() => setOpened(false)} title={<Trans>Mark all entries as read</Trans>}>
-                    <Text size="sm">
+                <Stack>
-                        {threshold === 0 && (
+                    <Text size="sm">
-                            <Trans>
+                        {threshold === 0 && (
-                                Are you sure you want to mark all entries of <Code>{sourceLabel}</Code> as read?
+                            <Trans>
-                            </Trans>
+                                Are you sure you want to mark all entries of <Code>{sourceLabel}</Code> as read?
-                        )}
+                            </Trans>
-                        {threshold > 0 && (
+                        )}
-                            <Trans>
+                        {threshold > 0 && (
-                                Are you sure you want to mark entries older than {threshold} days of <Code>{sourceLabel}</Code> as read?
+                            <Trans>
-                            </Trans>
+                                Are you sure you want to mark entries older than {threshold} days of <Code>{sourceLabel}</Code> as read?
-                        )}
+                            </Trans>
-                    </Text>
+                        )}
-                    <Slider
+                    </Text>
-                        py="xl"
+                    <Slider
-                        min={0}
+                        py="xl"
-                        max={28}
+                        min={0}
-                        marks={[
+                        max={28}
-                            { value: 0, label: "0" },
+                        marks={[
-                            { value: 7, label: "7" },
+                            { value: 0, label: "0" },
-                            { value: 14, label: "14" },
+                            { value: 7, label: "7" },
-                            { value: 21, label: "21" },
+                            { value: 14, label: "14" },
-                            { value: 28, label: "28" },
+                            { value: 21, label: "21" },
-                        ]}
+                            { value: 28, label: "28" },
-                        value={threshold}
+                        ]}
-                        onChange={setThreshold}
+                        value={threshold}
-                    />
+                        onChange={setThreshold}
-                    <Group position="right">
+                    />
-                        <Button variant="default" onClick={() => setOpened(false)}>
+                    <Group justify="flex-end">
-                            <Trans>Cancel</Trans>
+                        <Button variant="default" onClick={() => setOpened(false)}>
-                        </Button>
+                            <Trans>Cancel</Trans>
-                        <Button
+                        </Button>
-                            color="red"
+                        <Button
-                            onClick={() => {
+                            color="red"
-                                setOpened(false)
+                            onClick={() => {
-                                dispatch(
+                                setOpened(false)
-                                    markAllEntries({
+                                dispatch(
-                                        sourceType: source.type,
+                                    markAllEntries({
-                                        req: {
+                                        sourceType: source.type,
-                                            id: source.id,
+                                        req: {
-                                            read: true,
+                                            id: source.id,
-                                            olderThan: entriesTimestamp - threshold * 24 * 60 * 60 * 1000,
+                                            read: true,
-                                        },
+                                            olderThan: Date.now() - threshold * 24 * 60 * 60 * 1000,
-                                    })
+                                            insertedBefore: entriesTimestamp,
-                                )
+                                        },
-                            }}
+                                    })
-                        >
+                                )
-                            <Trans>Confirm</Trans>
+                            }}
-                        </Button>
+                        >
-                    </Group>
+                            <Trans>Confirm</Trans>
-                </Stack>
+                        </Button>
-            </Modal>
+                    </Group>
-            <ActionButton icon={<TbChecks size={props.iconSize} />} label={<Trans>Mark all as read</Trans>} onClick={buttonClicked} />
+                </Stack>
-        </>
+            </Modal>
-    )
+            <ActionButton icon={<TbChecks size={props.iconSize} />} label={<Trans>Mark all as read</Trans>} onClick={buttonClicked} />
-}
+        </>
+    )
+}

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

@@ -1,203 +1,217 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
-import { Box, Divider, Group, Menu, SegmentedControl, SegmentedControlItem, useMantineColorScheme } from "@mantine/core"
+import {
-import { showNotification } from "@mantine/notifications"
+    Box,
-import { client } from "app/client"
+    Divider,
-import { redirectToAbout, redirectToAdminUsers, redirectToDonate, redirectToMetrics, redirectToSettings } from "app/slices/redirect"
+    Group,
-import { useAppDispatch, useAppSelector } from "app/store"
+    type MantineColorScheme,
-import { ViewMode } from "app/types"
+    Menu,
-import { useViewMode } from "hooks/useViewMode"
+    SegmentedControl,
-import { useState } from "react"
+    type SegmentedControlItem,
-import {
+    useMantineColorScheme,
-    TbChartLine,
+} from "@mantine/core"
-    TbHeartFilled,
+import { showNotification } from "@mantine/notifications"
-    TbHelp,
+import { client } from "app/client"
-    TbLayoutList,
+import { redirectToAbout, redirectToAdminUsers, redirectToDonate, redirectToMetrics, redirectToSettings } from "app/redirect/thunks"
-    TbList,
+import { useAppDispatch, useAppSelector } from "app/store"
-    TbListDetails,
+import type { ViewMode } from "app/types"
-    TbMoon,
+import { useViewMode } from "hooks/useViewMode"
-    TbNotes,
+import { type ReactNode, useState } from "react"
-    TbPower,
+import {
-    TbSettings,
+    TbChartLine,
-    TbSun,
+    TbHeartFilled,
-    TbUsers,
+    TbHelp,
-    TbWorldDownload,
+    TbLayoutList,
-} from "react-icons/tb"
+    TbList,
-
+    TbListDetails,
-interface ProfileMenuProps {
+    TbMoon,
-    control: React.ReactElement
+    TbNotes,
-}
+    TbPower,
-
+    TbSettings,
-interface ViewModeControlItem extends SegmentedControlItem {
+    TbSun,
-    value: ViewMode
+    TbSunMoon,
-}
+    TbUsers,
-
+    TbWorldDownload,
-const iconSize = 16
+} from "react-icons/tb"
-
+
-const viewModeData: ViewModeControlItem[] = [
+interface ProfileMenuProps {
-    {
+    control: React.ReactElement
-        value: "title",
+}
-        label: (
+
-            <Group>
+const ProfileMenuControlItem = ({ icon, label }: { icon: ReactNode; label: ReactNode }) => {
-                <TbList size={iconSize} />
+    return (
-                <Box ml={6}>
+        <Group>
-                    <Trans>Compact</Trans>
+            {icon}
-                </Box>
+            <Box ml={6}>{label}</Box>
-            </Group>
+        </Group>
-        ),
+    )
-    },
+}
-    {
+
-        value: "cozy",
+const iconSize = 16
-        label: (
+
-            <Group>
+interface ColorSchemeControlItem extends SegmentedControlItem {
-                <TbLayoutList size={iconSize} />
+    value: MantineColorScheme
-                <Box ml={6}>
+}
-                    <Trans>Cozy</Trans>
+
-                </Box>
+const colorSchemeData: ColorSchemeControlItem[] = [
-            </Group>
+    {
-        ),
+        value: "light",
-    },
+        label: <ProfileMenuControlItem icon={<TbSun size={iconSize} />} label={<Trans>Light</Trans>} />,
-    {
+    },
-        value: "detailed",
+    {
-        label: (
+        value: "dark",
-            <Group>
+        label: <ProfileMenuControlItem icon={<TbMoon size={iconSize} />} label={<Trans>Dark</Trans>} />,
-                <TbListDetails size={iconSize} />
+    },
-                <Box ml={6}>
+    {
-                    <Trans>Detailed</Trans>
+        value: "auto",
-                </Box>
+        label: <ProfileMenuControlItem icon={<TbSunMoon size={iconSize} />} label={<Trans>System</Trans>} />,
-            </Group>
+    },
-        ),
+]
-    },
+
-    {
+interface ViewModeControlItem extends SegmentedControlItem {
-        value: "expanded",
+    value: ViewMode
-        label: (
+}
-            <Group>
+
-                <TbNotes size={iconSize} />
+const viewModeData: ViewModeControlItem[] = [
-                <Box ml={6}>
+    {
-                    <Trans>Expanded</Trans>
+        value: "title",
-                </Box>
+        label: <ProfileMenuControlItem icon={<TbList size={iconSize} />} label={<Trans>Compact</Trans>} />,
-            </Group>
+    },
-        ),
+    {
-    },
+        value: "cozy",
-]
+        label: <ProfileMenuControlItem icon={<TbLayoutList size={iconSize} />} label={<Trans>Cozy</Trans>} />,
-
+    },
-export function ProfileMenu(props: ProfileMenuProps) {
+    {
-    const [opened, setOpened] = useState(false)
+        value: "detailed",
-    const { viewMode, setViewMode } = useViewMode()
+        label: <ProfileMenuControlItem icon={<TbListDetails size={iconSize} />} label={<Trans>Detailed</Trans>} />,
-    const profile = useAppSelector(state => state.user.profile)
+    },
-    const admin = useAppSelector(state => state.user.profile?.admin)
+    {
-    const dispatch = useAppDispatch()
+        value: "expanded",
-    const { colorScheme, toggleColorScheme } = useMantineColorScheme()
+        label: <ProfileMenuControlItem icon={<TbNotes size={iconSize} />} label={<Trans>Expanded</Trans>} />,
-    const dark = colorScheme === "dark"
+    },
-
+]
-    const logout = () => {
+
-        window.location.href = "logout"
+export function ProfileMenu(props: ProfileMenuProps) {
-    }
+    const [opened, setOpened] = useState(false)
-
+    const { viewMode, setViewMode } = useViewMode()
-    return (
+    const profile = useAppSelector(state => state.user.profile)
-        <Menu position="bottom-end" closeOnItemClick={false} opened={opened} onChange={setOpened}>
+    const admin = useAppSelector(state => state.user.profile?.admin)
-            <Menu.Target>{props.control}</Menu.Target>
+    const dispatch = useAppDispatch()
-            <Menu.Dropdown>
+    const { colorScheme, setColorScheme } = useMantineColorScheme()
-                {profile && <Menu.Label>{profile.name}</Menu.Label>}
+
-                <Menu.Item
+    const logout = () => {
-                    icon={<TbSettings size={iconSize} />}
+        window.location.href = "logout"
-                    onClick={() => {
+    }
-                        dispatch(redirectToSettings())
+
-                        setOpened(false)
+    return (
-                    }}
+        <Menu position="bottom-end" closeOnItemClick={false} opened={opened} onChange={setOpened}>
-                >
+            <Menu.Target>{props.control}</Menu.Target>
-                    <Trans>Settings</Trans>
+            <Menu.Dropdown>
-                </Menu.Item>
+                {profile && <Menu.Label>{profile.name}</Menu.Label>}
-                <Menu.Item
+                <Menu.Item
-                    icon={<TbWorldDownload size={iconSize} />}
+                    leftSection={<TbSettings size={iconSize} />}
-                    onClick={() =>
+                    onClick={() => {
-                        client.feed.refreshAll().then(() => {
+                        dispatch(redirectToSettings())
-                            showNotification({
+                        setOpened(false)
-                                message: <Trans>Your feeds have been queued for refresh.</Trans>,
+                    }}
-                                color: "green",
+                >
-                                autoClose: 1000,
+                    <Trans>Settings</Trans>
-                            })
+                </Menu.Item>
-                            setOpened(false)
+                <Menu.Item
-                        })
+                    leftSection={<TbWorldDownload size={iconSize} />}
-                    }
+                    onClick={async () =>
-                >
+                        await client.feed.refreshAll().then(() => {
-                    <Trans>Fetch all my feeds now</Trans>
+                            showNotification({
-                </Menu.Item>
+                                message: <Trans>Your feeds have been queued for refresh.</Trans>,
-
+                                color: "green",
-                <Divider />
+                                autoClose: 1000,
-
+                            })
-                <Menu.Label>
+                            setOpened(false)
-                    <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>}
+                    <Trans>Fetch all my feeds now</Trans>
-                </Menu.Item>
+                </Menu.Item>
-
+
-                <Divider />
+                <Divider />
-
+
-                <Menu.Label>
+                <Menu.Label>
-                    <Trans>Display</Trans>
+                    <Trans>Theme</Trans>
-                </Menu.Label>
+                </Menu.Label>
-                <SegmentedControl
+                <SegmentedControl
-                    fullWidth
+                    fullWidth
-                    orientation="vertical"
+                    orientation="vertical"
-                    data={viewModeData}
+                    data={colorSchemeData}
-                    value={viewMode}
+                    value={colorScheme}
-                    onChange={e => setViewMode(e as ViewMode)}
+                    onChange={e => setColorScheme(e as MantineColorScheme)}
-                    mb="xs"
+                    mb="xs"
-                />
+                />
-
+
-                {admin && (
+                <Divider />
-                    <>
+
-                        <Divider />
+                <Menu.Label>
-                        <Menu.Label>
+                    <Trans>Display</Trans>
-                            <Trans>Admin</Trans>
+                </Menu.Label>
-                        </Menu.Label>
+                <SegmentedControl
-                        <Menu.Item
+                    fullWidth
-                            icon={<TbUsers size={iconSize} />}
+                    orientation="vertical"
-                            onClick={() => {
+                    data={viewModeData}
-                                dispatch(redirectToAdminUsers())
+                    value={viewMode}
-                                setOpened(false)
+                    onChange={e => setViewMode(e as ViewMode)}
-                            }}
+                    mb="xs"
-                        >
+                />
-                            <Trans>Manage users</Trans>
+
-                        </Menu.Item>
+                {admin && (
-                        <Menu.Item
+                    <>
-                            icon={<TbChartLine size={iconSize} />}
+                        <Divider />
-                            onClick={() => {
+                        <Menu.Label>
-                                dispatch(redirectToMetrics())
+                            <Trans>Admin</Trans>
-                                setOpened(false)
+                        </Menu.Label>
-                            }}
+                        <Menu.Item
-                        >
+                            leftSection={<TbUsers size={iconSize} />}
-                            <Trans>Metrics</Trans>
+                            onClick={() => {
-                        </Menu.Item>
+                                dispatch(redirectToAdminUsers())
-                    </>
+                                setOpened(false)
-                )}
+                            }}
-
+                        >
-                <Divider />
+                            <Trans>Manage users</Trans>
-
+                        </Menu.Item>
-                <Menu.Item
+                        <Menu.Item
-                    icon={<TbHeartFilled size={iconSize} color="red" />}
+                            leftSection={<TbChartLine size={iconSize} />}
-                    onClick={() => {
+                            onClick={() => {
-                        dispatch(redirectToDonate())
+                                dispatch(redirectToMetrics())
-                        setOpened(false)
+                                setOpened(false)
-                    }}
+                            }}
-                >
+                        >
-                    <Trans>Donate</Trans>
+                            <Trans>Metrics</Trans>
-                </Menu.Item>
+                        </Menu.Item>
-
+                    </>
-                <Menu.Item
+                )}
-                    icon={<TbHelp size={iconSize} />}
+
-                    onClick={() => {
+                <Divider />
-                        dispatch(redirectToAbout())
+
-                        setOpened(false)
+                <Menu.Item
-                    }}
+                    leftSection={<TbHeartFilled size={iconSize} color="red" />}
-                >
+                    onClick={() => {
-                    <Trans>About</Trans>
+                        dispatch(redirectToDonate())
-                </Menu.Item>
+                        setOpened(false)
-                <Menu.Item icon={<TbPower size={iconSize} />} onClick={logout}>
+                    }}
-                    <Trans>Logout</Trans>
+                >
-                </Menu.Item>
+                    <Trans>Donate</Trans>
-            </Menu.Dropdown>
+                </Menu.Item>
-        </Menu>
+
-    )
+                <Menu.Item
-}
+                    leftSection={<TbHelp size={iconSize} />}
+                    onClick={() => {
+                        dispatch(redirectToAbout())
+                        setOpened(false)
+                    }}
+                >
+                    <Trans>About</Trans>
+                </Menu.Item>
+                <Menu.Item leftSection={<TbPower size={iconSize} />} onClick={logout}>
+                    <Trans>Logout</Trans>
+                </Menu.Item>
+            </Menu.Dropdown>
+        </Menu>
+    )
+}

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

@@ -1,9 +1,9 @@
-import { MetricGauge } from "app/types"
+import type { MetricGauge } from "app/types"
-
+
-interface MeterProps {
+interface MeterProps {
-    gauge: MetricGauge
+    gauge: MetricGauge
-}
+}
-
+
-export function Gauge(props: MeterProps) {
+export function Gauge(props: MeterProps) {
-    return <span>{props.gauge.value}</span>
+    return <span>{props.gauge.value}</span>
-}
+}

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

@@ -1,19 +1,19 @@
-import { Box } from "@mantine/core"
+import { Box } from "@mantine/core"
-import { MetricMeter } from "app/types"
+import type { MetricMeter } from "app/types"
-
+
-interface MeterProps {
+interface MeterProps {
-    meter: MetricMeter
+    meter: MetricMeter
-}
+}
-
+
-export function Meter(props: MeterProps) {
+export function Meter(props: MeterProps) {
-    return (
+    return (
-        <Box>
+        <Box>
-            <Box>Mean: {props.meter.mean_rate.toFixed(2)}</Box>
+            <Box>Mean: {props.meter.mean_rate.toFixed(2)}</Box>
-            <Box>Last minute: {props.meter.m1_rate.toFixed(2)}</Box>
+            <Box>Last minute: {props.meter.m1_rate.toFixed(2)}</Box>
-            <Box>Last 5 minutes: {props.meter.m5_rate.toFixed(2)}</Box>
+            <Box>Last 5 minutes: {props.meter.m5_rate.toFixed(2)}</Box>
-            <Box>Last 15 minutes: {props.meter.m15_rate.toFixed(2)}</Box>
+            <Box>Last 15 minutes: {props.meter.m15_rate.toFixed(2)}</Box>
-            <Box>Units: {props.meter.units}</Box>
+            <Box>Units: {props.meter.units}</Box>
-            <Box>Total: {props.meter.count}</Box>
+            <Box>Total: {props.meter.count}</Box>
-        </Box>
+        </Box>
-    )
+    )
-}
+}

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

@@ -1,22 +1,22 @@
-import { Accordion, Box, Group } from "@mantine/core"
+import { Accordion, Box, Group } from "@mantine/core"
-
+
-interface MetricAccordionItemProps {
+interface MetricAccordionItemProps {
-    metricKey: string
+    metricKey: string
-    name: string
+    name: string
-    headerValue: number
+    headerValue: number
-    children: React.ReactNode
+    children: React.ReactNode
-}
+}
-
+
-export function MetricAccordionItem({ metricKey, name, headerValue, children }: MetricAccordionItemProps) {
+export function MetricAccordionItem({ metricKey, name, headerValue, children }: MetricAccordionItemProps) {
-    return (
+    return (
-        <Accordion.Item value={metricKey} key={metricKey}>
+        <Accordion.Item value={metricKey} key={metricKey}>
-            <Accordion.Control>
+            <Accordion.Control>
-                <Group position="apart">
+                <Group justify="space-between">
-                    <Box>{name}</Box>
+                    <Box>{name}</Box>
-                    <Box>{headerValue}</Box>
+                    <Box>{headerValue}</Box>
-                </Group>
+                </Group>
-            </Accordion.Control>
+            </Accordion.Control>
-            <Accordion.Panel>{children}</Accordion.Panel>
+            <Accordion.Panel>{children}</Accordion.Panel>
-        </Accordion.Item>
+        </Accordion.Item>
-    )
+    )
-}
+}

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

@@ -1,19 +1,19 @@
-import { Box } from "@mantine/core"
+import { Box } from "@mantine/core"
-import { MetricTimer } from "app/types"
+import type { MetricTimer } from "app/types"
-
+
-interface MetricTimerProps {
+interface MetricTimerProps {
-    timer: MetricTimer
+    timer: MetricTimer
-}
+}
-
+
-export function Timer(props: MetricTimerProps) {
+export function Timer(props: MetricTimerProps) {
-    return (
+    return (
-        <Box>
+        <Box>
-            <Box>Mean: {props.timer.mean_rate.toFixed(2)}</Box>
+            <Box>Mean: {props.timer.mean_rate.toFixed(2)}</Box>
-            <Box>Last minute: {props.timer.m1_rate.toFixed(2)}</Box>
+            <Box>Last minute: {props.timer.m1_rate.toFixed(2)}</Box>
-            <Box>Last 5 minutes: {props.timer.m5_rate.toFixed(2)}</Box>
+            <Box>Last 5 minutes: {props.timer.m5_rate.toFixed(2)}</Box>
-            <Box>Last 15 minutes: {props.timer.m15_rate.toFixed(2)}</Box>
+            <Box>Last 15 minutes: {props.timer.m15_rate.toFixed(2)}</Box>
-            <Box>Units: {props.timer.rate_units}</Box>
+            <Box>Units: {props.timer.rate_units}</Box>
-            <Box>Total: {props.timer.count}</Box>
+            <Box>Total: {props.timer.count}</Box>
-        </Box>
+        </Box>
-    )
+    )
-}
+}

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

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

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

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

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,91 +1,161 @@
-import { Trans } from "@lingui/macro"
+import { Trans, t } from "@lingui/macro"
-import { Divider, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
+import { Divider, Group, Radio, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
-import { Constants } from "app/constants"
+import type { ComboboxData } from "@mantine/core/lib/components/Combobox/Combobox.types"
-import {
+import { Constants } from "app/constants"
-    changeAlwaysScrollToEntry,
+import { useAppDispatch, useAppSelector } from "app/store"
-    changeCustomContextMenu,
+import type { IconDisplayMode, ScrollMode, SharingSettings } from "app/types"
-    changeLanguage,
+import {
-    changeMarkAllAsReadConfirmation,
+    changeCustomContextMenu,
-    changeScrollMarks,
+    changeExternalLinkIconDisplayMode,
-    changeScrollSpeed,
+    changeLanguage,
-    changeSharingSetting,
+    changeMarkAllAsReadConfirmation,
-    changeShowRead,
+    changeMobileFooter,
-} from "app/slices/user"
+    changeScrollMarks,
-import { useAppDispatch, useAppSelector } from "app/store"
+    changeScrollMode,
-import { SharingSettings } from "app/types"
+    changeScrollSpeed,
-import { locales } from "i18n"
+    changeSharingSetting,
-
+    changeShowRead,
-export function DisplaySettings() {
+    changeStarIconDisplayMode,
-    const language = useAppSelector(state => state.user.settings?.language)
+} from "app/user/thunks"
-    const scrollSpeed = useAppSelector(state => state.user.settings?.scrollSpeed)
+import { locales } from "i18n"
-    const showRead = useAppSelector(state => state.user.settings?.showRead)
+import type { ReactNode } from "react"
-    const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
+
-    const alwaysScrollToEntry = useAppSelector(state => state.user.settings?.alwaysScrollToEntry)
+export function DisplaySettings() {
-    const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
+    const language = useAppSelector(state => state.user.settings?.language)
-    const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
+    const scrollSpeed = useAppSelector(state => state.user.settings?.scrollSpeed)
-    const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
+    const showRead = useAppSelector(state => state.user.settings?.showRead)
-    const dispatch = useAppDispatch()
+    const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
-
+    const scrollMode = useAppSelector(state => state.user.settings?.scrollMode)
-    return (
+    const starIconDisplayMode = useAppSelector(state => state.user.settings?.starIconDisplayMode)
-        <Stack>
+    const externalLinkIconDisplayMode = useAppSelector(state => state.user.settings?.externalLinkIconDisplayMode)
-            <Select
+    const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
-                description={<Trans>Language</Trans>}
+    const customContextMenu = useAppSelector(state => state.user.settings?.customContextMenu)
-                value={language}
+    const mobileFooter = useAppSelector(state => state.user.settings?.mobileFooter)
-                data={locales.map(l => ({
+    const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
-                    value: l.key,
+    const dispatch = useAppDispatch()
-                    label: l.label,
+
-                }))}
+    const scrollModeOptions: Record<ScrollMode, ReactNode> = {
-                onChange={s => s && dispatch(changeLanguage(s))}
+        always: <Trans>Always</Trans>,
-            />
+        never: <Trans>Never</Trans>,
-
+        if_needed: <Trans>If the entry doesn't entirely fit on the screen</Trans>,
-            <Switch
+    }
-                label={<Trans>Scroll smoothly when navigating between entries</Trans>}
+
-                checked={scrollSpeed ? scrollSpeed > 0 : false}
+    const displayModeData: ComboboxData = [
-                onChange={e => dispatch(changeScrollSpeed(e.currentTarget.checked))}
+        {
-            />
+            value: "always",
-
+            label: t`Always`,
-            <Switch
+        },
-                label={<Trans>Always scroll selected entry to the top of the page, even if it fits entirely on screen</Trans>}
+        {
-                checked={alwaysScrollToEntry}
+            value: "on_desktop",
-                onChange={e => dispatch(changeAlwaysScrollToEntry(e.currentTarget.checked))}
+            label: t`On desktop`,
-            />
+        },
-
+        {
-            <Switch
+            value: "on_mobile",
-                label={<Trans>Show feeds and categories with no unread entries</Trans>}
+            label: t`On mobile`,
-                checked={showRead}
+        },
-                onChange={e => dispatch(changeShowRead(e.currentTarget.checked))}
+        {
-            />
+            value: "never",
-
+            label: t`Never`,
-            <Switch
+        },
-                label={<Trans>In expanded view, scrolling through entries mark them as read</Trans>}
+    ]
-                checked={scrollMarks}
+
-                onChange={e => dispatch(changeScrollMarks(e.currentTarget.checked))}
+    return (
-            />
+        <Stack>
-
+            <Select
-            <Switch
+                description={<Trans>Language</Trans>}
-                label={<Trans>Show confirmation when marking all entries as read</Trans>}
+                value={language}
-                checked={markAllAsReadConfirmation}
+                data={locales.map(l => ({
-                onChange={e => dispatch(changeMarkAllAsReadConfirmation(e.currentTarget.checked))}
+                    value: l.key,
-            />
+                    label: l.label,
-
+                }))}
-            <Switch
+                onChange={async s => await (s && dispatch(changeLanguage(s)))}
-                label={<Trans>Show CommaFeed's own context menu on right click</Trans>}
+            />
-                checked={customContextMenu}
+
-                onChange={e => dispatch(changeCustomContextMenu(e.currentTarget.checked))}
+            <Switch
-            />
+                label={<Trans>Show feeds and categories with no unread entries</Trans>}
-
+                checked={showRead}
-            <Divider label={<Trans>Sharing sites</Trans>} labelPosition="center" />
+                onChange={async e => await dispatch(changeShowRead(e.currentTarget.checked))}
-
+            />
-            <SimpleGrid cols={2}>
+
-                {(Object.keys(Constants.sharing) as Array<keyof SharingSettings>).map(site => (
+            <Switch
-                    <Switch
+                label={<Trans>Show confirmation when marking all entries as read</Trans>}
-                        key={site}
+                checked={markAllAsReadConfirmation}
-                        label={Constants.sharing[site].label}
+                onChange={async e => await dispatch(changeMarkAllAsReadConfirmation(e.currentTarget.checked))}
-                        checked={sharingSettings && sharingSettings[site]}
+            />
-                        onChange={e => dispatch(changeSharingSetting({ site, value: e.currentTarget.checked }))}
+
-                    />
+            <Switch
-                ))}
+                label={<Trans>On mobile, show action buttons at the bottom of the screen</Trans>}
-            </SimpleGrid>
+                checked={mobileFooter}
-        </Stack>
+                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={async e => await dispatch(changeScrollMarks(e.currentTarget.checked))}
+            />
+
+            <Divider label={<Trans>Sharing sites</Trans>} labelPosition="center" />
+
+            <SimpleGrid cols={2}>
+                {(Object.keys(Constants.sharing) as Array<keyof SharingSettings>).map(site => (
+                    <Switch
+                        key={site}
+                        label={Constants.sharing[site].label}
+                        checked={sharingSettings?.[site]}
+                        onChange={async e =>
+                            await dispatch(
+                                changeSharingSetting({
+                                    site,
+                                    value: e.currentTarget.checked,
+                                })
+                            )
+                        }
+                    />
+                ))}
+            </SimpleGrid>
+        </Stack>
+    )
+}

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

@@ -1,139 +1,162 @@
-import { t, Trans } from "@lingui/macro"
+import { Trans, t } from "@lingui/macro"
-import { Anchor, Box, Button, Checkbox, Divider, Group, Input, PasswordInput, Stack, Text, TextInput } from "@mantine/core"
+import { Anchor, Box, Button, Checkbox, Divider, Group, Input, PasswordInput, Stack, Text, TextInput } from "@mantine/core"
-import { useForm } from "@mantine/form"
+import { useForm } from "@mantine/form"
-import { openConfirmModal } from "@mantine/modals"
+import { openConfirmModal } from "@mantine/modals"
-import { client, errorToStrings } from "app/client"
+import { client, errorToStrings } from "app/client"
-import { redirectToLogin, redirectToSelectedSource } from "app/slices/redirect"
+import { redirectToLogin, redirectToSelectedSource } from "app/redirect/thunks"
-import { reloadProfile } from "app/slices/user"
+import { useAppDispatch, useAppSelector } from "app/store"
-import { useAppDispatch, useAppSelector } from "app/store"
+import type { ProfileModificationRequest } from "app/types"
-import { ProfileModificationRequest } from "app/types"
+import { reloadProfile } from "app/user/thunks"
-import { Alert } from "components/Alert"
+import { Alert } from "components/Alert"
-import { useEffect } from "react"
+import { useEffect } from "react"
-import { useAsyncCallback } from "react-async-hook"
+import { useAsyncCallback } from "react-async-hook"
-import { TbDeviceFloppy, TbTrash } from "react-icons/tb"
+import { TbDeviceFloppy, TbTrash } from "react-icons/tb"
-
+
-interface FormData extends ProfileModificationRequest {
+interface FormData extends ProfileModificationRequest {
-    newPasswordConfirmation?: string
+    newPasswordConfirmation?: string
-}
+}
-
+
-export function ProfileSettings() {
+export function ProfileSettings() {
-    const profile = useAppSelector(state => state.user.profile)
+    const profile = useAppSelector(state => state.user.profile)
-    const dispatch = useAppDispatch()
+    const dispatch = useAppDispatch()
-
+
-    const form = useForm<FormData>({
+    const form = useForm<FormData>({
-        validate: {
+        validate: {
-            newPasswordConfirmation: (value, values) => (value !== values.newPassword ? t`Passwords do not match` : null),
+            newPasswordConfirmation: (value, values) => (value !== values.newPassword ? t`Passwords do not match` : null),
-        },
+        },
-    })
+    })
-    const { setValues } = form
+    const { setValues } = form
-
+
-    const saveProfile = useAsyncCallback(client.user.saveProfile, {
+    const saveProfile = useAsyncCallback(client.user.saveProfile, {
-        onSuccess: () => {
+        onSuccess: () => {
-            dispatch(reloadProfile())
+            dispatch(reloadProfile())
-            dispatch(redirectToSelectedSource())
+            dispatch(redirectToSelectedSource())
-        },
+        },
-    })
+    })
-    const deleteProfile = useAsyncCallback(client.user.deleteProfile, {
+    const deleteProfile = useAsyncCallback(client.user.deleteProfile, {
-        onSuccess: () => {
+        onSuccess: () => {
-            dispatch(redirectToLogin())
+            dispatch(redirectToLogin())
-        },
+        },
-    })
+    })
-
+
-    const openDeleteProfileModal = () =>
+    const openDeleteProfileModal = () =>
-        openConfirmModal({
+        openConfirmModal({
-            title: <Trans>Delete account</Trans>,
+            title: <Trans>Delete account</Trans>,
-            children: (
+            children: (
-                <Text size="sm">
+                <Text size="sm">
-                    <Trans>Are you sure you want to delete your account? There's no turning back!</Trans>
+                    <Trans>Are you sure you want to delete your account? There's no turning back!</Trans>
-                </Text>
+                </Text>
-            ),
+            ),
-            labels: { confirm: <Trans>Confirm</Trans>, cancel: <Trans>Cancel</Trans> },
+            labels: { confirm: <Trans>Confirm</Trans>, cancel: <Trans>Cancel</Trans> },
-            confirmProps: { color: "red" },
+            confirmProps: { color: "red" },
-            onConfirm: () => deleteProfile.execute(),
+            onConfirm: async () => await deleteProfile.execute(),
-        })
+        })
-
+
-    useEffect(() => {
+    useEffect(() => {
-        if (!profile) return
+        if (!profile) return
-        setValues({
+        setValues({
-            currentPassword: "",
+            currentPassword: "",
-            email: profile.email ?? "",
+            email: profile.email ?? "",
-            newApiKey: false,
+            newApiKey: false,
-        })
+        })
-    }, [setValues, profile])
+    }, [setValues, profile])
-
+
-    return (
+    return (
-        <>
+        <>
-            {saveProfile.error && (
+            {saveProfile.error && (
-                <Box mb="md">
+                <Box mb="md">
-                    <Alert messages={errorToStrings(saveProfile.error)} />
+                    <Alert messages={errorToStrings(saveProfile.error)} />
-                </Box>
+                </Box>
-            )}
+            )}
-
+
-            {deleteProfile.error && (
+            {deleteProfile.error && (
-                <Box mb="md">
+                <Box mb="md">
-                    <Alert messages={errorToStrings(deleteProfile.error)} />
+                    <Alert messages={errorToStrings(deleteProfile.error)} />
-                </Box>
+                </Box>
-            )}
+            )}
-
+
-            <form onSubmit={form.onSubmit(saveProfile.execute)}>
+            <form onSubmit={form.onSubmit(saveProfile.execute)}>
-                <Stack>
+                <Stack>
-                    <Input.Wrapper label={<Trans>User name</Trans>}>
+                    <TextInput label={<Trans>User name</Trans>} readOnly value={profile?.name} />
-                        <Box>{profile?.name}</Box>
+                    <TextInput
-                    </Input.Wrapper>
+                        label={<Trans>API key</Trans>}
-
+                        description={
-                    <TextInput label={<Trans>API key</Trans>} readOnly value={profile?.apiKey} />
+                            <Trans>
-
+                                This is your API key. It can be used for some read-only API operations and grants access to the Fever API.
-                    <Input.Wrapper
+                                Use the form at the bottom of the page to generate a new API key
-                        label={<Trans>OPML export</Trans>}
+                            </Trans>
-                        description={
+                        }
-                            <Trans>
+                        readOnly
-                                Export your subscriptions and categories as an OPML file that can be imported in other feed reading services
+                        value={profile?.apiKey}
-                            </Trans>
+                    />
-                        }
+
-                    >
+                    <Input.Wrapper
-                        <Box>
+                        label={<Trans>OPML export</Trans>}
-                            <Anchor href="rest/feed/export" download="commafeed_opml.xml">
+                        description={
-                                <Trans>Download</Trans>
+                            <Trans>
-                            </Anchor>
+                                Export your subscriptions and categories as an OPML file that can be imported in other feed reading services
-                        </Box>
+                            </Trans>
-                    </Input.Wrapper>
+                        }
-
+                    >
-                    <Divider />
+                        <Box>
-
+                            <Anchor href="rest/feed/export" download="commafeed.opml">
-                    <PasswordInput
+                                <Trans>Download</Trans>
-                        label={<Trans>Current password</Trans>}
+                            </Anchor>
-                        description={<Trans>Enter your current password to change profile settings</Trans>}
+                        </Box>
-                        required
+                    </Input.Wrapper>
-                        {...form.getInputProps("currentPassword")}
+
-                    />
+                    <Input.Wrapper
-                    <TextInput type="email" label={<Trans>E-mail</Trans>} {...form.getInputProps("email")} required />
+                        label={<Trans>Fever API</Trans>}
-                    <PasswordInput
+                        description={
-                        label={<Trans>New password</Trans>}
+                            <Trans>
-                        description={<Trans>Changing password will generate a new API key</Trans>}
+                                CommaFeed is compatible with the Fever API. Use the following URL in your Fever-compatible mobile client.
-                        {...form.getInputProps("newPassword")}
+                                Login with your username and your <u>API key</u>.
-                    />
+                            </Trans>
-                    <PasswordInput label={<Trans>Confirm password</Trans>} {...form.getInputProps("newPasswordConfirmation")} />
+                        }
-                    <Checkbox label={<Trans>Generate new API key</Trans>} {...form.getInputProps("newApiKey", { type: "checkbox" })} />
+                    >
-
+                        <Box>
-                    <Group>
+                            <Anchor href={`rest/fever/user/${profile?.id}`} target="_blank">
-                        <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
+                                <Trans>Fever API URL</Trans>
-                            <Trans>Cancel</Trans>
+                            </Anchor>
-                        </Button>
+                        </Box>
-                        <Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveProfile.loading}>
+                    </Input.Wrapper>
-                            <Trans>Save</Trans>
+
-                        </Button>
+                    <Divider />
-                        <Divider orientation="vertical" />
+
-                        <Button
+                    <PasswordInput
-                            color="red"
+                        label={<Trans>Current password</Trans>}
-                            leftIcon={<TbTrash size={16} />}
+                        description={<Trans>Enter your current password to change profile settings</Trans>}
-                            onClick={() => openDeleteProfileModal()}
+                        required
-                            loading={deleteProfile.loading}
+                        {...form.getInputProps("currentPassword")}
-                        >
+                    />
-                            <Trans>Delete account</Trans>
+                    <TextInput type="email" label={<Trans>E-mail</Trans>} {...form.getInputProps("email")} required />
-                        </Button>
+                    <PasswordInput
-                    </Group>
+                        label={<Trans>New password</Trans>}
-                </Stack>
+                        description={<Trans>Changing password will generate a new API key</Trans>}
-            </form>
+                        {...form.getInputProps("newPassword")}
-        </>
+                    />
-    )
+                    <PasswordInput label={<Trans>Confirm password</Trans>} {...form.getInputProps("newPasswordConfirmation")} />
-}
+                    <Checkbox label={<Trans>Generate new API key</Trans>} {...form.getInputProps("newApiKey", { type: "checkbox" })} />
+
+                    <Group>
+                        <Button variant="default" onClick={async () => await dispatch(redirectToSelectedSource())}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                        <Button type="submit" leftSection={<TbDeviceFloppy size={16} />} loading={saveProfile.loading}>
+                            <Trans>Save</Trans>
+                        </Button>
+                        <Divider orientation="vertical" />
+                        <Button
+                            color="red"
+                            leftSection={<TbTrash size={16} />}
+                            onClick={() => openDeleteProfileModal()}
+                            loading={deleteProfile.loading}
+                        >
+                            <Trans>Delete account</Trans>
+                        </Button>
+                    </Group>
+                </Stack>
+            </form>
+        </>
+    )
+}

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

@@ -1,169 +1,175 @@
-import { Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
-import { Box, Stack } from "@mantine/core"
+import { Box, Stack } from "@mantine/core"
-import { Constants } from "app/constants"
+import { Constants } from "app/constants"
-import {
+import {
-    redirectToCategory,
+    redirectToCategory,
-    redirectToCategoryDetails,
+    redirectToCategoryDetails,
-    redirectToFeed,
+    redirectToFeed,
-    redirectToFeedDetails,
+    redirectToFeedDetails,
-    redirectToTag,
+    redirectToTag,
-    redirectToTagDetails,
+    redirectToTagDetails,
-} from "app/slices/redirect"
+} from "app/redirect/thunks"
-import { collapseTreeCategory } from "app/slices/tree"
+import { useAppDispatch, useAppSelector } from "app/store"
-import { useAppDispatch, useAppSelector } from "app/store"
+import { collapseTreeCategory } from "app/tree/thunks"
-import { Category, Subscription } from "app/types"
+import type { Category, Subscription } from "app/types"
-import { categoryUnreadCount, flattenCategoryTree } from "app/utils"
+import { categoryUnreadCount, flattenCategoryTree } from "app/utils"
-import { Loader } from "components/Loader"
+import { Loader } from "components/Loader"
-import { OnDesktop } from "components/responsive/OnDesktop"
+import { OnDesktop } from "components/responsive/OnDesktop"
-import React from "react"
+import React from "react"
-import { TbChevronDown, TbChevronRight, TbInbox, TbStar, TbTag } from "react-icons/tb"
+import { TbChevronDown, TbChevronRight, TbInbox, TbStar, TbTag } from "react-icons/tb"
-import { TreeNode } from "./TreeNode"
+import { TreeNode } from "./TreeNode"
-import { TreeSearch } from "./TreeSearch"
+import { TreeSearch } from "./TreeSearch"
-
+
-const allIcon = <TbInbox size={16} />
+const allIcon = <TbInbox size={16} />
-const starredIcon = <TbStar size={16} />
+const starredIcon = <TbStar size={16} />
-const tagIcon = <TbTag size={16} />
+const tagIcon = <TbTag size={16} />
-const expandedIcon = <TbChevronDown size={16} />
+const expandedIcon = <TbChevronDown size={16} />
-const collapsedIcon = <TbChevronRight size={16} />
+const collapsedIcon = <TbChevronRight size={16} />
-
+
-const errorThreshold = 9
+const errorThreshold = 9
-
+
-export function Tree() {
+export function Tree() {
-    const root = useAppSelector(state => state.tree.rootCategory)
+    const root = useAppSelector(state => state.tree.rootCategory)
-    const source = useAppSelector(state => state.entries.source)
+    const source = useAppSelector(state => state.entries.source)
-    const tags = useAppSelector(state => state.user.tags)
+    const tags = useAppSelector(state => state.user.tags)
-    const showRead = useAppSelector(state => state.user.settings?.showRead)
+    const showRead = useAppSelector(state => state.user.settings?.showRead)
-    const dispatch = useAppDispatch()
+    const dispatch = useAppDispatch()
-
+
-    const feedClicked = (e: React.MouseEvent, id: string) => {
+    const feedClicked = (e: React.MouseEvent, id: string) => {
-        if (e.detail === 2) dispatch(redirectToFeedDetails(id))
+        if (e.detail === 2) {
-        else dispatch(redirectToFeed(id))
+            dispatch(redirectToFeedDetails(id))
-    }
+        } else {
-    const categoryClicked = (e: React.MouseEvent, id: string) => {
+            dispatch(redirectToFeed(id))
-        if (e.detail === 2) {
+        }
-            dispatch(redirectToCategoryDetails(id))
+    }
-        } else {
+    const categoryClicked = (e: React.MouseEvent, id: string) => {
-            dispatch(redirectToCategory(id))
+        if (e.detail === 2) {
-        }
+            dispatch(redirectToCategoryDetails(id))
-    }
+        } else {
-    const categoryIconClicked = (e: React.MouseEvent, category: Category) => {
+            dispatch(redirectToCategory(id))
-        e.stopPropagation()
+        }
-
+    }
-        dispatch(
+    const categoryIconClicked = (e: React.MouseEvent, category: Category) => {
-            collapseTreeCategory({
+        e.stopPropagation()
-                id: +category.id,
+
-                collapse: category.expanded,
+        dispatch(
-            })
+            collapseTreeCategory({
-        )
+                id: +category.id,
-    }
+                collapse: category.expanded,
-    const tagClicked = (e: React.MouseEvent, id: string) => {
+            })
-        if (e.detail === 2) dispatch(redirectToTagDetails(id))
+        )
-        else dispatch(redirectToTag(id))
+    }
-    }
+    const tagClicked = (e: React.MouseEvent, id: string) => {
-
+        if (e.detail === 2) {
-    const allCategoryNode = () => (
+            dispatch(redirectToTagDetails(id))
-        <TreeNode
+        } else {
-            id={Constants.categories.all.id}
+            dispatch(redirectToTag(id))
-            name={<Trans>All</Trans>}
+        }
-            icon={allIcon}
+    }
-            unread={categoryUnreadCount(root)}
+
-            selected={source.type === "category" && source.id === Constants.categories.all.id}
+    const allCategoryNode = () => (
-            expanded={false}
+        <TreeNode
-            level={0}
+            id={Constants.categories.all.id}
-            hasError={false}
+            name={<Trans>All</Trans>}
-            onClick={categoryClicked}
+            icon={allIcon}
-        />
+            unread={categoryUnreadCount(root)}
-    )
+            selected={source.type === "category" && source.id === Constants.categories.all.id}
-    const starredCategoryNode = () => (
+            expanded={false}
-        <TreeNode
+            level={0}
-            id={Constants.categories.starred.id}
+            hasError={false}
-            name={<Trans>Starred</Trans>}
+            onClick={categoryClicked}
-            icon={starredIcon}
+        />
-            unread={0}
+    )
-            selected={source.type === "category" && source.id === Constants.categories.starred.id}
+    const starredCategoryNode = () => (
-            expanded={false}
+        <TreeNode
-            level={0}
+            id={Constants.categories.starred.id}
-            hasError={false}
+            name={<Trans>Starred</Trans>}
-            onClick={categoryClicked}
+            icon={starredIcon}
-        />
+            unread={0}
-    )
+            selected={source.type === "category" && source.id === Constants.categories.starred.id}
-
+            expanded={false}
-    const categoryNode = (category: Category, level = 0) => {
+            level={0}
-        const unreadCount = categoryUnreadCount(category)
+            hasError={false}
-        if (unreadCount === 0 && !showRead) return null
+            onClick={categoryClicked}
-
+        />
-        const hasError = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => f.errorCount > errorThreshold))
+    )
-        return (
+
-            <TreeNode
+    const categoryNode = (category: Category, level = 0) => {
-                id={category.id}
+        const unreadCount = categoryUnreadCount(category)
-                name={category.name}
+        if (unreadCount === 0 && !showRead) return null
-                icon={category.expanded ? expandedIcon : collapsedIcon}
+
-                unread={unreadCount}
+        const hasError = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => f.errorCount > errorThreshold))
-                selected={source.type === "category" && source.id === category.id}
+        return (
-                expanded={category.expanded}
+            <TreeNode
-                level={level}
+                id={category.id}
-                hasError={hasError}
+                name={category.name}
-                onClick={categoryClicked}
+                icon={category.expanded ? expandedIcon : collapsedIcon}
-                onIconClick={e => categoryIconClicked(e, category)}
+                unread={unreadCount}
-                key={category.id}
+                selected={source.type === "category" && source.id === category.id}
-            />
+                expanded={category.expanded}
-        )
+                level={level}
-    }
+                hasError={hasError}
-
+                onClick={categoryClicked}
-    const feedNode = (feed: Subscription, level = 0) => {
+                onIconClick={e => categoryIconClicked(e, category)}
-        if (feed.unread === 0 && !showRead) return null
+                key={category.id}
-
+            />
-        return (
+        )
-            <TreeNode
+    }
-                id={String(feed.id)}
+
-                name={feed.name}
+    const feedNode = (feed: Subscription, level = 0) => {
-                icon={feed.iconUrl}
+        if (feed.unread === 0 && !showRead) return null
-                unread={feed.unread}
+
-                selected={source.type === "feed" && source.id === String(feed.id)}
+        return (
-                level={level}
+            <TreeNode
-                hasError={feed.errorCount > errorThreshold}
+                id={String(feed.id)}
-                onClick={feedClicked}
+                name={feed.name}
-                key={feed.id}
+                icon={feed.iconUrl}
-            />
+                unread={feed.unread}
-        )
+                selected={source.type === "feed" && source.id === String(feed.id)}
-    }
+                level={level}
-
+                hasError={feed.errorCount > errorThreshold}
-    const tagNode = (tag: string) => (
+                onClick={feedClicked}
-        <TreeNode
+                key={feed.id}
-            id={tag}
+            />
-            name={tag}
+        )
-            icon={tagIcon}
+    }
-            unread={0}
+
-            selected={source.type === "tag" && source.id === tag}
+    const tagNode = (tag: string) => (
-            level={0}
+        <TreeNode
-            hasError={false}
+            id={tag}
-            onClick={tagClicked}
+            name={tag}
-            key={tag}
+            icon={tagIcon}
-        />
+            unread={0}
-    )
+            selected={source.type === "tag" && source.id === tag}
-
+            level={0}
-    const recursiveCategoryNode = (category: Category, level = 0) => (
+            hasError={false}
-        <React.Fragment key={`recursiveCategoryNode-${category.id}`}>
+            onClick={tagClicked}
-            {categoryNode(category, level)}
+            key={tag}
-            {category.expanded && category.children.map(c => recursiveCategoryNode(c, level + 1))}
+        />
-            {category.expanded && category.feeds.map(f => feedNode(f, level + 1))}
+    )
-        </React.Fragment>
+
-    )
+    const recursiveCategoryNode = (category: Category, level = 0) => (
-
+        <React.Fragment key={`recursiveCategoryNode-${category.id}`}>
-    if (!root) return <Loader />
+            {categoryNode(category, level)}
-    const feeds = flattenCategoryTree(root).flatMap(c => c.feeds)
+            {category.expanded && category.children.map(c => recursiveCategoryNode(c, level + 1))}
-    return (
+            {category.expanded && category.feeds.map(f => feedNode(f, level + 1))}
-        <Stack>
+        </React.Fragment>
-            <OnDesktop>
+    )
-                <TreeSearch feeds={feeds} />
+
-            </OnDesktop>
+    if (!root) return <Loader />
-            <Box>
+    const feeds = flattenCategoryTree(root).flatMap(c => c.feeds)
-                {allCategoryNode()}
+    return (
-                {starredCategoryNode()}
+        <Stack>
-                {root.children.map(c => recursiveCategoryNode(c))}
+            <OnDesktop>
-                {root.feeds.map(f => feedNode(f))}
+                <TreeSearch feeds={feeds} />
-                {tags?.map(tag => tagNode(tag))}
+            </OnDesktop>
-            </Box>
+            <Box>
-        </Stack>
+                {allCategoryNode()}
-    )
+                {starredCategoryNode()}
-}
+                {root.children.map(c => recursiveCategoryNode(c))}
+                {root.feeds.map(f => feedNode(f))}
+                {tags?.map(tag => tagNode(tag))}
+            </Box>
+        </Stack>
+    )
+}

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

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

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

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

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

@@ -1,18 +1,26 @@
-import { Badge, createStyles } from "@mantine/core"
+import { Badge, Tooltip } from "@mantine/core"
-
+import { Constants } from "app/constants"
-const useStyles = createStyles(() => ({
+import { tss } from "tss"
-    badge: {
+
-        width: "3.2rem",
+const useStyles = tss.create(() => ({
-        // for some reason, mantine Badge has "cursor: 'default'"
+    badge: {
-        cursor: "pointer",
+        width: "3.2rem",
-    },
+        // for some reason, mantine Badge has "cursor: 'default'"
-}))
+        cursor: "pointer",
-
+    },
-export function UnreadCount(props: { unreadCount: number }) {
+}))
-    const { classes } = useStyles()
+
-
+export function UnreadCount(props: { unreadCount: number }) {
-    if (props.unreadCount <= 0) return null
+    const { classes } = useStyles()
-
+
-    const count = props.unreadCount >= 1000 ? "999+" : props.unreadCount
+    if (props.unreadCount <= 0) return null
-    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/useActionButton.ts

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

commafeed-client/src/hooks/useAppLoading.ts

@@ -1,39 +1,39 @@
-import { t } from "@lingui/macro"
+import { t } from "@lingui/macro"
-import { useAppSelector } from "app/store"
+import { useAppSelector } from "app/store"
-
+
-interface Step {
+interface Step {
-    label: string
+    label: string
-    done: boolean
+    done: boolean
-}
+}
-
+
-export const useAppLoading = () => {
+export const useAppLoading = () => {
-    const profile = useAppSelector(state => state.user.profile)
+    const profile = useAppSelector(state => state.user.profile)
-    const settings = useAppSelector(state => state.user.settings)
+    const settings = useAppSelector(state => state.user.settings)
-    const rootCategory = useAppSelector(state => state.tree.rootCategory)
+    const rootCategory = useAppSelector(state => state.tree.rootCategory)
-    const tags = useAppSelector(state => state.user.tags)
+    const tags = useAppSelector(state => state.user.tags)
-
+
-    const steps: Step[] = [
+    const steps: Step[] = [
-        {
+        {
-            label: t`Loading settings...`,
+            label: t`Loading settings...`,
-            done: !!settings,
+            done: !!settings,
-        },
+        },
-        {
+        {
-            label: t`Loading profile...`,
+            label: t`Loading profile...`,
-            done: !!profile,
+            done: !!profile,
-        },
+        },
-        {
+        {
-            label: t`Loading subscriptions...`,
+            label: t`Loading subscriptions...`,
-            done: !!rootCategory,
+            done: !!rootCategory,
-        },
+        },
-        {
+        {
-            label: t`Loading tags...`,
+            label: t`Loading tags...`,
-            done: !!tags,
+            done: !!tags,
-        },
+        },
-    ]
+    ]
-
+
-    const loading = steps.some(s => !s.done)
+    const loading = steps.some(s => !s.done)
-    const loadingPercentage = Math.round((100.0 * steps.filter(s => s.done).length) / steps.length)
+    const loadingPercentage = Math.round((100.0 * steps.filter(s => s.done).length) / steps.length)
-    const loadingStepLabel = steps.find(s => !s.done)?.label
+    const loadingStepLabel = steps.find(s => !s.done)?.label
-
+
-    return { steps, loading, loadingPercentage, loadingStepLabel }
+    return { steps, loading, loadingPercentage, loadingStepLabel }
-}
+}

commafeed-client/src/hooks/useBrowserExtension.ts

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

commafeed-client/src/hooks/useColorScheme.ts

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

commafeed-client/src/hooks/useMobile.ts

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

commafeed-client/src/hooks/useMousetrap.ts

@@ -1,22 +1,22 @@
-import mousetrap, { ExtendedKeyboardEvent } from "mousetrap"
+import mousetrap, { type ExtendedKeyboardEvent } from "mousetrap"
-import { useEffect, useRef } from "react"
+import { useEffect, useRef } from "react"
-
+
-type Callback = (e: ExtendedKeyboardEvent, combo: string) => void
+type Callback = (e: ExtendedKeyboardEvent, combo: string) => void
-
+
-export const useMousetrap = (key: string | string[], callback: Callback) => {
+export const useMousetrap = (key: string | string[], callback: Callback) => {
-    // use a ref to avoid unbinding/rebinding every time the callback changes
+    // use a ref to avoid unbinding/rebinding every time the callback changes
-    const callbackRef = useRef(callback)
+    const callbackRef = useRef(callback)
-    callbackRef.current = callback
+    callbackRef.current = callback
-
+
-    useEffect(() => {
+    useEffect(() => {
-        mousetrap.bind(key, (event, combo) => {
+        mousetrap.bind(key, (event, combo) => {
-            callbackRef.current(event, combo)
+            callbackRef.current(event, combo)
-
+
-            // prevent default behavior
+            // prevent default behavior
-            return false
+            return false
-        })
+        })
-        return () => {
+        return () => {
-            mousetrap.unbind(key)
+            mousetrap.unbind(key)
-        }
+        }
-    }, [key])
+    }, [key])
-}
+}

commafeed-client/src/hooks/useViewMode.ts

@@ -1,7 +1,7 @@
-import { ViewMode } from "app/types"
+import type { ViewMode } from "app/types"
-import useLocalStorage from "use-local-storage"
+import useLocalStorage from "use-local-storage"
-
+
-export function useViewMode() {
+export function useViewMode() {
-    const [viewMode, setViewMode] = useLocalStorage<ViewMode>("view-mode", "detailed")
+    const [viewMode, setViewMode] = useLocalStorage<ViewMode>("view-mode", "detailed")
-    return { viewMode, setViewMode }
+    return { viewMode, setViewMode }
-}
+}

commafeed-client/src/hooks/useWebSocket.ts

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

commafeed-client/src/i18n.ts

@@ -1,64 +1,64 @@
-import { i18n } from "@lingui/core"
+import { type Messages, i18n } from "@lingui/core"
-import { useAppSelector } from "app/store"
+import { useAppSelector } from "app/store"
-import dayjs from "dayjs"
+import dayjs from "dayjs"
-import { useEffect } from "react"
+import { useEffect } from "react"
-
+
-interface Locale {
+interface Locale {
-    key: string
+    key: string
-    label: string
+    label: string
-    daysjsImportFn: () => Promise<ILocale>
+    dayjsImportFn: () => Promise<ILocale>
-}
+}
-
+
-// add an object to the array to add a new locale
+// add an object to the array to add a new locale
-// don't forget to also add it to the 'locales' array in .linguirc
+// don't forget to also add it to the 'locales' array in .linguirc
-export const locales: Locale[] = [
+export const locales: Locale[] = [
-    { key: "ar", label: "العربية", daysjsImportFn: () => import("dayjs/locale/ar") },
+    { key: "ar", label: "العربية", dayjsImportFn: async () => await import("dayjs/locale/ar") },
-    { key: "ca", label: "Català", daysjsImportFn: () => import("dayjs/locale/ca") },
+    { key: "ca", label: "Català", dayjsImportFn: async () => await import("dayjs/locale/ca") },
-    { key: "cs", label: "Čeština", daysjsImportFn: () => import("dayjs/locale/cs") },
+    { key: "cs", label: "Čeština", dayjsImportFn: async () => await import("dayjs/locale/cs") },
-    { key: "cy", label: "Cymraeg", daysjsImportFn: () => import("dayjs/locale/cy") },
+    { key: "cy", label: "Cymraeg", dayjsImportFn: async () => await import("dayjs/locale/cy") },
-    { key: "da", label: "Danish", daysjsImportFn: () => import("dayjs/locale/da") },
+    { key: "da", label: "Danish", dayjsImportFn: async () => await import("dayjs/locale/da") },
-    { key: "de", label: "Deutsch", daysjsImportFn: () => import("dayjs/locale/de") },
+    { key: "de", label: "Deutsch", dayjsImportFn: async () => await import("dayjs/locale/de") },
-    { key: "en", label: "English", daysjsImportFn: () => import("dayjs/locale/en") },
+    { key: "en", label: "English", dayjsImportFn: async () => await import("dayjs/locale/en") },
-    { key: "es", label: "Español", daysjsImportFn: () => import("dayjs/locale/es") },
+    { key: "es", label: "Español", dayjsImportFn: async () => await import("dayjs/locale/es") },
-    { key: "fa", label: "فارسی", daysjsImportFn: () => import("dayjs/locale/fa") },
+    { key: "fa", label: "فارسی", dayjsImportFn: async () => await import("dayjs/locale/fa") },
-    { key: "fi", label: "Suomi", daysjsImportFn: () => import("dayjs/locale/fi") },
+    { key: "fi", label: "Suomi", dayjsImportFn: async () => await import("dayjs/locale/fi") },
-    { key: "fr", label: "Français", daysjsImportFn: () => import("dayjs/locale/fr") },
+    { key: "fr", label: "Français", dayjsImportFn: async () => await import("dayjs/locale/fr") },
-    { key: "gl", label: "Galician", daysjsImportFn: () => import("dayjs/locale/gl") },
+    { key: "gl", label: "Galician", dayjsImportFn: async () => await import("dayjs/locale/gl") },
-    { key: "hu", label: "Magyar", daysjsImportFn: () => import("dayjs/locale/hu") },
+    { key: "hu", label: "Magyar", dayjsImportFn: async () => await import("dayjs/locale/hu") },
-    { key: "id", label: "Indonesian", daysjsImportFn: () => import("dayjs/locale/id") },
+    { key: "id", label: "Indonesian", dayjsImportFn: async () => await import("dayjs/locale/id") },
-    { key: "it", label: "Italiano", daysjsImportFn: () => import("dayjs/locale/it") },
+    { key: "it", label: "Italiano", dayjsImportFn: async () => await import("dayjs/locale/it") },
-    { key: "ja", label: "日本語", daysjsImportFn: () => import("dayjs/locale/ja") },
+    { key: "ja", label: "日本語", dayjsImportFn: async () => await import("dayjs/locale/ja") },
-    { key: "ko", label: "한국어", daysjsImportFn: () => import("dayjs/locale/ko") },
+    { key: "ko", label: "한국어", dayjsImportFn: async () => await import("dayjs/locale/ko") },
-    { key: "ms", label: "Bahasa Malaysian", daysjsImportFn: () => import("dayjs/locale/ms") },
+    { key: "ms", label: "Bahasa Malaysian", dayjsImportFn: async () => await import("dayjs/locale/ms") },
-    { key: "nb", label: "Norsk (bokmål)", daysjsImportFn: () => import("dayjs/locale/nb") },
+    { key: "nb", label: "Norsk (bokmål)", dayjsImportFn: async () => await import("dayjs/locale/nb") },
-    { key: "nl", label: "Nederlands", daysjsImportFn: () => import("dayjs/locale/nl") },
+    { key: "nl", label: "Nederlands", dayjsImportFn: async () => await import("dayjs/locale/nl") },
-    { key: "nn", label: "Norsk (nynorsk)", daysjsImportFn: () => import("dayjs/locale/nn") },
+    { key: "nn", label: "Norsk (nynorsk)", dayjsImportFn: async () => await import("dayjs/locale/nn") },
-    { key: "pl", label: "Polski", daysjsImportFn: () => import("dayjs/locale/pl") },
+    { key: "pl", label: "Polski", dayjsImportFn: async () => await import("dayjs/locale/pl") },
-    { key: "pt", label: "Português", daysjsImportFn: () => import("dayjs/locale/pt") },
+    { key: "pt", label: "Português", dayjsImportFn: async () => await import("dayjs/locale/pt") },
-    { key: "ru", label: "Русский", daysjsImportFn: () => import("dayjs/locale/ru") },
+    { key: "ru", label: "Русский", dayjsImportFn: async () => await import("dayjs/locale/ru") },
-    { key: "sk", label: "Slovenčina", daysjsImportFn: () => import("dayjs/locale/sk") },
+    { key: "sk", label: "Slovenčina", dayjsImportFn: async () => await import("dayjs/locale/sk") },
-    { key: "sv", label: "Svenska", daysjsImportFn: () => import("dayjs/locale/sv") },
+    { key: "sv", label: "Svenska", dayjsImportFn: async () => await import("dayjs/locale/sv") },
-    { key: "tr", label: "Türkçe", daysjsImportFn: () => import("dayjs/locale/tr") },
+    { key: "tr", label: "Türkçe", dayjsImportFn: async () => await import("dayjs/locale/tr") },
-    { key: "zh", label: "简体中文", daysjsImportFn: () => import("dayjs/locale/zh") },
+    { key: "zh", label: "简体中文", dayjsImportFn: async () => await import("dayjs/locale/zh") },
-]
+]
-
+
-function activateLocale(locale: string) {
+function activateLocale(locale: string) {
-    // lingui
+    // lingui
-    import(`./locales/${locale}/messages.po`).then(data => {
+    import(`./locales/${locale}/messages.po`).then((data: { messages: Messages }) => {
-        i18n.load(locale, data.messages)
+        i18n.load(locale, data.messages)
-        i18n.activate(locale)
+        i18n.activate(locale)
-    })
+    })
-
+
-    // dayjs
+    // dayjs
-    locales
+    locales
-        .find(l => l.key === locale)
+        .find(l => l.key === locale)
-        ?.daysjsImportFn()
+        ?.dayjsImportFn()
-        .then(() => dayjs.locale(locale))
+        .then(() => dayjs.locale(locale))
-}
+}
-
+
-export const useI18n = () => {
+export const useI18n = () => {
-    const locale = useAppSelector(state => state.user.settings?.language)
+    const locale = useAppSelector(state => state.user.settings?.language)
-    useEffect(() => {
+    useEffect(() => {
-        activateLocale(locale ?? "en")
+        activateLocale(locale ?? "en")
-    }, [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
@@ -175,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 التالي العنصر غير المقروء"
@@ -207,10 +212,6 @@ msgstr "تأكيد كلمة المرور"
 msgid "Cozy"
 msgstr "دافئ"
 
-#: src/components/content/FeedEntryFooter.tsx
-msgid "Create tag: {query}"
-msgstr "إنشاء علامة: {استعلام}"
-
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Ctrl"
 msgstr "السيطرة"
@@ -231,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 "تاريخ الإنشاء"
@@ -308,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 "خطأ"
@@ -343,9 +352,13 @@ msgstr "موجز URL"
 msgid "Fetch all my feeds now"
 msgstr ""
 
-#: src/components/content/add/ImportOpml.tsx
+#: src/components/settings/ProfileSettings.tsx
-msgid "file is required"
+msgid "Fever API"
-msgstr "الملف مطلوب"
+msgstr ""
+
+#: src/components/settings/ProfileSettings.tsx
+msgid "Fever API URL"
+msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Filtering expression"
@@ -395,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."
@@ -433,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
@@ -525,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 "كلمة مرور جديدة"
@@ -550,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 "لم يتم العثور على شيء"
@@ -558,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 "اوووه!"
@@ -575,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 "افتح الرابط"
 
@@ -586,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 "فتح الإدخال التالي"
@@ -611,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 "طلب"
@@ -682,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
@@ -709,7 +768,7 @@ msgstr "ضع التركيز على الإدخال السابق دون فتحه"
 msgid "Settings"
 msgstr "إعدادات"
 
-#: src/app/slices/user.ts
+#: src/app/user/slice.ts
 msgid "Settings saved."
 msgstr "تم حفظ الإعدادات."
 
@@ -743,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 "إظهار موجز ويب والفئات التي لا تحتوي على إدخالات غير مقروءة"
@@ -755,6 +818,10 @@ msgstr "إظهار تعليمات اختصار لوحة المفاتيح"
 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
@@ -772,6 +839,7 @@ msgstr "فضاء"
 
 #: src/components/content/FeedEntryContextMenu.tsx
 #: src/components/content/FeedEntryFooter.tsx
+#: src/components/content/header/Star.tsx
 msgid "Star"
 msgstr "النجم"
 
@@ -799,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 "الكلمات"
@@ -824,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 "تبديل قراءة حالة الإدخال الحالي"
@@ -832,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 باستخدام الحساب التجريبي: تجريبي / تجريبي"
@@ -846,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"
+#: src/components/settings/DisplaySettings.tsx
-msgstr ""
+msgid "Always"
+msgstr "Sempre"
 
 #: src/pages/auth/PasswordRecoveryPage.tsx
 msgid "An email has been sent if this address was registered. Check your inbox."
@@ -89,7 +86,7 @@ msgstr "Analitzar el feed"
 
 #: src/components/AnnouncementDialog.tsx
 msgid "Announcement"
-msgstr ""
+msgstr "Anunci"
 
 #: src/components/settings/ProfileSettings.tsx
 msgid "API key"
@@ -121,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."
@@ -137,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
@@ -175,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"
@@ -185,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"
@@ -197,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"
@@ -207,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"
@@ -221,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"
@@ -254,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
@@ -268,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"
@@ -308,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}."
@@ -327,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"
@@ -341,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
+#: src/components/settings/ProfileSettings.tsx
-msgid "file is required"
+msgid "Fever API URL"
-msgstr "el fitxer és necessari"
+msgstr ""
 
 #: src/pages/app/FeedDetailsPage.tsx
 msgid "Filtering expression"
@@ -373,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"
@@ -389,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."
@@ -433,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
@@ -499,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"
@@ -525,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"
@@ -550,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"
@@ -558,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"
@@ -575,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"
@@ -600,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"
@@ -611,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"
@@ -646,7 +697,7 @@ msgstr "Posició"
 
 #: src/components/header/Header.tsx
 msgid "Previous"
-msgstr ""
+msgstr "Anterior"
 
 #: src/pages/app/SettingsPage.tsx
 msgid "Profile"
@@ -672,7 +723,7 @@ 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
@@ -682,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
@@ -709,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."
 
@@ -729,18 +788,22 @@ msgstr "canvi"
 
 #: src/components/settings/DisplaySettings.tsx
 msgid "Show CommaFeed's own context menu on right click"
-msgstr ""
+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 ""
+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
@@ -753,13 +816,17 @@ 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..."
@@ -772,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"
 
@@ -799,19 +867,22 @@ msgid "Success"
 msgstr "Éxit"
 
 #: src/components/KeyboardShortcutsHelp.tsx
-msgid "Swipe header to the right"
+msgid "Swipe header to the left"
-msgstr ""
+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"
@@ -824,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"
@@ -838,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"
@@ -846,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"
 
@@ -877,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."