restore swipe-to-right to toggle read/unread status (#1019)

2026-03-21 21:37:29 +00:00 · 2022-11-04 08:45:37 +01:00
parent a11e528b8d
commit f9e7653901
32 changed files with 140 additions and 2 deletions
--- a/commafeed-client/package-lock.json
+++ b/commafeed-client/package-lock.json
@@ -34,6 +34,7 @@
                "react-infinite-scroller": "^1.2.6",
                "react-redux": "^8.0.4",
                "react-router-dom": "^6.4.2",
+                "react-swipeable": "^7.0.0",
                "swagger-ui-react": "^4.15.2",
                "tinycon": "^0.6.8"
            },
@@ -8657,6 +8658,14 @@
                "react-dom": ">=16.8"
            }
        },
+        "node_modules/react-swipeable": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.0.tgz",
+            "integrity": "sha512-NI7KGfQ6gwNFN0Hor3vytYW3iRfMMaivGEuxcADOOfBCx/kqwXE8IfHFxEcxSUkxCYf38COLKYd9EMYZghqaUA==",
+            "peerDependencies": {
+                "react": "^16.8.3 || ^17 || ^18"
+            }
+        },
        "node_modules/react-syntax-highlighter": {
            "version": "15.5.0",
            "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
@@ -16321,6 +16330,12 @@
                "react-router": "6.4.2"
            }
        },
+        "react-swipeable": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.0.tgz",
+            "integrity": "sha512-NI7KGfQ6gwNFN0Hor3vytYW3iRfMMaivGEuxcADOOfBCx/kqwXE8IfHFxEcxSUkxCYf38COLKYd9EMYZghqaUA==",
+            "requires": {}
+        },
        "react-syntax-highlighter": {
            "version": "15.5.0",
            "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
--- a/commafeed-client/package.json
+++ b/commafeed-client/package.json
@@ -41,6 +41,7 @@
        "react-infinite-scroller": "^1.2.6",
        "react-redux": "^8.0.4",
        "react-router-dom": "^6.4.2",
+        "react-swipeable": "^7.0.0",
        "swagger-ui-react": "^4.15.2",
        "tinycon": "^0.6.8"
    },
