feat: add navigation buttons for entry content with new icons

- Implemented left and right navigation buttons in the entry content component to switch between entries.
- Added SVG icons for left and right navigation.
- Enhanced user interaction with hover effects for better visibility.

This update improves the navigation experience within the entry content, aligning with recent command enhancements.

Signed-off-by: Innei <tukon479@gmail.com>

apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx

@@ -4,6 +4,7 @@ import {
   useFocusActions,
 } from "@follow/components/common/Focusable/index.js"
 import { MemoedDangerousHTMLStyle } from "@follow/components/common/MemoedDangerousHTMLStyle.js"
+import { MotionButtonBase } from "@follow/components/ui/button/index.js"
 import { ScrollArea } from "@follow/components/ui/scroll-area/index.js"
 import type { FeedViewType } from "@follow/constants"
 import { useTitle } from "@follow/hooks"
@@ -21,7 +22,7 @@ import {
   useEntryIsInReadabilitySuccess,
   useEntryReadabilityContent,
 } from "~/atoms/readability"
-import { useUISettingKey } from "~/atoms/settings/ui"
+import { useIsZenMode, useUISettingKey } from "~/atoms/settings/ui"
 import { ShadowDOM } from "~/components/common/ShadowDOM"
 import type { TocRef } from "~/components/ui/markdown/components/Toc"
 import { useInPeekModal } from "~/components/ui/modal/inspire/InPeekModal"
@@ -112,6 +113,7 @@ export const EntryContent: Component<EntryContentProps> = ({
   const isInPeekModal = useInPeekModal()
 
   const [isUserInteraction, setIsUserInteraction] = useState(false)
+  const isZenMode = useIsZenMode()
   if (!entry) return null
 
   const entryContent = isInReadabilityMode
@@ -150,6 +152,32 @@ export const EntryContent: Component<EntryContentProps> = ({
             className="animate-in fade-in slide-in-from-bottom-24 f-motion-reduce:fade-in-0 f-motion-reduce:slide-in-from-bottom-0 select-text duration-200 ease-in-out"
             key={entry.entries.id}
           >
+            {!isZenMode && (
+              <>
+                <div className="absolute inset-y-0 left-0 flex w-12 items-center justify-center opacity-0 duration-200 hover:opacity-100">
+                  <MotionButtonBase
+                    className="absolute left-0 shrink-0 cursor-pointer"
+                    onClick={() => {
+                      EventBus.dispatch(COMMAND_ID.timeline.switchToPrevious)
+                    }}
+                  >
+                    <i className="i-mgc-left-small-sharp text-text-secondary size-16" />
+                  </MotionButtonBase>
+                </div>
+
+                <div className="absolute inset-y-0 right-0 flex w-12 items-center justify-center opacity-0 duration-200 hover:opacity-100">
+                  <MotionButtonBase
+                    className="absolute right-0 shrink-0 cursor-pointer"
+                    onClick={() => {
+                      EventBus.dispatch(COMMAND_ID.timeline.switchToNext)
+                    }}
+                  >
+                    <i className="i-mgc-right-small-sharp text-text-secondary size-16" />
+                  </MotionButtonBase>
+                </div>
+              </>
+            )}
+
             <article
               tabIndex={-1}
               onFocus={() => setIsUserInteraction(true)}

icons/mgc/left_small_sharp.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.22 10.24 9.46 12l1.77 1.77L13 15.54l.35-.35.35-.35-1.42-1.42L10.86 12l1.42-1.42 1.419-1.419-.339-.341a4.49 4.49 0 0 0-.359-.34c-.012 0-.813.792-1.781 1.76" fill="#10161F" fill-rule="evenodd"/></svg>

icons/mgc/right_small_sharp.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m10.64 8.82-.339.341 1.419 1.419L13.14 12l-1.42 1.42-1.42 1.42.35.35.35.35 1.77-1.77L14.54 12l-1.76-1.76c-.968-.968-1.769-1.76-1.781-1.76a4.49 4.49 0 0 0-.359.34" fill="#10161F" fill-rule="evenodd"/></svg>