feat: entry action buttons for widemode entry list

RSSNext · Jul 3, 2024 · 324bcbe · 324bcbe
1 parent 9547a5c
commit 324bcbe
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/src/renderer/src/hooks/biz/useEntryActions.tsx b/src/renderer/src/hooks/biz/useEntryActions.tsx
@@ -125,7 +125,7 @@ export const useEntryActions = ({
         {
           key: "tip",
           shortcut: shortcuts.entry.tip.key,
-          name: `Tip Power`,
+          name: `Tip`,
           className: "i-mgc-power-outline",
           onClick: () => {
             nextFrame(openTipModal)

diff --git a/src/renderer/src/modules/entry-column/index.tsx b/src/renderer/src/modules/entry-column/index.tsx
@@ -1,7 +1,10 @@
 import { useMainContainerElement } from "@renderer/atoms"
 import { useUser } from "@renderer/atoms/user"
 import { m } from "@renderer/components/common/Motion"
+import { EmptyIcon } from "@renderer/components/icons/empty"
 import { ActionButton, StyledButton } from "@renderer/components/ui/button"
+import { DividerVertical } from "@renderer/components/ui/divider"
+import { LoadingCircle } from "@renderer/components/ui/loading"
 import {
   Popover,
   PopoverClose,
@@ -16,10 +19,11 @@ import {
   useRouteParms,
 } from "@renderer/hooks/biz/useRouteParams"
 import { apiClient } from "@renderer/lib/api-fetch"
-import { ROUTE_FEED_PENDING, views } from "@renderer/lib/constants"
+import { ROUTE_ENTRY_PENDING, ROUTE_FEED_PENDING, views } from "@renderer/lib/constants"
 import { getStorageNS } from "@renderer/lib/ns"
 import { shortcuts } from "@renderer/lib/shortcuts"
 import { cn, getEntriesParams, getOS, isBizId } from "@renderer/lib/utils"
+import { EntryHeader } from "@renderer/modules/entry-content/header"
 import { useEntries } from "@renderer/queries/entries"
 import { useRefreshFeedMutation } from "@renderer/queries/feed"
 import {
@@ -51,8 +55,6 @@ import type { ListRange, VirtuosoHandle, VirtuosoProps } from "react-virtuoso"
 import { Virtuoso, VirtuosoGrid } from "react-virtuoso"
 import { useEventCallback } from "usehooks-ts"
 
-import { EmptyIcon } from "../../components/icons/empty"
-import { LoadingCircle } from "../../components/ui/loading"
 import { EntryItem } from "./item"
 
 const unreadOnlyAtom = atomWithStorage<boolean>(
@@ -305,6 +307,9 @@ const ListHeader: FC<{
   const user = useUser()
 
   const feed = useFeedById(routerParams.feedId)
+
+  const { entryId, view } = useRouteParms()
+
   return (
     <div className="mb-5 flex w-full flex-col pl-11 pr-4 pt-2.5">
       <div
@@ -314,7 +319,13 @@ const ListHeader: FC<{
         )}
       >
         {!titleAtBottom && titleInfo}
-        <div className="relative z-[1] flex items-center gap-1 self-baseline text-zinc-500">
+        <div className="relative z-[1] flex items-center gap-1 self-baseline text-zinc-500" onClick={(e) => e.stopPropagation()}>
+          {views[view].wideMode && entryId && entryId !== ROUTE_ENTRY_PENDING && (
+            <>
+              <EntryHeader view={view} entryId={entryId} />
+              <DividerVertical className="w-px" />
+            </>
+          )}
           {feed?.ownerUserId === user?.id && isBizId(routerParams.feedId) && (
             <ActionButton
               tooltip="Refresh"

diff --git a/src/renderer/src/modules/entry-content/header.tsx b/src/renderer/src/modules/entry-content/header.tsx
@@ -11,9 +11,11 @@ import { useEntryTitleMeta } from "./atoms"
 export function EntryHeader({
   view,
   entryId,
+  className,
 }: {
   view: number
   entryId: string
+  className?: string
 }) {
   const entry = useEntry(entryId)
 
@@ -42,8 +44,9 @@ export function EntryHeader({
   return (
     <div
       className={cn(
-        "flex h-[55px] min-w-0 items-center justify-between gap-3 overflow-hidden px-5 text-lg text-zinc-500",
+        "flex min-w-0 items-center justify-between gap-3 overflow-hidden text-lg text-zinc-500",
         entryTitleMeta && "border-b border-border",
+        className,
       )}
     >
       <div className="flex min-w-0 shrink">

diff --git a/src/renderer/src/modules/entry-content/index.tsx b/src/renderer/src/modules/entry-content/index.tsx
@@ -90,7 +90,7 @@ function EntryContentRender({ entryId }: { entryId: string }) {
 
   return (
     <>
-      <EntryHeader entryId={entry.entries.id} view={0} />
+      <EntryHeader entryId={entry.entries.id} view={0} className="h-[55px] px-5" />
       <div className="h-[calc(100%-3.5rem)] min-w-0 overflow-y-auto @container">
         <m.div
           style={{