fix: i18n key and dark mode in wide mode and transition other ux fix

Signed-off-by: Innei <[email protected]>

apps/renderer/src/atoms/sidebar.ts

@@ -49,3 +49,5 @@ viewAtom.onMount = () => {
   }
 }
 export const [, , useFeedColumnShow, , , setFeedColumnShow] = createAtomHooks(atom(true))
+
+export const [, , useFeedColumnTempShow, , , setFeedColumnTempShow] = createAtomHooks(atom(false))

apps/renderer/src/modules/entry-content/index.tsx

@@ -51,14 +51,19 @@ import { EntryHeader } from "./header"
 import { EntryContentLoading } from "./loading"
 import { EntryContentProvider } from "./provider"
 
+export interface EntryContentClassNames {
+  header?: string
+}
 export const EntryContent = ({
   entryId,
   noMedia,
   compact,
+  classNames,
 }: {
   entryId: ActiveEntryId
   noMedia?: boolean
   compact?: boolean
+  classNames?: EntryContentClassNames
 }) => {
   const title = useFeedHeaderTitle()
   const { feedId, view } = useRouteParams()
@@ -79,14 +84,22 @@ export const EntryContent = ({
     )
   }
 
-  return <EntryContentRender entryId={entryId} noMedia={noMedia} compact={compact} />
+  return (
+    <EntryContentRender
+      entryId={entryId}
+      noMedia={noMedia}
+      compact={compact}
+      classNames={classNames}
+    />
+  )
 }
 
 export const EntryContentRender: Component<{
   entryId: string
   noMedia?: boolean
   compact?: boolean
-}> = ({ entryId, noMedia, className, compact }) => {
+  classNames?: EntryContentClassNames
+}> = ({ entryId, noMedia, className, compact, classNames }) => {
   const { t } = useTranslation()
 
   const entry = useEntry(entryId)
@@ -179,7 +192,7 @@ export const EntryContentRender: Component<{
       <EntryHeader
         entryId={entry.entries.id}
         view={0}
-        className="h-[55px] shrink-0 px-3 @container"
+        className={cn("h-[55px] shrink-0 px-3 @container", classNames?.header)}
         compact={compact}
       />
 

apps/renderer/src/modules/feed-column/auto-updater.tsx

@@ -67,7 +67,7 @@ export const AutoUpdater = () => {
           } as any
         }
       />
-      <div className="font-medium">{t("notify.update_info", { APP_NAME })}</div>
+      <div className="font-medium">{t("notify.update_info", { app_name: APP_NAME })}</div>
       <div className="text-xs text-zinc-500">{t("notify.update_info_1")}</div>
     </m.div>
   )

apps/renderer/src/pages/(main)/(layer)/feeds/[feedId]/[entryId]/index.tsx

@@ -2,6 +2,8 @@ import { AnimatePresence } from "framer-motion"
 import { useParams } from "react-router-dom"
 
 import { useUISettingKey } from "~/atoms/settings/ui"
+import { useFeedColumnShow, useFeedColumnTempShow } from "~/atoms/sidebar"
+import { m } from "~/components/common/Motion"
 import { ActionButton } from "~/components/ui/button"
 import { ROUTE_ENTRY_PENDING, views } from "~/constants"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
