diff --git a/apps/renderer/src/hooks/biz/useNavigateEntry.ts b/apps/renderer/src/hooks/biz/useNavigateEntry.ts index 50ebcdcfe..70d92c7a9 100644 --- a/apps/renderer/src/hooks/biz/useNavigateEntry.ts +++ b/apps/renderer/src/hooks/biz/useNavigateEntry.ts @@ -1,5 +1,6 @@ import { getReadonlyRoute, getStableRouterNavigate } from "@follow/components/atoms/route.js" -import { isMobile } from "@follow/components/hooks/useMobile.js" +import { isMobile, useMobile } from "@follow/components/hooks/useMobile.js" +import { useSheetContext } from "@follow/components/ui/sheet/context.js" import { FeedViewType } from "@follow/constants" import { isUndefined } from "es-toolkit/compat" @@ -24,9 +25,16 @@ export type NavigateEntryOptions = Partial<{ /** * @description a hook to navigate to `feedId`, `entryId`, add search for `view`, `level` */ - -// eslint-disable-next-line @eslint-react/hooks-extra/no-redundant-custom-hook, @eslint-react/hooks-extra/ensure-custom-hooks-using-other-hooks -export const useNavigateEntry = () => navigateEntry +export const useNavigateEntry = () => { + const sheetContext = useSheetContext() + const isMobile = useMobile() + return (navigateEntryOptions: NavigateEntryOptions) => { + navigateEntry(navigateEntryOptions) + if (isMobile) { + sheetContext?.dismiss() + } + } +} export const navigateEntry = (options: NavigateEntryOptions) => { const { entryId, feedId, view, folderName, inboxId, listId } = options || {} diff --git a/apps/renderer/src/modules/app-layout/feed-column/desktop.tsx b/apps/renderer/src/modules/app-layout/feed-column/desktop.tsx index d257e89d1..9825ddc3d 100644 --- a/apps/renderer/src/modules/app-layout/feed-column/desktop.tsx +++ b/apps/renderer/src/modules/app-layout/feed-column/desktop.tsx @@ -41,7 +41,7 @@ import { NetworkStatusIndicator } from "~/modules/app/NetworkStatusIndicator" import { LoginModalContent } from "~/modules/auth/LoginModalContent" import { DebugRegistry } from "~/modules/debug/registry" import { FeedColumn } from "~/modules/feed-column" -import { useSelectedFeedIds } from "~/modules/feed-column/atom" +import { getSelectedFeedIds, resetSelectedFeedIds } from "~/modules/feed-column/atom" import { AutoUpdater } from "~/modules/feed-column/auto-updater" import { useShortcutsModal } from "~/modules/modal/shortcuts" import { CmdF } from "~/modules/panel/cmdf" @@ -82,7 +82,6 @@ export function MainDestopLayout() { }, }), ) - const [selectedIds, setSelectedIds] = useSelectedFeedIds() const { mutate } = useBatchUpdateSubscription() const handleDragEnd = React.useCallback( (event: DragEndEvent) => { @@ -95,11 +94,11 @@ export function MainDestopLayout() { view: FeedViewType } - mutate({ category, view, feedIdList: selectedIds }) + mutate({ category, view, feedIdList: getSelectedFeedIds() }) - setSelectedIds([]) + resetSelectedFeedIds() }, - [mutate, selectedIds, setSelectedIds], + [mutate], ) return ( diff --git a/apps/renderer/src/modules/feed-column/atom.ts b/apps/renderer/src/modules/feed-column/atom.ts index 59f19de65..524d08751 100644 --- a/apps/renderer/src/modules/feed-column/atom.ts +++ b/apps/renderer/src/modules/feed-column/atom.ts @@ -35,16 +35,12 @@ export const setFeedListSortOrder = (order: FeedListSortOrder) => { }) } -export const SELECT_NOTHING = [] -export const [ - , - useSelectedFeedIds, - , - useSetSelectedFeedIds, - getSelectedFeedIds, - setSelectedFeedIds, - useSelectedFeedIdsSelector, -] = createAtomHooks(atom(SELECT_NOTHING)) +const SELECT_NOTHING = [] +export const [, useSelectedFeedIdsState, , , getSelectedFeedIds, setSelectedFeedIds, ,] = + createAtomHooks(atom(SELECT_NOTHING)) +export const resetSelectedFeedIds = () => { + setSelectedFeedIds(SELECT_NOTHING) +} export const [, , useFeedAreaScrollProgressValue, , , setFeedAreaScrollProgressValue] = createAtomHooks(atom(0)) diff --git a/apps/renderer/src/modules/feed-column/index.tsx b/apps/renderer/src/modules/feed-column/index.tsx index cbf6d6491..23fb202a1 100644 --- a/apps/renderer/src/modules/feed-column/index.tsx +++ b/apps/renderer/src/modules/feed-column/index.tsx @@ -25,7 +25,7 @@ import { getRouteParams } from "~/hooks/biz/useRouteParams" import { useUnreadByView } from "~/store/unread/hooks" import { WindowUnderBlur } from "../../components/ui/background" -import { getSelectedFeedIds, SELECT_NOTHING, setSelectedFeedIds } from "./atom" +import { getSelectedFeedIds, resetSelectedFeedIds, setSelectedFeedIds } from "./atom" import { FeedColumnHeader } from "./header" import { useShouldFreeUpSpace } from "./hook" import { FeedList } from "./list" @@ -59,7 +59,7 @@ export function FeedColumn({ children, className }: PropsWithChildren<{ classNam setActive_(args) navigateBackHome(nextActive) - setSelectedFeedIds(SELECT_NOTHING) + resetSelectedFeedIds() }, [active, navigateBackHome, setActive_], ) @@ -169,7 +169,11 @@ export function FeedColumn({ children, className }: PropsWithChildren<{ classNam onPointerDown={useTypeScriptHappyCallback((e) => { if (!(e.target instanceof HTMLElement) || !e.target.closest("[data-feed-id]")) { const nextSelectedFeedIds = getSelectedFeedIds() - setSelectedFeedIds(nextSelectedFeedIds.length === 0 ? nextSelectedFeedIds : []) + if (nextSelectedFeedIds.length > 0) { + setSelectedFeedIds(nextSelectedFeedIds) + } else { + resetSelectedFeedIds() + } } }, [])} > diff --git a/apps/renderer/src/modules/feed-column/item.tsx b/apps/renderer/src/modules/feed-column/item.tsx index 9e2c57374..296e5a56f 100644 --- a/apps/renderer/src/modules/feed-column/item.tsx +++ b/apps/renderer/src/modules/feed-column/item.tsx @@ -1,3 +1,4 @@ +import { useMobile } from "@follow/components/hooks/useMobile.js" import { OouiUserAnonymous } from "@follow/components/icons/OouiUserAnonymous.jsx" import { Tooltip, @@ -29,7 +30,7 @@ import { useListById } from "~/store/list" import { subscriptionActions, useSubscriptionByFeedId } from "~/store/subscription" import { useFeedUnreadStore } from "~/store/unread" -import { useSelectedFeedIds } from "./atom" +import { useSelectedFeedIdsState } from "./atom" import { DraggableContext } from "./context" import { feedColumnStyles } from "./styles" import { UnreadNumber } from "./unread-number" @@ -58,9 +59,10 @@ const FeedItemImpl = ({ view, feedId, className }: FeedItemProps) => { } }) - const [selectedFeedIds, setSelectedFeedIds] = useSelectedFeedIds() + const [selectedFeedIds, setSelectedFeedIds] = useSelectedFeedIdsState() const draggableContext = useContext(DraggableContext) - const isInMultipleSelection = selectedFeedIds.includes(feedId) + const isMobile = useMobile() + const isInMultipleSelection = !isMobile && selectedFeedIds.includes(feedId) const isMultiSelectingButNotSelected = selectedFeedIds.length > 0 && !isInMultipleSelection const handleClick: React.MouseEventHandler = useCallback( diff --git a/apps/renderer/src/modules/feed-column/list.desktop.tsx b/apps/renderer/src/modules/feed-column/list.desktop.tsx index 9c92bd404..505b27478 100644 --- a/apps/renderer/src/modules/feed-column/list.desktop.tsx +++ b/apps/renderer/src/modules/feed-column/list.desktop.tsx @@ -10,7 +10,11 @@ import { useAuthQuery } from "~/hooks/common" import { Queries } from "~/queries" import { useCategoryOpenStateByView } from "~/store/subscription" -import { SELECT_NOTHING, setFeedAreaScrollProgressValue, useSelectedFeedIds } from "./atom" +import { + resetSelectedFeedIds, + setFeedAreaScrollProgressValue, + useSelectedFeedIdsState, +} from "./atom" import { DraggableContext } from "./context" import { useShouldFreeUpSpace } from "./hook" import { @@ -45,7 +49,7 @@ const FeedListImpl = forwardRef(null) const selectoRef = useRef(null) - const [selectedFeedIds, setSelectedFeedIds] = useSelectedFeedIds() + const [selectedFeedIds, setSelectedFeedIds] = useSelectedFeedIdsState() const [currentStartFeedId, setCurrentStartFeedId] = useState(null) useEffect(() => { if (selectedFeedIds.length <= 1) { @@ -135,7 +139,7 @@ const FeedListImpl = forwardRef { if (!isKeyForMultiSelectPressed(e.inputEvent as MouseEvent)) { - setSelectedFeedIds(SELECT_NOTHING) + resetSelectedFeedIds() } }} selectableTargets={["[data-feed-id]"]} diff --git a/apps/renderer/src/modules/feed-column/list.mobile.tsx b/apps/renderer/src/modules/feed-column/list.mobile.tsx index 28b63c2b7..bb7d12ac7 100644 --- a/apps/renderer/src/modules/feed-column/list.mobile.tsx +++ b/apps/renderer/src/modules/feed-column/list.mobile.tsx @@ -4,7 +4,7 @@ import { memo } from "react" import { useTranslation } from "react-i18next" import { useSidebarActiveViewValue } from "~/atoms/sidebar" -import { navigateEntry } from "~/hooks/biz/useNavigateEntry" +import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry" import { useAuthQuery } from "~/hooks/common" import { Queries } from "~/queries" import { useCategoryOpenStateByView } from "~/store/subscription" @@ -46,6 +46,8 @@ const FeedListImpl = ({ className, view }: { className?: string; view: number }) // 2 => 1, 2, 3 const shouldRender = view >= currentActiveView && view < currentActiveView + 2 + const navigateEntry = useNavigateEntry() + return (
@@ -87,6 +89,7 @@ const FeedListImpl = ({ className, view }: { className?: string; view: number }) onClick={() => { navigateEntry({ view, + feedId: null, }) }} className={cn(feedColumnStyles.item, "px-2.5 py-[2px]")} diff --git a/packages/components/src/ui/sheet/context.tsx b/packages/components/src/ui/sheet/context.tsx index 2f10f7c65..c921d500f 100644 --- a/packages/components/src/ui/sheet/context.tsx +++ b/packages/components/src/ui/sheet/context.tsx @@ -4,7 +4,7 @@ import { createContext, useContext } from "react" interface SheetContextValue { dismiss: () => void } -export const SheetContext = createContext(null!) +export const SheetContext = createContext(null) export const useSheetContext = () => useContext(SheetContext) export const sheetStackAtom = atom([] as HTMLDivElement[])