feat(mark-all-button): add countdown to auto-confirm message (#1414)

RSSNext · Nov 5, 2024 · e1a5fc6 · e1a5fc6
1 parent 51a4bd2
commit e1a5fc6
Show file tree

Hide file tree

Showing 21 changed files with 34 additions and 22 deletions.
diff --git a/apps/renderer/src/modules/entry-column/components/mark-all-button.tsx b/apps/renderer/src/modules/entry-column/components/mark-all-button.tsx
@@ -4,7 +4,7 @@ import { RootPortal } from "@follow/components/ui/portal/index.jsx"
 import { cn, getOS } from "@follow/utils/utils"
 import { AnimatePresence, m } from "framer-motion"
 import type { FC, ReactNode } from "react"
-import { forwardRef, Fragment, useState } from "react"
+import { forwardRef, Fragment, useEffect, useState } from "react"
 import { useHotkeys } from "react-hotkeys-hook"
 import { Trans, useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -186,14 +186,26 @@ const Popup = ({ which, containerRef, setPopoverRef, setShow, handleMarkAllAsRea
 
 const ConfirmMarkAllReadInfo = ({ undo }: { undo: () => any }) => {
   const { t } = useTranslation()
+  const [countdown, setCountdown] = useState(3)
+
   useHotkeys("ctrl+z,meta+z", undo, {
     scopes: HotKeyScopeMap.Home,
     preventDefault: true,
   })
+
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setTimeout(() => setCountdown(countdown - 1), 1000)
+      return () => clearTimeout(timer)
+    }
+  }, [countdown])
+
   return (
     <div>
       <p>{t("mark_all_read_button.confirm_mark_all_info")}</p>
-      <small className="opacity-50">{t("mark_all_read_button.auto_confirm_info")}</small>
+      <small className="opacity-50">
+        {t("mark_all_read_button.auto_confirm_info", { countdown })}
+      </small>
     </div>
   )
 }

diff --git a/locales/app/ar-DZ.json b/locales/app/ar-DZ.json
@@ -104,7 +104,7 @@
   "feed_view_type.pictures": "صور",
   "feed_view_type.social_media": "وسائل التواصل الاجتماعي",
   "feed_view_type.videos": "فيديوهات",
-  "mark_all_read_button.auto_confirm_info": "سيتم التأكيد تلقائيًا بعد 3 ثوانٍ.",
+  "mark_all_read_button.auto_confirm_info": "سيتم التأكيد تلقائيًا بعد {{countdown}} ثوانٍ.",
   "mark_all_read_button.confirm": "تأكيد",
   "mark_all_read_button.confirm_mark_all": "هل تريد تحديد <which /> كمقروء؟",
   "mark_all_read_button.confirm_mark_all_info": "تأكيد تحديد الكل كمقروء؟",

diff --git a/locales/app/ar-IQ.json b/locales/app/ar-IQ.json
@@ -108,7 +108,7 @@
   "feed_view_type.pictures": "صور",
   "feed_view_type.social_media": "وسائل التواصل الاجتماعي",
   "feed_view_type.videos": "فيديوهات",
-  "mark_all_read_button.auto_confirm_info": "سيتم التأكيد تلقائيًا بعد 3 ثوانٍ.",
+  "mark_all_read_button.auto_confirm_info": "سيتم التأكيد تلقائيًا بعد {{countdown}} ثوانٍ.",
   "mark_all_read_button.confirm": "تأكيد",
   "mark_all_read_button.confirm_mark_all": "تحديد <which /> كمقروء؟",
   "mark_all_read_button.confirm_mark_all_info": "تأكيد تحديد الكل كمقروء؟",

diff --git a/locales/app/ar-KW.json b/locales/app/ar-KW.json
@@ -108,7 +108,7 @@
   "feed_view_type.pictures": "صور",
   "feed_view_type.social_media": "وسائل التواصل الاجتماعي",
   "feed_view_type.videos": "فيديوهات",
-  "mark_all_read_button.auto_confirm_info": "سيتم التأكيد تلقائيًا بعد 3 ثوانٍ.",
+  "mark_all_read_button.auto_confirm_info": "سيتم التأكيد تلقائيًا بعد {{countdown}} ثوانٍ.",
   "mark_all_read_button.confirm": "تأكيد",
   "mark_all_read_button.confirm_mark_all": "وضع علامة <which /> كمقروء؟",
   "mark_all_read_button.confirm_mark_all_info": "تأكيد وضع علامة الجميع كمقروء؟",

diff --git a/locales/app/ar-MA.json b/locales/app/ar-MA.json
@@ -104,7 +104,7 @@
   "feed_view_type.pictures": "صور",
   "feed_view_type.social_media": "وسائل التواصل الاجتماعي",
   "feed_view_type.videos": "فيديوهات",
-  "mark_all_read_button.auto_confirm_info": "سيتم التأكيد تلقائيًا بعد 3 ثوانٍ.",
+  "mark_all_read_button.auto_confirm_info": "سيتم التأكيد تلقائيًا بعد {{countdown}} ثوانٍ.",
   "mark_all_read_button.confirm": "تأكيد",
   "mark_all_read_button.confirm_mark_all": "وضع علامة على <which /> كمقروء؟",
   "mark_all_read_button.confirm_mark_all_info": "تأكيد وضع علامة على الكل كمقروء؟",

diff --git a/locales/app/ar-SA.json b/locales/app/ar-SA.json
@@ -101,7 +101,7 @@
   "feed_view_type.pictures": "صور",
   "feed_view_type.social_media": "وسائل التواصل الاجتماعي",
   "feed_view_type.videos": "فيديوهات",
-  "mark_all_read_button.auto_confirm_info": "سيتم التأكيد تلقائيًا بعد 3 ثوانٍ.",
+  "mark_all_read_button.auto_confirm_info": "سيتم التأكيد تلقائيًا بعد {{countdown}} ثوانٍ.",
   "mark_all_read_button.confirm": "تأكيد",
   "mark_all_read_button.confirm_mark_all": "تمييز <which /> كمقروء؟",
   "mark_all_read_button.confirm_mark_all_info": "هل ترغب في تأكيد تمييز الكل كمقروء؟",

diff --git a/locales/app/ar-TN.json b/locales/app/ar-TN.json
@@ -105,7 +105,7 @@
   "feed_view_type.pictures": "صور",
   "feed_view_type.social_media": "وسائل التواصل الاجتماعي",
   "feed_view_type.videos": "مقاطع فيديو",
-  "mark_all_read_button.auto_confirm_info": "سيتم التأكيد تلقائيًا بعد 3 ثوانٍ.",
+  "mark_all_read_button.auto_confirm_info": "سيتم التأكيد تلقائيًا بعد {{countdown}} ثوانٍ.",
   "mark_all_read_button.confirm": "تأكيد",
   "mark_all_read_button.confirm_mark_all": "وضع علامة <which /> كمقروء؟",
   "mark_all_read_button.confirm_mark_all_info": "تأكيد وضع الجميع كمقروء؟",

diff --git a/locales/app/de.json b/locales/app/de.json
@@ -108,7 +108,7 @@
   "feed_view_type.pictures": "Bilder",
   "feed_view_type.social_media": "Soziale Medien",
   "feed_view_type.videos": "Videos",
-  "mark_all_read_button.auto_confirm_info": "Wird nach 3 Sekunden automatisch bestätigt.",
+  "mark_all_read_button.auto_confirm_info": "Wird nach {{countdown}} Sekunden automatisch bestätigt.",
   "mark_all_read_button.confirm": "Bestätigen",
   "mark_all_read_button.confirm_mark_all": "<which /> als gelesen markieren?",
   "mark_all_read_button.confirm_mark_all_info": "Möchten Sie alle als gelesen markieren?",

diff --git a/locales/app/en.json b/locales/app/en.json
@@ -195,7 +195,7 @@
   "feed_view_type.pictures": "Pictures",
   "feed_view_type.social_media": "Social Media",
   "feed_view_type.videos": "Videos",
-  "mark_all_read_button.auto_confirm_info": "Will be confirmed automatically after 3s.",
+  "mark_all_read_button.auto_confirm_info": "Will be confirmed automatically after {{countdown}}s.",
   "mark_all_read_button.confirm": "Confirm",
   "mark_all_read_button.confirm_mark_all": "Mark <which /> as read?",
   "mark_all_read_button.confirm_mark_all_info": "Confirm mark all as read?",

diff --git a/locales/app/es.json b/locales/app/es.json
@@ -70,7 +70,7 @@
   "feed_view_type.pictures": "Imágenes",
   "feed_view_type.social_media": "Redes Sociales",
   "feed_view_type.videos": "Videos",
-  "mark_all_read_button.auto_confirm_info": "Confirmación automática después de 3 segundos.",
+  "mark_all_read_button.auto_confirm_info": "Confirmación automática después de {{countdown}} segundos.",
   "mark_all_read_button.confirm": "Confirmar",
   "mark_all_read_button.confirm_mark_all": "¿Marcar <which /> como leído?",
   "mark_all_read_button.confirm_mark_all_info": "¿Confirmar marcar todo como leído?",

diff --git a/locales/app/fi.json b/locales/app/fi.json
@@ -101,7 +101,7 @@
   "feed_view_type.pictures": "Kuvat",
   "feed_view_type.social_media": "Sosiaalinen media",
   "feed_view_type.videos": "Videot",
-  "mark_all_read_button.auto_confirm_info": "Vahvistetaan automaattisesti 3 sekunnin kuluttua.",
+  "mark_all_read_button.auto_confirm_info": "Vahvistetaan automaattisesti {{countdown}} sekunnin kuluttua.",
   "mark_all_read_button.confirm": "Vahvista",
   "mark_all_read_button.confirm_mark_all": "Merkitäänkö <which /> luetuksi?",
   "mark_all_read_button.confirm_mark_all_info": "Vahvista kaikki merkinnät luetuiksi?",

diff --git a/locales/app/fr.json b/locales/app/fr.json
@@ -101,7 +101,7 @@
   "feed_view_type.pictures": "Images",
   "feed_view_type.social_media": "Réseaux sociaux",
   "feed_view_type.videos": "Vidéos",
-  "mark_all_read_button.auto_confirm_info": "Sera confirmé automatiquement après 3s.",
+  "mark_all_read_button.auto_confirm_info": "Sera confirmé automatiquement après {{countdown}}s.",
   "mark_all_read_button.confirm": "Confirmer",
   "mark_all_read_button.confirm_mark_all": "Marquer <which /> comme lu ?",
   "mark_all_read_button.confirm_mark_all_info": "Confirmez que vous voulez tout marquer comme lu ?",

diff --git a/locales/app/it.json b/locales/app/it.json
@@ -101,7 +101,7 @@
   "feed_view_type.pictures": "Immagini",
   "feed_view_type.social_media": "Social Media",
   "feed_view_type.videos": "Video",
-  "mark_all_read_button.auto_confirm_info": "Sarà confermato automaticamente dopo 3s.",
+  "mark_all_read_button.auto_confirm_info": "Sarà confermato automaticamente dopo {{countdown}}s.",
   "mark_all_read_button.confirm": "Conferma",
   "mark_all_read_button.confirm_mark_all": "Segna <which /> come letto?",
   "mark_all_read_button.confirm_mark_all_info": "Confermi di segnare tutto come letto?",

diff --git a/locales/app/ja.json b/locales/app/ja.json
@@ -190,7 +190,7 @@
   "feed_view_type.pictures": "画像",
   "feed_view_type.social_media": "ソーシャルメディア",
   "feed_view_type.videos": "動画",
-  "mark_all_read_button.auto_confirm_info": "3 秒後に自動的に確認されます。",
+  "mark_all_read_button.auto_confirm_info": "{{countdown}} 秒後に自動的に確認されます。",
   "mark_all_read_button.confirm": "確認",
   "mark_all_read_button.confirm_mark_all": "<which />を既読にしますか？",
   "mark_all_read_button.confirm_mark_all_info": "すべてを既読にしますか？",

diff --git a/locales/app/ko.json b/locales/app/ko.json
@@ -121,7 +121,7 @@
   "feed_view_type.pictures": "사진",
   "feed_view_type.social_media": "소셜 미디어",
   "feed_view_type.videos": "비디오",
-  "mark_all_read_button.auto_confirm_info": "3 초 후 자동으로 확인됩니다.",
+  "mark_all_read_button.auto_confirm_info": "{{countdown}} 초 후 자동으로 확인됩니다.",
   "mark_all_read_button.confirm": "확인",
   "mark_all_read_button.confirm_mark_all": "<which />을 (를) 모두 읽음으로 표시하시겠습니까?",
   "mark_all_read_button.confirm_mark_all_info": "모두 읽음으로 표시하시겠습니까?",

diff --git a/locales/app/pt.json b/locales/app/pt.json
@@ -101,7 +101,7 @@
   "feed_view_type.pictures": "画像",
   "feed_view_type.social_media": "ソーシャルメディア",
   "feed_view_type.videos": "動画",
-  "mark_all_read_button.auto_confirm_info": "3 秒後に自動的に確認されます。",
+  "mark_all_read_button.auto_confirm_info": "{{countdown}} 秒後に自動的に確認されます。",
   "mark_all_read_button.confirm": "確認",
   "mark_all_read_button.confirm_mark_all": "<which />を既読にしますか？",
   "mark_all_read_button.confirm_mark_all_info": "すべてを既読にしますか？",

diff --git a/locales/app/ru.json b/locales/app/ru.json
@@ -101,7 +101,7 @@
   "feed_view_type.pictures": "Картинки",
   "feed_view_type.social_media": "Социальные сети",
   "feed_view_type.videos": "Видео",
-  "mark_all_read_button.auto_confirm_info": "Будет автоматически подтверждено через 3 секунды.",
+  "mark_all_read_button.auto_confirm_info": "Будет автоматически подтверждено через {{countdown}} секунды.",
   "mark_all_read_button.confirm": "Подтвердить",
   "mark_all_read_button.confirm_mark_all": "Отметить <which /> как прочитанное?",
   "mark_all_read_button.confirm_mark_all_info": "Подтвердить отметку всего как прочитанное?",

diff --git a/locales/app/tr.json b/locales/app/tr.json
@@ -121,7 +121,7 @@
   "feed_view_type.pictures": "Resimler",
   "feed_view_type.social_media": "Sosyal Medya",
   "feed_view_type.videos": "Videolar",
-  "mark_all_read_button.auto_confirm_info": "3 saniye sonra otomatik olarak onaylanacak.",
+  "mark_all_read_button.auto_confirm_info": "{{countdown}} saniye sonra otomatik olarak onaylanacak.",
   "mark_all_read_button.confirm": "Onayla",
   "mark_all_read_button.confirm_mark_all": "<which /> okundu olarak işaretlensin mi?",
   "mark_all_read_button.confirm_mark_all_info": "Tümünü okundu olarak işaretlemeyi onaylıyor musunuz?",

diff --git a/locales/app/zh-CN.json b/locales/app/zh-CN.json
@@ -195,7 +195,7 @@
   "feed_view_type.pictures": "图片",
   "feed_view_type.social_media": "社交媒体",
   "feed_view_type.videos": "视频",
-  "mark_all_read_button.auto_confirm_info": "3 秒后自动确认",
+  "mark_all_read_button.auto_confirm_info": "{{countdown}} 秒后自动确认",
   "mark_all_read_button.confirm": "确认",
   "mark_all_read_button.confirm_mark_all": "将 <which /> 标记为已读？",
   "mark_all_read_button.confirm_mark_all_info": "确认将全部标记为已读？",

diff --git a/locales/app/zh-HK.json b/locales/app/zh-HK.json
@@ -185,7 +185,7 @@
   "feed_view_type.pictures": "圖片",
   "feed_view_type.social_media": "社交媒體",
   "feed_view_type.videos": "影片",
-  "mark_all_read_button.auto_confirm_info": "將在 3 秒後自動確認",
+  "mark_all_read_button.auto_confirm_info": "將在 {{countdown}} 秒後自動確認",
   "mark_all_read_button.confirm": "確認",
   "mark_all_read_button.confirm_mark_all": "確定將 <which /> 標記為已讀？",
   "mark_all_read_button.confirm_mark_all_info": "確定將所有標記為已讀？",

diff --git a/locales/app/zh-TW.json b/locales/app/zh-TW.json
@@ -185,7 +185,7 @@
   "feed_view_type.pictures": "圖片",
   "feed_view_type.social_media": "社交媒體",
   "feed_view_type.videos": "影片",
-  "mark_all_read_button.auto_confirm_info": "將在 3 秒後自動確認。",
+  "mark_all_read_button.auto_confirm_info": "將在 {{countdown}} 秒後自動確認。",
   "mark_all_read_button.confirm": "確認",
   "mark_all_read_button.confirm_mark_all": "將 <which /> 標記為已讀？",
   "mark_all_read_button.confirm_mark_all_info": "確認將全部標記為已讀？",