feat(desktop): add error handling for fetching content in readability (#3567)

kovsu · Innei · web-flow · commit 65d97f425d35 · 2025-04-25T22:29:44.000+08:00
* feat(desktop): add error handling for fetching content in readability action

* feat(desktop): enhance entry item actions with copy functionality

- Added 'Copy Title' and 'Copy Link' actions to the entry item context menu.
- Adjusted layout spacing in the readability notice for improved UI consistency.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;

* feat(readability): enhance ReadabilityNotice component and add new icons

- Updated ReadabilityNotice component for improved UI and user experience, including a new button for retrying content fetching.
- Added new SVG and React Native icon for warning notifications.
- Modified localization string for better clarity on content fetching failure.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;

---------

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
Co-authored-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/src/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx b/apps/desktop/src/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx
@@ -111,6 +111,9 @@ export const EntryItemWrapper: FC<
               COMMAND_ID.entry.toggleAITranslation,
               COMMAND_ID.settings.customizeToolbar,
               COMMAND_ID.entry.readability,
+              // Copy
+              COMMAND_ID.entry.copyTitle,
+              COMMAND_ID.entry.copyLink,
             ].includes(item.id as any)
           }),
           MENU_ITEM_SEPARATOR,
@@ -122,6 +125,13 @@ export const EntryItemWrapper: FC<
           }),
 
           MENU_ITEM_SEPARATOR,
