feat: merge actions for toggling state

RSSNext · Jan 20, 2025 · fd1209a · fd1209a
1 parent f52338c
commit fd1209a
Show file tree

Hide file tree

Showing 15 changed files with 98 additions and 145 deletions.
diff --git a/apps/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx b/apps/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
@@ -95,9 +95,10 @@ const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean
-    icon?: React.ReactNode
+    icon?: React.ReactNode | ((props?: { isActive?: boolean }) => React.ReactNode)
+    active?: boolean
   }
->(({ className, inset, icon, ...props }, ref) => (
+>(({ className, inset, icon, active, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
@@ -109,7 +110,9 @@ const DropdownMenuItem = React.forwardRef<
     {...props}
   >
     {!!icon && (
-      <span className="mr-1.5 inline-flex size-4 items-center justify-center">{icon}</span>
+      <span className="mr-1.5 inline-flex size-4 items-center justify-center">
+        {typeof icon === "function" ? icon({ isActive: active }) : icon}
+      </span>
     )}
     {props.children}
     {/* Justify Fill */}

diff --git a/apps/renderer/src/hooks/biz/useEntryActions.tsx b/apps/renderer/src/hooks/biz/useEntryActions.tsx
@@ -128,16 +128,10 @@ export const useEntryActions = ({ entryId, view }: { entryId: string; view?: Fee
         hide: isInbox || feed?.ownerUserId === whoami()?.id,
         shortcut: shortcuts.entry.tip.key,
       },
-      {
-        id: COMMAND_ID.entry.unstar,
-        onClick: runCmdFn(COMMAND_ID.entry.unstar, [{ entryId }]),
-        hide: !entry?.collections,
-        shortcut: shortcuts.entry.toggleStarred.key,
-      },
       {
         id: COMMAND_ID.entry.star,
         onClick: runCmdFn(COMMAND_ID.entry.star, [{ entryId, view }]),
-        hide: !!entry?.collections,
+        active: !!entry?.collections,
         shortcut: shortcuts.entry.toggleStarred.key,
       },
       {
@@ -159,13 +153,8 @@ export const useEntryActions = ({ entryId, view }: { entryId: string; view?: Fee
       {
         id: COMMAND_ID.entry.viewSourceContent,
         onClick: runCmdFn(COMMAND_ID.entry.viewSourceContent, [{ entryId }]),
-        hide: isMobile() || isShowSourceContent || !entry?.entries.url,
-      },
-      {
-        id: COMMAND_ID.entry.viewEntryContent,
-        onClick: runCmdFn(COMMAND_ID.entry.viewEntryContent, []),
-        hide: !isShowSourceContent,
-        active: true,
+        hide: isMobile() || !entry?.entries.url,
+        active: isShowSourceContent,
       },
       {
         id: COMMAND_ID.entry.toggleAISummary,
@@ -198,13 +187,8 @@ export const useEntryActions = ({ entryId, view }: { entryId: string; view?: Fee
       {
         id: COMMAND_ID.entry.read,
         onClick: runCmdFn(COMMAND_ID.entry.read, [{ entryId }]),
-        hide: !hasEntry || entry.read || !!entry.collections || !!inList,
-        shortcut: shortcuts.entry.toggleRead.key,
-      },
-      {
-        id: COMMAND_ID.entry.unread,
-        onClick: runCmdFn(COMMAND_ID.entry.unread, [{ entryId }]),
-        hide: !hasEntry || !entry.read || !!entry.collections || !!inList,
+        hide: !hasEntry || !!entry.collections || !!inList,
+        active: !!entry?.read,
         shortcut: shortcuts.entry.toggleRead.key,
       },
       {

diff --git a/apps/renderer/src/modules/command/commands/entry.tsx b/apps/renderer/src/modules/command/commands/entry.tsx
@@ -1,13 +1,17 @@
 import { FeedViewType, UserRole } from "@follow/constants"
 import { IN_ELECTRON } from "@follow/shared/constants"
-import { getOS } from "@follow/utils/utils"
+import { cn, getOS } from "@follow/utils/utils"
 import { useMutation } from "@tanstack/react-query"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 
 import { toggleShowAISummary } from "~/atoms/ai-summary"
 import { toggleShowAITranslation } from "~/atoms/ai-translation"
-import { setShowSourceContent, useSourceContentModal } from "~/atoms/source-content"
+import {
+  getShowSourceContent,
+  toggleShowSourceContent,
+  useSourceContentModal,
+} from "~/atoms/source-content"
 import { useUserRole } from "~/atoms/user"
 import { navigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { getRouteParams } from "~/hooks/biz/useRouteParams"
@@ -112,7 +116,13 @@ export const useRegisterEntryCommands = () => {
     {
       id: COMMAND_ID.entry.star,
       label: t("entry_actions.star"),
-      icon: <i className="i-mgc-star-cute-re" />,
+      icon: (props) => (
+        <i
+          className={cn(
+            props?.isActive ? "i-mgc-star-cute-fi text-orange-500" : "i-mgc-star-cute-re",
+          )}
+        />
+      ),
       run: ({ entryId, view }) => {
         const entry = useEntryStore.getState().flatMapEntries[entryId]
         if (!entry) {
@@ -128,20 +138,11 @@ export const useRegisterEntryCommands = () => {
         //     width: 252,
         //   })
         // }
-        collect.mutate({ entryId, view })
-      },
-    },
-    {
-      id: COMMAND_ID.entry.unstar,
-      label: t("entry_actions.unstar"),
-      icon: <i className="i-mgc-star-cute-fi text-orange-500" />,
-      run: ({ entryId }) => {
-        const entry = useEntryStore.getState().flatMapEntries[entryId]
-        if (!entry) {
-          toast.error("Failed to unstar: entry is not available", { duration: 3000 })
-          return
+        if (entry.collections) {
+          uncollect.mutate(entry.entries.id)
+        } else {
+          collect.mutate({ entryId, view })
         }
-        uncollect.mutate(entry.entries.id)
       },
     },
     {
@@ -211,37 +212,31 @@ export const useRegisterEntryCommands = () => {
       label: t("entry_actions.view_source_content"),
       icon: <i className="i-mgc-world-2-cute-re" />,
       run: ({ entryId }) => {
-        const entry = useEntryStore.getState().flatMapEntries[entryId]
-        if (!entry || !entry.entries.url) {
-          toast.error("Failed to view source content: url is not available", { duration: 3000 })
-          return
-        }
-        const routeParams = getRouteParams()
-        const viewPreviewInModal = [
-          FeedViewType.SocialMedia,
-          FeedViewType.Videos,
-          FeedViewType.Pictures,
-        ].includes(routeParams.view)
-        if (viewPreviewInModal) {
-          showSourceContentModal({
-            title: entry.entries.title ?? undefined,
-            src: entry.entries.url,
-          })
-          return
-        }
-        const layoutEntryId = routeParams.entryId
-        if (layoutEntryId !== entry.entries.id) {
-          navigateEntry({ entryId: entry.entries.id })
+        if (!getShowSourceContent()) {
+          const entry = useEntryStore.getState().flatMapEntries[entryId]
+          if (!entry || !entry.entries.url) {
+            toast.error("Failed to view source content: url is not available", { duration: 3000 })
+            return
+          }
+          const routeParams = getRouteParams()
+          const viewPreviewInModal = [
+            FeedViewType.SocialMedia,
+            FeedViewType.Videos,
+            FeedViewType.Pictures,
+          ].includes(routeParams.view)
+          if (viewPreviewInModal) {
+            showSourceContentModal({
+              title: entry.entries.title ?? undefined,
+              src: entry.entries.url,
+            })
+            return
+          }
+          const layoutEntryId = routeParams.entryId
+          if (layoutEntryId !== entry.entries.id) {
+            navigateEntry({ entryId: entry.entries.id })
+          }
         }
-        setShowSourceContent(true)
-      },
-    },
-    {
-      id: COMMAND_ID.entry.viewEntryContent,
-      label: t("entry_actions.view_source_content"),
-      icon: <i className="i-mgc-world-2-cute-fi" />,
-      run: () => {
-        setShowSourceContent(false)
+        toggleShowSourceContent()
       },
     },
     {
@@ -274,27 +269,20 @@ export const useRegisterEntryCommands = () => {
     {
       id: COMMAND_ID.entry.read,
       label: t("entry_actions.mark_as_read"),
-      icon: <i className="i-mgc-round-cute-fi" />,
+      icon: (props) => (
+        <i className={cn(props?.isActive ? "i-mgc-round-cute-re" : "i-mgc-round-cute-fi")} />
+      ),
       run: ({ entryId }) => {
         const entry = useEntryStore.getState().flatMapEntries[entryId]
         if (!entry) {
           toast.error("Failed to mark as unread: feed is not available", { duration: 3000 })
           return
         }
-        read.mutate({ entryId, feedId: entry.feedId })
-      },
-    },
-    {
-      id: COMMAND_ID.entry.unread,
-      label: t("entry_actions.mark_as_unread"),
-      icon: <i className="i-mgc-round-cute-re" />,
-      run: ({ entryId }) => {
-        const entry = useEntryStore.getState().flatMapEntries[entryId]
-        if (!entry) {
-          toast.error("Failed to mark as unread: feed is not available", { duration: 3000 })
-          return
+        if (entry.read) {
+          unread.mutate({ entryId, feedId: entry.feedId })
+        } else {
+          read.mutate({ entryId, feedId: entry.feedId })
         }
-        unread.mutate({ entryId, feedId: entry.feedId })
       },
     },
   ])

diff --git a/apps/renderer/src/modules/command/commands/id.ts b/apps/renderer/src/modules/command/commands/id.ts
@@ -2,16 +2,13 @@ export const COMMAND_ID = {
   entry: {
     tip: "entry:tip",
     star: "entry:star",
-    unstar: "entry:unstar",
     delete: "entry:delete",
     copyLink: "entry:copy-link",
     copyTitle: "entry:copy-title",
     openInBrowser: "entry:open-in-browser",
     viewSourceContent: "entry:view-source-content",
-    viewEntryContent: "entry:view-entry-content",
     share: "entry:share",
     read: "entry:read",
-    unread: "entry:unread",
     toggleAISummary: "entry:toggle-ai-summary",
     toggleAITranslation: "entry:toggle-ai-translation",
   },

diff --git a/apps/renderer/src/modules/command/commands/types.ts b/apps/renderer/src/modules/command/commands/types.ts
@@ -14,10 +14,6 @@ export type StarCommand = Command<{
   id: typeof COMMAND_ID.entry.star
   fn: (data: { entryId: string; view?: FeedViewType }) => void
 }>
-export type UnStarCommand = Command<{
-  id: typeof COMMAND_ID.entry.unstar
-  fn: (data: { entryId: string }) => void
-}>
 
 export type DeleteCommand = Command<{
   id: typeof COMMAND_ID.entry.delete
@@ -43,10 +39,6 @@ export type ViewSourceContentCommand = Command<{
   id: typeof COMMAND_ID.entry.viewSourceContent
   fn: (data: { entryId: string }) => void
 }>
-export type ViewEntryContentCommand = Command<{
-  id: typeof COMMAND_ID.entry.viewEntryContent
-  fn: () => void
-}>
 
 export type ShareCommand = Command<{
   id: typeof COMMAND_ID.entry.share
@@ -58,11 +50,6 @@ export type ReadCommand = Command<{
   fn: ({ entryId }) => void
 }>
 
-export type UnReadCommand = Command<{
-  id: typeof COMMAND_ID.entry.unread
-  fn: ({ entryId }) => void
-}>
-
 export type ToggleAISummaryCommand = Command<{
   id: typeof COMMAND_ID.entry.toggleAISummary
   fn: () => void
@@ -76,16 +63,13 @@ export type ToggleAITranslationCommand = Command<{
 export type EntryCommand =
   | TipCommand
   | StarCommand
-  | UnStarCommand
   | DeleteCommand
   | CopyLinkCommand
   | CopyTitleCommand
   | OpenInBrowserCommand
   | ViewSourceContentCommand
-  | ViewEntryContentCommand
   | ShareCommand
   | ReadCommand
-  | UnReadCommand
   | ToggleAISummaryCommand
   | ToggleAITranslationCommand
 

diff --git a/apps/renderer/src/modules/command/hooks/use-register-command.test-d.ts b/apps/renderer/src/modules/command/hooks/use-register-command.test-d.ts
@@ -33,13 +33,6 @@ test("useRegisterFollowCommand types", () => {
           expectTypeOf(entryId).toEqualTypeOf<string>()
         },
       },
-      {
-        id: COMMAND_ID.entry.viewEntryContent,
-        label: "",
-        run: (...args) => {
-          expectTypeOf(args).toEqualTypeOf<[]>()
-        },
-      },
     ]),
   )
 
@@ -71,13 +64,6 @@ test("useRegisterFollowCommand types", () => {
           expectTypeOf(entryId).toEqualTypeOf<string>()
         },
       },
-      {
-        id: COMMAND_ID.entry.viewEntryContent,
-        label: "",
-        run: (...args) => {
-          expectTypeOf(args).toEqualTypeOf<[]>()
-        },
-      },
     ]),
   )
 })
diff --git a/apps/renderer/src/modules/command/registry/command.test-d.ts b/apps/renderer/src/modules/command/registry/command.test-d.ts
@@ -45,16 +45,6 @@ test("defineFollowCommand types", () => {
 })
 
 test("defineFollowCommand with keyBinding types", () => {
-  assertType(
-    defineFollowCommand({
-      id: COMMAND_ID.entry.viewEntryContent,
-      label: "",
-      when: true,
-      keyBinding: "",
-      run: () => {},
-    }),
-  )
-
   assertType(
     defineFollowCommand({
       id: COMMAND_ID.entry.viewSourceContent,

diff --git a/apps/renderer/src/modules/command/types.ts b/apps/renderer/src/modules/command/types.ts
@@ -58,7 +58,7 @@ export interface Command<
     title: string
     subTitle?: string
   }
-  readonly icon?: ReactNode
+  readonly icon?: ReactNode | ((props?: { isActive?: boolean }) => ReactNode)
   readonly category: CommandCategory
   readonly run: T["fn"]
 
@@ -82,7 +82,7 @@ export interface CommandOptions<
     | (() => string)
     | { title: string; subTitle?: string }
     | (() => { title: string; subTitle?: string })
-  icon?: ReactNode
+  icon?: ReactNode | ((props?: { isActive?: boolean }) => ReactNode)
   category?: CommandCategory
   run: T["fn"]
 

diff --git a/apps/renderer/src/modules/customize-toolbar/constant.ts b/apps/renderer/src/modules/customize-toolbar/constant.ts
@@ -9,7 +9,7 @@ export interface ToolbarActionOrder {
 
 export const DEFAULT_ACTION_ORDER: ToolbarActionOrder = {
   main: Object.values(COMMAND_ID.entry)
-    .filter((id) => !([COMMAND_ID.entry.read, COMMAND_ID.entry.unread] as string[]).includes(id))
+    .filter((id) => !([COMMAND_ID.entry.read] as string[]).includes(id))
     .filter(
       (id) =>
         !([COMMAND_ID.entry.copyLink, COMMAND_ID.entry.openInBrowser] as string[]).includes(id),
@@ -22,7 +22,6 @@ export const DEFAULT_ACTION_ORDER: ToolbarActionOrder = {
           COMMAND_ID.entry.copyLink,
           COMMAND_ID.entry.openInBrowser,
           COMMAND_ID.entry.read,
-          COMMAND_ID.entry.unread,
         ] as string[]
       ).includes(id),
     ),

diff --git a/apps/renderer/src/modules/customize-toolbar/dnd.tsx b/apps/renderer/src/modules/customize-toolbar/dnd.tsx
@@ -46,7 +46,9 @@ export const SortableActionButton = ({ id }: { id: UniqueIdentifier }) => {
   return (
     <SortableItem id={id}>
       <div className="flex flex-col items-center rounded-lg p-2 hover:bg-theme-button-hover">
-        <div className="flex size-8 items-center justify-center text-xl">{cmd.icon}</div>
+        <div className="flex size-8 items-center justify-center text-xl">
+          {typeof cmd.icon === "function" ? cmd.icon({ isActive: false }) : cmd.icon}
+        </div>
         <div className="mt-1 text-center text-xs text-neutral-500 dark:text-neutral-400">
           {cmd.label.title}
         </div>