@@ -19,28 +21,48 @@ export const Component = () => {
   const realEntryId = entryId === ROUTE_ENTRY_PENDING ? "" : entryId
   const disable = views[view].wideMode || (settingWideMode && !realEntryId)
   const wideMode = settingWideMode && realEntryId
+  const feedColumnTempShow = useFeedColumnTempShow()
+  const feedColumnShow = useFeedColumnShow()
+  const shouldHeaderPaddingLeft = feedColumnTempShow && !feedColumnShow
 
   return (
     <AnimatePresence>
       <AppLayoutGridContainerProvider>
-        {!disable && (
-          <div
-            className={cn(
-              "flex min-w-0 flex-1 flex-col",
-              wideMode && "absolute inset-0 z-10 bg-white pl-12",
-            )}
-          >
-            {wideMode && (
-              <ActionButton
-                className="absolute left-2.5 top-2.5 z-10"
-                onClick={() => navigate({ entryId: null })}
-              >
-                <i className="i-mgc-close-cute-re text-2xl" />
-              </ActionButton>
-            )}
-            <EntryContent entryId={realEntryId} />
-          </div>
-        )}
+        <AnimatePresence>
+          {!disable && (
+            <m.div
+              // slide up
+              initial={{ opacity: 0, y: 100 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 100 }}
+              transition={{ duration: 0.2, type: "spring" }}
+              className={cn(
+                "flex min-w-0 flex-1 flex-col",
+                wideMode && "absolute inset-0 z-10 bg-theme-background pl-12",
+              )}
+            >
+              {wideMode && (
+                <ActionButton
+                  className={cn(
+                    "absolute left-3 top-3 z-10",
+                    shouldHeaderPaddingLeft
+                      ? "left-[calc(theme(width.3)+theme(width.feed-col))]"
+                      : "left-3",
+                  )}
+                  onClick={() => navigate({ entryId: null })}
+                >
+                  <i className="i-mgc-close-cute-re size-5" />
+                </ActionButton>
+              )}
+              <EntryContent
+                entryId={realEntryId}
+                classNames={{
+                  header: shouldHeaderPaddingLeft ? "ml-[theme(width.feed-col)]" : "",
+                }}
+              />
+            </m.div>
+          )}
+        </AnimatePresence>
       </AppLayoutGridContainerProvider>
     </AnimatePresence>
   )

apps/renderer/src/pages/(main)/layout.tsx

@@ -2,16 +2,21 @@ import { repository } from "@pkg"
 import { Slot } from "@radix-ui/react-slot"
 import { throttle } from "lodash-es"
 import type { PropsWithChildren } from "react"
-import React, { useEffect, useRef, useState } from "react"
+import React, { forwardRef, useEffect, useRef, useState } from "react"
 import { useHotkeys } from "react-hotkeys-hook"
 import { Trans, useTranslation } from "react-i18next"
 import { useResizable } from "react-resizable-layout"
 import { Outlet } from "react-router-dom"
 
 import { setMainContainerElement } from "~/atoms/dom"
 import { useViewport } from "~/atoms/hooks/viewport"
-import { getUISettings, setUISetting } from "~/atoms/settings/ui"
-import { setFeedColumnShow, useFeedColumnShow } from "~/atoms/sidebar"
+import { getUISettings, setUISetting, useUISettingKey } from "~/atoms/settings/ui"
+import {
+  setFeedColumnShow,
+  setFeedColumnTempShow,
+  useFeedColumnShow,
+  useFeedColumnTempShow,
+} from "~/atoms/sidebar"
 import { useLoginModalShow, useWhoami } from "~/atoms/user"
 import { AppErrorBoundary } from "~/components/common/AppErrorBoundary"
 import { ErrorComponentType } from "~/components/errors/enum"
@@ -88,7 +93,7 @@ export function Component() {
     return (
       <div className="center fixed inset-0 flex-col text-balance px-4 text-center">
         <i className="i-mingcute-device-line mb-2 size-16 text-muted-foreground" />
-        <div>{t("notify.unSupportWidth", { APP_NAME })}</div>
+        <div>{t("notify.unSupportWidth", { app_name: APP_NAME })}</div>
         <div>
           <Trans
             i18nKey="notify.unSupportWidth_1"
@@ -111,19 +116,15 @@ export function Component() {
                 </a>
               ),
             }}
-            values={{ APP_NAME }}
+            values={{ app_name: APP_NAME }}
           />
         </div>
       </div>
     )
   }
 
   return (
-    <div
-      className="flex h-screen overflow-hidden"
-      ref={containerRef}
-      onContextMenu={preventDefault}
-    >
+    <RootContainer ref={containerRef}>
       {!import.meta.env.PROD && <EnvironmentIndicator />}
 
       <AppLayoutGridContainerProvider>
@@ -168,10 +169,28 @@ export function Component() {
           </DeclarativeModal>
         </RootPortal>
       )}
-    </div>
+    </RootContainer>
   )
 }
 