--- a/commafeed-client/src/components/KeyboardShortcutsHelp.tsx
+++ b/commafeed-client/src/components/KeyboardShortcutsHelp.tsx
@@ -103,6 +103,8 @@ export function KeyboardShortcutsHelp() {
                    </td>
                    <td>
                        <Kbd>M</Kbd>
+                        <span>, </span>
+                        <Trans>Swipe header to the right</Trans>
                    </td>
                </tr>
                <tr>
--- a/commafeed-client/src/components/content/FeedEntry.tsx
+++ b/commafeed-client/src/components/content/FeedEntry.tsx
@@ -1,8 +1,10 @@
 import { Anchor, Box, createStyles, Divider, Paper } from "@mantine/core"
 import { Constants } from "app/constants"
-import { useAppSelector } from "app/store"
+import { markEntry } from "app/slices/entries"
+import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
 import React from "react"
+import { useSwipeable } from "react-swipeable"
 import { FeedEntryBody } from "./FeedEntryBody"
 import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader"
 import { FeedEntryFooter } from "./FeedEntryFooter"
@@ -45,8 +47,14 @@ const useStyles = createStyles((theme, props: FeedEntryProps) => {
 export function FeedEntry(props: FeedEntryProps) {
    const { classes } = useStyles(props)
    const viewMode = useAppSelector(state => state.user.settings?.viewMode)
+    const dispatch = useAppDispatch()
+
    const compactHeader = viewMode === "title" && !props.expanded

+    const swipeHandlers = useSwipeable({
+        onSwipedRight: () => dispatch(markEntry({ entry: props.entry, read: !props.entry.read })),
+    })
+
    return (
        <Paper withBorder className={classes.paper}>
            <Anchor
@@ -57,7 +65,7 @@ export function FeedEntry(props: FeedEntryProps) {
                onClick={props.onHeaderClick}
                onAuxClick={props.onHeaderClick}
            >
-                <Box p="xs">
+                <Box p="xs" {...swipeHandlers}>
                    {compactHeader && <FeedEntryCompactHeader entry={props.entry} />}
                    {!compactHeader && <FeedEntryHeader entry={props.entry} expanded={props.expanded} />}
                </Box>
--- a/commafeed-client/src/locales/ar/messages.po
+++ b/commafeed-client/src/locales/ar/messages.po
@@ -681,6 +681,10 @@ msgstr "الاشتراك في موجز ويب"
 msgid "Success"
 msgstr "النجاح"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "التبديل إلى النسق الداكن"
--- a/commafeed-client/src/locales/ca/messages.po
+++ b/commafeed-client/src/locales/ca/messages.po
@@ -681,6 +681,10 @@ msgstr "Subscriu-te al canal"
 msgid "Success"
 msgstr "Éxit"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Canvia al tema fosc"
--- a/commafeed-client/src/locales/cs/messages.po
+++ b/commafeed-client/src/locales/cs/messages.po
@@ -681,6 +681,10 @@ msgstr "Přihlaste se k odběru kanálu"
 msgid "Success"
 msgstr "Úspěch"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Přepněte na tmavý motiv"
--- a/commafeed-client/src/locales/cy/messages.po
+++ b/commafeed-client/src/locales/cy/messages.po
@@ -681,6 +681,10 @@ msgstr "Tanysgrifio i'r porthiant"
 msgid "Success"
 msgstr "Llwyddiant"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Newid i thema dywyll"
--- a/commafeed-client/src/locales/da/messages.po
+++ b/commafeed-client/src/locales/da/messages.po
@@ -681,6 +681,10 @@ msgstr "Abonner på feedet"
 msgid "Success"
 msgstr "Succes"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Skift til mørkt tema"
--- a/commafeed-client/src/locales/de/messages.po
+++ b/commafeed-client/src/locales/de/messages.po
@@ -681,6 +681,10 @@ msgstr "Feed abonnieren"
 msgid "Success"
 msgstr "Erfolg"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Zum dunklen Design wechseln"
--- a/commafeed-client/src/locales/en/messages.po
+++ b/commafeed-client/src/locales/en/messages.po
@@ -681,6 +681,10 @@ msgstr "Subscribe to the feed"
 msgid "Success"
 msgstr "Success"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr "Swipe header to the right"
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Switch to dark theme"
--- a/commafeed-client/src/locales/es/messages.po
+++ b/commafeed-client/src/locales/es/messages.po
@@ -681,6 +681,10 @@ msgstr "Suscríbete a la fuente"
 msgid "Success"
 msgstr "Éxito"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Cambiar a tema oscuro"
--- a/commafeed-client/src/locales/fa/messages.po
+++ b/commafeed-client/src/locales/fa/messages.po
@@ -681,6 +681,10 @@ msgstr "در فید مشترک شوید"
 msgid "Success"
 msgstr "موفقیت"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "تغییر به تم تیره"
--- a/commafeed-client/src/locales/fi/messages.po
+++ b/commafeed-client/src/locales/fi/messages.po
@@ -681,6 +681,10 @@ msgstr "Tilaa syöte"
 msgid "Success"
 msgstr "Onnistui"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Vaihda tummaan teemaan"
--- a/commafeed-client/src/locales/fr/messages.po
+++ b/commafeed-client/src/locales/fr/messages.po
@@ -681,6 +681,10 @@ msgstr "S'abonner au flux"
 msgid "Success"
 msgstr "Succès"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr "Faire glisser le titre vers la droite"
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Activer le mode sombre"
--- a/commafeed-client/src/locales/gl/messages.po
+++ b/commafeed-client/src/locales/gl/messages.po
@@ -681,6 +681,10 @@ msgstr "Subscríbete ao feed"
 msgid "Success"
 msgstr "Éxito"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Cambiar ao tema escuro"
--- a/commafeed-client/src/locales/hu/messages.po
+++ b/commafeed-client/src/locales/hu/messages.po
@@ -681,6 +681,10 @@ msgstr "Feliratkozás a hírfolyamra"
 msgid "Success"
 msgstr "Siker"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Váltás sötét témára"
--- a/commafeed-client/src/locales/id/messages.po
+++ b/commafeed-client/src/locales/id/messages.po
@@ -681,6 +681,10 @@ msgstr "Berlangganan umpan"
 msgid "Success"
 msgstr "Sukses"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Beralih ke tema gelap"
--- a/commafeed-client/src/locales/it/messages.po
+++ b/commafeed-client/src/locales/it/messages.po
@@ -681,6 +681,10 @@ msgstr "Iscriviti al feed"
 msgid "Success"
 msgstr "Successo"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Passa al tema scuro"
--- a/commafeed-client/src/locales/ja/messages.po
+++ b/commafeed-client/src/locales/ja/messages.po
@@ -681,6 +681,10 @@ msgstr "フィードを購読する"
 msgid "Success"
 msgstr "成功"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "ダークテーマに切り替え"
--- a/commafeed-client/src/locales/ko/messages.po
+++ b/commafeed-client/src/locales/ko/messages.po
@@ -681,6 +681,10 @@ msgstr "피드 구독"
 msgid "Success"
 msgstr "성공"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "어두운 테마로 전환"
--- a/commafeed-client/src/locales/ms/messages.po
+++ b/commafeed-client/src/locales/ms/messages.po
@@ -681,6 +681,10 @@ msgstr "Langgan suapan"
 msgid "Success"
 msgstr "Kejayaan"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Tukar kepada tema gelap"
--- a/commafeed-client/src/locales/nb/messages.po
+++ b/commafeed-client/src/locales/nb/messages.po
@@ -681,6 +681,10 @@ msgstr "Abonner på feeden"
 msgid "Success"
 msgstr "Suksess"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Bytt til mørkt tema"
--- a/commafeed-client/src/locales/nl/messages.po
+++ b/commafeed-client/src/locales/nl/messages.po
@@ -681,6 +681,10 @@ msgstr "Abonneer je op de feed"
 msgid "Success"
 msgstr "Succes"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Overschakelen naar donker thema"
--- a/commafeed-client/src/locales/nn/messages.po
+++ b/commafeed-client/src/locales/nn/messages.po
@@ -681,6 +681,10 @@ msgstr "Abonner på feeden"
 msgid "Success"
 msgstr "Suksess"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Bytt til mørkt tema"
--- a/commafeed-client/src/locales/pl/messages.po
+++ b/commafeed-client/src/locales/pl/messages.po
@@ -681,6 +681,10 @@ msgstr "Subskrybuj kanał"
 msgid "Success"
 msgstr "Sukces"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Przełącz na ciemny motyw"
--- a/commafeed-client/src/locales/pt/messages.po
+++ b/commafeed-client/src/locales/pt/messages.po
@@ -681,6 +681,10 @@ msgstr "Inscrever-se no feed"
 msgid "Success"
 msgstr "Sucesso"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Mudar para tema escuro"
--- a/commafeed-client/src/locales/ru/messages.po
+++ b/commafeed-client/src/locales/ru/messages.po
@@ -681,6 +681,10 @@ msgstr "Подписаться на ленту"
 msgid "Success"
 msgstr "Успех"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Переключиться на темную тему"
--- a/commafeed-client/src/locales/sk/messages.po
+++ b/commafeed-client/src/locales/sk/messages.po
@@ -681,6 +681,10 @@ msgstr "Prihláste sa na odber kanála"
 msgid "Success"
 msgstr "Úspech"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Prepnúť na tmavú tému"
--- a/commafeed-client/src/locales/sv/messages.po
+++ b/commafeed-client/src/locales/sv/messages.po
@@ -681,6 +681,10 @@ msgstr "Prenumerera på flödet"
 msgid "Success"
 msgstr "Framgång"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Byt till mörkt tema"
--- a/commafeed-client/src/locales/tr/messages.po
+++ b/commafeed-client/src/locales/tr/messages.po
@@ -681,6 +681,10 @@ msgstr "beslemeye abone olun"
 msgid "Success"
 msgstr "Başarı"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "Karanlık temaya geç"
--- a/commafeed-client/src/locales/zh/messages.po
+++ b/commafeed-client/src/locales/zh/messages.po
@@ -681,6 +681,10 @@ msgstr "订阅订阅源"
 msgid "Success"
 msgstr "成功"

+#: src/components/KeyboardShortcutsHelp.tsx
+msgid "Swipe header to the right"
+msgstr ""
+
 #: src/components/header/ProfileMenu.tsx
 msgid "Switch to dark theme"
 msgstr "切换到深色主题"