+          // Copy
+          ...actionConfigs.filter((item) => {
+            if (item instanceof MenuItemSeparator) {
+              return false
+            }
+            return [COMMAND_ID.entry.copyTitle, COMMAND_ID.entry.copyLink].includes(item.id as any)
+          }),
           new MenuItemText({
             label: `${t("words.copy")}${t("space")}${t("words.entry")} ${t("words.id")}`,
             click: () => {
diff --git a/apps/desktop/src/renderer/src/modules/entry-content/index.shared.tsx b/apps/desktop/src/renderer/src/modules/entry-content/index.shared.tsx
@@ -78,24 +78,48 @@ export const TitleMetaHandler: Component<{
 
 export const ReadabilityNotice = ({ entryId }: { entryId: string }) => {
   const { t } = useTranslation()
+  const { t: T } = useTranslation("common")
   const result = useEntryReadabilityContent(entryId)
   const isInReadability = useEntryIsInReadability(entryId)
+  const status = useEntryInReadabilityStatus(entryId)
+
   if (!isInReadability) {
     return null
   }
 
   return (
     <div className="grow">
       {result ? (
-        <p className="mb-4 rounded-xl border p-3 text-sm opacity-80">
-          <i className="i-mgc-information-cute-re mr-1 translate-y-[2px]" />
+        <p className="mb-4 flex items-center gap-2 rounded-lg border border-blue-100 bg-blue-50/30 p-3 text-sm text-blue-700 shadow-sm dark:border-blue-800/30 dark:bg-blue-900/10 dark:text-blue-300">
+          <i className="i-mgc-information-cute-re self-baseline text-lg" />
           {t("entry_content.readability_notice")}
         </p>
       ) : (
-        <div className="center mt-16 flex flex-col gap-2">
-          <LoadingWithIcon size="large" icon={<i className="i-mgc-docment-cute-re" />} />
-          <span className="text-sm">{t("entry_content.fetching_content")}</span>
-        </div>
+        <>
+          {status === ReadabilityStatus.FAILURE ? (
+            <div className="center mt-36 flex flex-col items-center gap-3">
+              <i className="i-mgc-warning-cute-re text-red text-4xl" />
+              <span className="text-balance text-center text-sm">
+                {t("entry_content.fetching_content_failed")}
+              </span>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setReadabilityStatus({
+                    [entryId]: ReadabilityStatus.INITIAL,
+                  })
+                }}
+              >
+                {T("words.back")}
+              </Button>
+            </div>
+          ) : (
+            <div className="center mt-32 flex flex-col gap-2">
+              <LoadingWithIcon size="large" icon={<i className="i-mgc-docment-cute-re" />} />
+              <span className="text-sm">{t("entry_content.fetching_content")}</span>
+            </div>
+          )}
+        </>
       )}
     </div>
   )
diff --git a/apps/mobile/src/icons/warning_cute_re.tsx b/apps/mobile/src/icons/warning_cute_re.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface WarningCuteReIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const WarningCuteReIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: WarningCuteReIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path
+        d="M11.28 2.024c-2.109.185-3.979.926-5.561 2.201-1.675 1.351-2.908 3.28-3.416 5.346-.216.881-.277 1.41-.277 2.429s.061 1.548.277 2.429c.886 3.607 3.839 6.502 7.457 7.311.844.189 1.287.236 2.24.236.953 0 1.396-.047 2.24-.236 3.618-.809 6.571-3.704 7.457-7.311.213-.869.276-1.413.278-2.409.001-.976-.043-1.404-.235-2.26-.458-2.049-1.658-4.025-3.26-5.369-1.824-1.531-3.915-2.321-6.26-2.368a15.89 15.89 0 0 0-.94.001m1.54 2.017c2.788.311 5.174 1.99 6.38 4.488a7.95 7.95 0 0 1-.001 6.945A8.02 8.02 0 0 1 12 19.999a8.014 8.014 0 0 1-7.2-4.528 7.948 7.948 0 0 1 0-6.942A7.973 7.973 0 0 1 8.529 4.8c1.323-.64 2.886-.916 4.291-.759m-1.177 2.028a1.118 1.118 0 0 0-.343.229c-.313.313-.3.157-.3 3.702 0 3.544-.013 3.39.299 3.701.18.18.459.299.701.299.242 0 .521-.119.701-.299.312-.311.299-.157.299-3.701s.013-3.39-.299-3.701a.998.998 0 0 0-1.058-.23m0 9c-.352.124-.643.545-.643.931 0 .242.119.521.299.701a.993.993 0 0 0 1.57-.212c.095-.161.111-.233.111-.489s-.016-.328-.111-.489a1.006 1.006 0 0 0-1.226-.442"
+        fill={color}
+        fillRule="evenodd"
+      />
+    </Svg>
+  )
+}
diff --git a/icons/mgc/warning_cute_re.svg b/icons/mgc/warning_cute_re.svg
@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M11.28 2.024c-2.109.185-3.979.926-5.561 2.201-1.675 1.351-2.908 3.28-3.416 5.346-.216.881-.277 1.41-.277 2.429s.061 1.548.277 2.429c.886 3.607 3.839 6.502 7.457 7.311.844.189 1.287.236 2.24.236.953 0 1.396-.047 2.24-.236 3.618-.809 6.571-3.704 7.457-7.311.213-.869.276-1.413.278-2.409.001-.976-.043-1.404-.235-2.26-.458-2.049-1.658-4.025-3.26-5.369-1.824-1.531-3.915-2.321-6.26-2.368a15.89 15.89 0 0 0-.94.001m1.54 2.017c2.788.311 5.174 1.99 6.38 4.488a7.95 7.95 0 0 1-.001 6.945A8.02 8.02 0 0 1 12 19.999a8.014 8.014 0 0 1-7.2-4.528 7.948 7.948 0 0 1 0-6.942A7.973 7.973 0 0 1 8.529 4.8c1.323-.64 2.886-.916 4.291-.759m-1.177 2.028a1.118 1.118 0 0 0-.343.229c-.313.313-.3.157-.3 3.702 0 3.544-.013 3.39.299 3.701.18.18.459.299.701.299.242 0 .521-.119.701-.299.312-.311.299-.157.299-3.701s.013-3.39-.299-3.701a.998.998 0 0 0-1.058-.23m0 9c-.352.124-.643.545-.643.931 0 .242.119.521.299.701a.993.993 0 0 0 1.57-.212c.095-.161.111-.233.111-.489s-.016-.328-.111-.489a1.006 1.006 0 0 0-1.226-.442" fill="#10161F" fill-rule="evenodd"/></svg>
diff --git a/locales/app/en.json b/locales/app/en.json
@@ -130,6 +130,7 @@
   "entry_column.refreshing": "Refreshing new entries...",
   "entry_content.ai_summary": "AI summary",
   "entry_content.fetching_content": "Fetching original content and processing...",
+  "entry_content.fetching_content_failed": "Readability: Failed to fetch original content, try again later or back to the RSS content.",
   "entry_content.header.play_tts": "Play TTS",
   "entry_content.header.readability": "Readability",
   "entry_content.header.readability_description": "Using readability's ability to obtain the original website content and parse it may allow for more readable content. Recommended to use it when the RSS content is not available or incomplete.",
diff --git a/locales/app/zh-CN.json b/locales/app/zh-CN.json
@@ -130,6 +130,7 @@
   "entry_column.refreshing": "正在刷新",
   "entry_content.ai_summary": "AI 总结",
   "entry_content.fetching_content": "正在获取原始内容并处理",
+  "entry_content.fetching_content_failed": "获取原始内容失败",
   "entry_content.header.play_tts": "播放文本转语音",
   "entry_content.header.readability": "阅读模式",
   "entry_content.header.readability_description": "利用 Readability 获取原始网站内容并解析的能力或可提升内容可读性。建议在 RSS 内容不可用或不完整时使用。",