+const RootContainer = forwardRef<HTMLDivElement, PropsWithChildren>(({ children }, ref) => {
+  const feedColWidth = useUISettingKey("feedColWidth")
+  return (
+    <div
+      ref={ref}
+      style={
+        {
+          "--fo-feed-col-w": `${feedColWidth}px`,
+        } as any
+      }
+      className="flex h-screen overflow-hidden"
+      onContextMenu={preventDefault}
+    >
+      {children}
+    </div>
+  )
+})
+
 const FeedResponsiveResizerContainer = ({
   containerRef,
   children,
@@ -191,11 +210,15 @@ const FeedResponsiveResizerContainer = ({
   })
 
   const feedColumnShow = useFeedColumnShow()
-  const [feedColumnTempShow, setFeedColumnTempShow] = useState(false)
+  const feedColumnTempShow = useFeedColumnTempShow()
 
+  const isInEntryContentWideMode = useUISettingKey("wideMode")
   useEffect(() => {
     const handler = throttle((e: MouseEvent) => {
       const mouseX = e.clientX
+      const mouseY = e.clientY
+
+      if (mouseY < 100 && isInEntryContentWideMode) return
       const threshold = feedColumnTempShow ? getUISettings().feedColWidth : 100
 
       if (mouseX < threshold) {
@@ -209,7 +232,7 @@ const FeedResponsiveResizerContainer = ({
     return () => {
       document.removeEventListener("mousemove", handler)
     }
-  }, [feedColumnTempShow])
+  }, [feedColumnTempShow, isInEntryContentWideMode])
 
   useHotkeys(
     shortcuts.layout.toggleSidebar.key,

locales/app/en.json

@@ -159,11 +159,11 @@
   "mark_all_read_button.mark_as_read": "Mark {{which}} as read",
   "mark_all_read_button.undo": "Undo",
   "notify.unSupportDisplay": "Some websites can't be displayed here. Download desktop app to view it.",
-  "notify.unSupportWidth": "{{APP_NAME}} is not yet supported on mobile devices",
+  "notify.unSupportWidth": "{{app_name}} is not yet supported on mobile devices",
   "notify.unSupportWidth_1": "Your device width is <b>{{width}}</b>, which is less than the minimum supported width {{minWidth}}.",
-  "notify.unSupportWidth_2": "Please switch to the desktop app to continue using {{APP_NAME}} <br /> Download: <url />",
+  "notify.unSupportWidth_2": "Please switch to the desktop app to continue using {{app_name}} <br /> Download: <url />",
   "notify.unfollow_feed": "<FeedItem /> have been unfollowed.",
-  "notify.update_info": "{{APP_NAME}} is ready to update!",
+  "notify.update_info": "{{app_name}} is ready to update!",
   "notify.update_info_1": "Click to restart",
   "player.back_10s": "Back 10s",
   "player.close": "Close",

locales/app/zh-CN.json

@@ -159,11 +159,11 @@
   "mark_all_read_button.mark_as_read": "标记{{which}}为已读",
   "mark_all_read_button.undo": "撤销",
   "notify.unSupportDisplay": "某些网站无法在此显示，请下载桌面应用查看",
-  "notify.unSupportWidth": "{{APP_NAME}} 目前尚不支持移动设备",
+  "notify.unSupportWidth": "{{app_name}} 目前尚不支持移动设备",
   "notify.unSupportWidth_1": "您的设备宽度为 <b>{{width}}</b>，低于支持的最小宽度 {{minWidth}}",
-  "notify.unSupportWidth_2": "请切换到桌面应用继续使用 {{APP_NAME}} <br /> 下载链接：<url />",
+  "notify.unSupportWidth_2": "请切换到桌面应用继续使用 {{app_name}} <br /> 下载链接：<url />",
   "notify.unfollow_feed": "已取消订阅 <FeedItem />",
-  "notify.update_info": "{{APP_NAME}} 已准备好更新！",
+  "notify.update_info": "{{app_name}} 已准备好更新！",
   "notify.update_info_1": "点击重新启动",
   "player.back_10s": "后退 10s",
   "player.close": "关闭",

locales/app/zh-HK.json

@@ -159,11 +159,11 @@
   "mark_all_read_button.mark_as_read": "標記 {{which}} 為已讀",
   "mark_all_read_button.undo": "撤銷",
   "notify.unSupportDisplay": "某些網站無法顯示，請下載桌面應用程式檢視",
-  "notify.unSupportWidth": "{{APP_NAME}} 目前尚未支援流動裝置",
+  "notify.unSupportWidth": "{{app_name}} 目前尚未支援流動裝置",
   "notify.unSupportWidth_1": "您的裝置寬度為 <b>{{width}}</b>，低於支援的最小寬度 {{minWidth}}",
-  "notify.unSupportWidth_2": "請切換至桌面應用程式繼續使用 {{APP_NAME}} <br /> 下載連結：<url />",
+  "notify.unSupportWidth_2": "請切換至桌面應用程式繼續使用 {{app_name}} <br /> 下載連結：<url />",
   "notify.unfollow_feed": "已取消關注 <FeedItem />。",
-  "notify.update_info": "{{APP_NAME}} 已準備好更新！",
+  "notify.update_info": "{{app_name}} 已準備好更新！",
   "notify.update_info_1": "點擊以重新啟動",
   "player.back_10s": "倒退 10 秒",
   "player.close": "關閉",

locales/app/zh-TW.json

@@ -159,11 +159,11 @@
   "mark_all_read_button.mark_as_read": "將 {{which}} 標記為已讀",
   "mark_all_read_button.undo": "復原",
   "notify.unSupportDisplay": "某些網站無法顯示，請下載桌面應用程式以查看",
-  "notify.unSupportWidth": "{{APP_NAME}} 目前尚未支援行動裝置",
+  "notify.unSupportWidth": "{{app_name}} 目前尚未支援行動裝置",
   "notify.unSupportWidth_1": "您的裝置寬度為 <b>{{width}}</b>，小於支援的最小寬度 {{minWidth}}",
-  "notify.unSupportWidth_2": "請切換到桌面應用程式以繼續使用 {{APP_NAME}} <br /> 下載連結：<url />",
+  "notify.unSupportWidth_2": "請切換到桌面應用程式以繼續使用 {{app_name}} <br /> 下載連結：<url />",
   "notify.unfollow_feed": "已取消關注 <FeedItem />",
-  "notify.update_info": "{{APP_NAME}} 已準備好更新！",
+  "notify.update_info": "{{app_name}} 已準備好更新！",
   "notify.update_info_1": "點擊重新啟動",
   "player.back_10s": "後退 10 秒",
   "player.close": "關閉",

locales/external/ar-DZ.json

@@ -22,7 +22,7 @@
   "login.redirecting": "إعادة التوجيه",
   "login.welcomeTo": "مرحبًا بك في",
   "redirect.continueInBrowser": "المتابعة في المتصفح",
-  "redirect.instruction": "الآن هو الوقت المناسب لفتح {{APP_NAME}} وإغلاق هذه الصفحة بأمان.",
-  "redirect.openApp": "افتح {{APP_NAME}}",
-  "redirect.successMessage": "تم الاتصال بنجاح بحساب {{APP_NAME}}."
+  "redirect.instruction": "الآن هو الوقت المناسب لفتح {{app_name}} وإغلاق هذه الصفحة بأمان.",
+  "redirect.openApp": "افتح {{app_name}}",
+  "redirect.successMessage": "تم الاتصال بنجاح بحساب {{app_name}}."
 }

locales/external/ar-IQ.json

@@ -22,7 +22,7 @@
   "login.redirecting": "إعادة التوجيه",
   "login.welcomeTo": "مرحبًا بك في",
   "redirect.continueInBrowser": "المتابعة في المتصفح",
-  "redirect.instruction": "الآن هو الوقت المناسب لفتح {{APP_NAME}} وإغلاق هذه الصفحة بأمان.",
-  "redirect.openApp": "افتح {{APP_NAME}}",
-  "redirect.successMessage": "تم الاتصال بنجاح بحساب {{APP_NAME}}."
+  "redirect.instruction": "الآن هو الوقت المناسب لفتح {{app_name}} وإغلاق هذه الصفحة بأمان.",
+  "redirect.openApp": "افتح {{app_name}}",
+  "redirect.successMessage": "تم الاتصال بنجاح بحساب {{app_name}}."
 }

locales/external/ar-MA.json

@@ -22,7 +22,7 @@
   "login.redirecting": "إعادة التوجيه",
   "login.welcomeTo": "مرحبًا بك في ",
   "redirect.continueInBrowser": "المتابعة في المتصفح",
-  "redirect.instruction": "حان الوقت الآن لفتح {{APP_NAME}} وإغلاق هذه الصفحة بأمان.",
-  "redirect.openApp": "افتح {{APP_NAME}}",
-  "redirect.successMessage": "لقد تم الاتصال بنجاح بحسابك على {{APP_NAME}}."
+  "redirect.instruction": "حان الوقت الآن لفتح {{app_name}} وإغلاق هذه الصفحة بأمان.",
+  "redirect.openApp": "افتح {{app_name}}",
+  "redirect.successMessage": "لقد تم الاتصال بنجاح بحسابك على {{app_name}}."
 }

locales/external/ar-SA.json

@@ -22,7 +22,7 @@
   "login.redirecting": "إعادة التوجيه",
   "login.welcomeTo": "مرحبًا بك في",
   "redirect.continueInBrowser": "المتابعة في المتصفح",
-  "redirect.instruction": "الآن حان الوقت لفتح {{APP_NAME}} وإغلاق هذه الصفحة بأمان.",
-  "redirect.openApp": "فتح {{APP_NAME}}",
-  "redirect.successMessage": "تم الاتصال بحساب {{APP_NAME}} بنجاح."
+  "redirect.instruction": "الآن حان الوقت لفتح {{app_name}} وإغلاق هذه الصفحة بأمان.",
+  "redirect.openApp": "فتح {{app_name}}",
+  "redirect.successMessage": "تم الاتصال بحساب {{app_name}} بنجاح."
 }

locales/external/ar-TN.json

@@ -25,7 +25,7 @@
   "login.redirecting": "جاري إعادة التوجيه",
   "login.welcomeTo": "مرحباً بك في ",
   "redirect.continueInBrowser": "المتابعة في المتصفح",
-  "redirect.instruction": "الآن هو الوقت المناسب لفتح {{APP_NAME}} وإغلاق هذه الصفحة بأمان.",
-  "redirect.openApp": "افتح {{APP_NAME}}",
-  "redirect.successMessage": "تم الاتصال بحساب {{APP_NAME}} بنجاح."
+  "redirect.instruction": "الآن هو الوقت المناسب لفتح {{app_name}} وإغلاق هذه الصفحة بأمان.",
+  "redirect.openApp": "افتح {{app_name}}",
+  "redirect.successMessage": "تم الاتصال بحساب {{app_name}} بنجاح."
 }

locales/external/ar-kw.json

@@ -25,7 +25,7 @@
   "login.redirecting": "إعادة التوجيه",
   "login.welcomeTo": "مرحبًا بك في",
   "redirect.continueInBrowser": "المتابعة في المتصفح",
-  "redirect.instruction": "الآن هو الوقت المناسب لفتح {{APP_NAME}} وإغلاق هذه الصفحة بأمان.",
-  "redirect.openApp": "افتح {{APP_NAME}}",
-  "redirect.successMessage": "تم الاتصال بنجاح بحساب {{APP_NAME}}."
+  "redirect.instruction": "الآن هو الوقت المناسب لفتح {{app_name}} وإغلاق هذه الصفحة بأمان.",
+  "redirect.openApp": "افتح {{app_name}}",
+  "redirect.successMessage": "تم الاتصال بنجاح بحساب {{app_name}}."
 }

locales/external/de.json

@@ -22,7 +22,7 @@
   "login.redirecting": "Redirecting",
   "login.welcomeTo": "Welcome to ",
   "redirect.continueInBrowser": "Continue in browser",
-  "redirect.instruction": "It is time to open {{APP_NAME}} and safely close this page.",
-  "redirect.openApp": "Open {{APP_NAME}}",
-  "redirect.successMessage": "You have successfully connected to {{APP_NAME}} account."
+  "redirect.instruction": "It is time to open {{app_name}} and safely close this page.",
+  "redirect.openApp": "Open {{app_name}}",
+  "redirect.successMessage": "You have successfully connected to {{app_name}} account."
 }