feat(wide-mode): support esc to return back

Signed-off-by: Innei <i@innei.in>

Author: Innei

apps/renderer/src/lib/error-parser.ts

@@ -78,7 +78,7 @@ export const toastFetchError = (
           className: cn(
             "relative z-[1] float-end -mt-1",
             "border-transparent bg-theme-background text-theme-foreground opacity-60 transition-opacity",
-            "hover:bg-theme-button-hover hover:opacity-100 focus:border-theme-foreground/80",
+            "hover:bg-theme-button-hover hover:opacity-100 focus:border-theme-foreground/20",
           ),
           key: "copy",
           value: _reason,

apps/renderer/src/modules/feed-column/index.tsx

@@ -155,7 +155,6 @@ export function FeedColumn({ children, className }: PropsWithChildren<{ classNam
         {views.map((item, index) => (
           <ActionButton
             key={item.name}
-            // TODO: fix this type error
             tooltip={t(item.name)}
             shortcut={`${index + 1}`}
             className={cn(

apps/renderer/src/modules/feed-column/list.tsx

@@ -234,24 +234,24 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
   )
 }
 
+const LIST = [
+  { icon: "i-mgc-sort-ascending-cute-re", by: "count", order: "asc" },
+  { icon: "i-mgc-sort-descending-cute-re", by: "count", order: "desc" },
+
+  {
+    icon: "i-mgc-az-sort-descending-letters-cute-re",
+    by: "alphabetical",
+    order: "asc",
+  },
+  {
+    icon: "i-mgc-az-sort-ascending-letters-cute-re",
+    by: "alphabetical",
+    order: "desc",
+  },
+] as const
 const SortButton = () => {
   const { by, order } = useFeedListSort()
   const { t } = useTranslation()
-  const LIST = [
-    { icon: "i-mgc-sort-ascending-cute-re", by: "count", order: "asc" },
-    { icon: "i-mgc-sort-descending-cute-re", by: "count", order: "desc" },
-
-    {
-      icon: "i-mgc-az-sort-descending-letters-cute-re",
-      by: "alphabetical",
-      order: "asc",
-    },
-    {
-      icon: "i-mgc-az-sort-ascending-letters-cute-re",
-      by: "alphabetical",
-      order: "desc",
-    },
-  ] as const
 
   const [open, setOpen] = useState(false)
 

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

@@ -1,11 +1,14 @@
-import { AnimatePresence } from "framer-motion"
+import { useWheel } from "@use-gesture/react"
+import { AnimatePresence, easeOut } from "framer-motion"
+import { useRef } from "react"
+import { useHotkeys } from "react-hotkeys-hook"
 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 { HotKeyScopeMap, ROUTE_ENTRY_PENDING, views } from "~/constants"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { useRouteView } from "~/hooks/biz/useRouteParams"
 import { cn } from "~/lib/utils"
@@ -19,22 +22,52 @@ export const Component = () => {
 
   const settingWideMode = useUISettingKey("wideMode")
   const realEntryId = entryId === ROUTE_ENTRY_PENDING ? "" : entryId
-  const disable = views[view].wideMode || (settingWideMode && !realEntryId)
+  const inEntryContentWideMode = !(views[view].wideMode || (settingWideMode && !realEntryId))
   const wideMode = settingWideMode && realEntryId
   const feedColumnTempShow = useFeedColumnTempShow()
   const feedColumnShow = useFeedColumnShow()
   const shouldHeaderPaddingLeft = feedColumnTempShow && !feedColumnShow && settingWideMode
 
+  useHotkeys(
+    "Escape",
+    () => {
+      if (inEntryContentWideMode) {
+        navigate({ entryId: null })
+      }
+    },
+    {
+      enabled: inEntryContentWideMode,
+      scopes: HotKeyScopeMap.Home,
+      preventDefault: true,
+    },
+  )
+  const carouselRef = useRef<HTMLDivElement>(null)
+
+  useWheel(
+    ({ delta: [dex] }) => {
+      if (dex < -50) {
+        navigate({ entryId: null })
+      }
+    },
+    {
+      enabled: inEntryContentWideMode,
+      target: carouselRef,
+      eventOptions: { capture: true },
+      axis: "x",
+    },
+  )
+
   return (
     <AnimatePresence>
       <AppLayoutGridContainerProvider>
         <AnimatePresence>
-          {!disable && (
+          {inEntryContentWideMode && (
             <m.div
+              ref={carouselRef}
               // slide up
               initial={{ opacity: 0, y: 100 }}
               animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 100 }}
+              exit={{ opacity: 0, y: 100, transition: { duration: 0.2, ease: easeOut } }}
               transition={{ duration: 0.2, type: "spring" }}
               className={cn(
                 "flex min-w-0 flex-1 flex-col",
@@ -54,12 +87,13 @@ export const Component = () => {
                   <i className="i-mgc-close-cute-re size-5" />
                 </ActionButton>
               )}
+
               <EntryContent
                 entryId={realEntryId}
                 classNames={{
                   header: shouldHeaderPaddingLeft
-                    ? "ml-[calc(theme(width.feed-col)+theme(width.12))]"
-                    : "ml-12",
+                    ? "ml-[calc(theme(width.feed-col)+theme(width.8))]"
+                    : "ml-8",
                 }}
               />
             </m.div>