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

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",

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"
     },

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>

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>

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 "التبديل إلى النسق الداكن"

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"

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"

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"

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"

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"

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"

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"

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 "تغییر به تم تیره"

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"

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"

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"

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"

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"

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"

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 "ダークテーマに切り替え"

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 "어두운 테마로 전환"

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"

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"

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"

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"

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"

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"

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 "Переключиться на темную тему"

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"

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"

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ç"

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 "切换到深色主题"