From a3a6a2aedbaebad60e8b2ccc67f1748731ef3fb7 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 20 Aug 2025 22:51:44 +0800
Subject: [PATCH] feat(desktop): add semi-transparent overlay for exiting entry
 detail view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When viewing entry details in wide mode, a semi-transparent overlay is now displayed over the subscription list area. This overlay includes:
- Visual indication with semi-transparent background and blur effect
- Exit hint with arrow icon and text prompting users to click to return
- Click anywhere on the overlay to navigate back to the entry list
- Multi-language support (EN, ZH-CN, JA)

This improves UX by providing a clear and intuitive way to exit the detail view.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../SubscriptionColumn.tsx                    | 24 ++++++++++++++++++-
 locales/app/en.json                           |  2 ++
 locales/app/ja.json                           |  2 ++
 locales/app/zh-CN.json                        |  2 ++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/apps/desktop/layer/renderer/src/modules/app-layout/subscription-column/SubscriptionColumn.tsx b/apps/desktop/layer/renderer/src/modules/app-layout/subscription-column/SubscriptionColumn.tsx
index 24a505812..a13ab9621 100644
--- a/apps/desktop/layer/renderer/src/modules/app-layout/subscription-column/SubscriptionColumn.tsx
+++ b/apps/desktop/layer/renderer/src/modules/app-layout/subscription-column/SubscriptionColumn.tsx
@@ -22,6 +22,8 @@ import {
   useTimelineColumnTempShow,
 } from "~/atoms/sidebar"
 import { FloatingLayerScope } from "~/constants"
+import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
+import { useRouteParams } from "~/hooks/biz/useRouteParams"
 import { useBatchUpdateSubscription } from "~/hooks/biz/useSubscriptionActions"
 import { useI18n } from "~/hooks/common"
 import { NetworkStatusIndicator } from "~/modules/app/NetworkStatusIndicator"
@@ -103,6 +105,9 @@ const FeedResponsiveResizerContainer = ({
 
   const feedColumnShow = useTimelineColumnShow()
   const feedColumnTempShow = useTimelineColumnTempShow()
+  const { entryId, isPendingEntry } = useRouteParams()
+  const navigate = useNavigateEntry()
+  const t = useI18n()
 
   useEffect(() => {
     if (feedColumnShow) {
@@ -165,7 +170,6 @@ const FeedResponsiveResizerContainer = ({
       timer = clearTimeout(timer)
     }
   }, [feedColumnShow])
-  const t = useI18n()
 
   return (
     <>
@@ -185,6 +189,24 @@ const FeedResponsiveResizerContainer = ({
         }}
       >
         <Slot className={!feedColumnShow ? "!bg-sidebar" : ""}>{children}</Slot>
+
+        {/* Semi-transparent overlay with exit hint when in wide mode with entry selected */}
+        {entryId && !isPendingEntry && (
+          <div
+            className="absolute inset-0 z-20 cursor-pointer bg-white/50 backdrop-blur-[2px] transition-colors duration-200 hover:bg-white/70"
+            onClick={() => navigate({ entryId: null })}
+          >
+            <div className="flex items-center justify-center px-4 pt-16">
+              <div className="flex flex-col items-center gap-2 rounded-lg px-4 py-3">
+                <div className="text-text flex items-center gap-2">
+                  <i className="i-mgc-arrow-left-cute-re text-lg" />
+                  <span className="text-sm font-medium">{t("entry.exit_detail")}</span>
+                </div>
+                <span className="text-text-secondary text-xs">{t("entry.click_to_return")}</span>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
 
       <div
diff --git a/locales/app/en.json b/locales/app/en.json
index 3dfc2e899..468580ec8 100644
--- a/locales/app/en.json
+++ b/locales/app/en.json
@@ -111,6 +111,8 @@
   "discover.target.feeds": "Feeds",
   "discover.target.label": "Search for",
   "discover.target.lists": "Lists",
+  "entry.click_to_return": "Click to return to entry list",
+  "entry.exit_detail": "Exit Detail View",
   "entry_actions.copied_notify": "{{which}} copied to clipboard.",
   "entry_actions.copy_link": "Copy Link",
   "entry_actions.copy_title": "Copy Title",
diff --git a/locales/app/ja.json b/locales/app/ja.json
index ced32e46f..4d5c29afe 100644
--- a/locales/app/ja.json
+++ b/locales/app/ja.json
@@ -111,6 +111,8 @@
   "discover.target.feeds": "フィード",
   "discover.target.label": "検索対象",
   "discover.target.lists": "リスト",
+  "entry.click_to_return": "クリックしてエントリリストに戻る",
+  "entry.exit_detail": "詳細を終了",
   "entry_actions.copied_notify": "{{which}} をクリップボードにコピーしました。",
   "entry_actions.copy_link": "リンクをコピー",
   "entry_actions.copy_title": "タイトルをコピー",
diff --git a/locales/app/zh-CN.json b/locales/app/zh-CN.json
index ceb6a9d69..0804025ff 100644
--- a/locales/app/zh-CN.json
+++ b/locales/app/zh-CN.json
@@ -111,6 +111,8 @@
   "discover.target.feeds": "订阅源",
   "discover.target.label": "搜索",
   "discover.target.lists": "列表",
+  "entry.click_to_return": "点击返回条目列表",
+  "entry.exit_detail": "退出详情",
   "entry_actions.copied_notify": "{{which}}已复制到剪贴板。",
   "entry_actions.copy_link": "复制链接",
   "entry_actions.copy_title": "复制标题",