chore: revert dnd

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

@@ -1,4 +1,3 @@
-import { useDroppable } from "@dnd-kit/core"
 import { MotionButtonBase } from "@follow/components/ui/button/index.js"
 import { LoadingCircle } from "@follow/components/ui/loading/index.jsx"
 import { useScrollViewElement } from "@follow/components/ui/scroll-area/hooks.js"
@@ -156,24 +155,13 @@ function FeedCategoryImpl({ data: ids, view, categoryOpenStateData }: FeedCatego
 
   const isAutoGroupedCategory = !!folderName && !subscriptionCategoryExist(folderName)
 
-  const { isOver, setNodeRef } = useDroppable({
-    id: `category-${folderName}`,
-    disabled: isAutoGroupedCategory,
-    data: {
-      category: folderName,
-      view,
-    },
-  })
-
   return (
     <div tabIndex={-1} onClick={stopPropagation}>
       {!!showCollapse && (
         <div
-          ref={setNodeRef}
           data-active={isActive || isContextMenuOpen}
           className={cn(
             "my-px flex w-full cursor-menu items-center justify-between rounded-md px-2.5",
-            isOver && "border-theme-accent-400 bg-theme-accent-400/60",
             feedColumnStyles.item,
           )}
           onClick={(e) => {
@@ -318,7 +306,7 @@ function FeedCategoryImpl({ data: ids, view, categoryOpenStateData }: FeedCatego
         {open && (
           <m.div
             ref={itemsRef}
-            className="space-y-px"
+            className="space-y-px overflow-hidden"
             initial={
               !!showCollapse && {
                 height: 0,

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

@@ -1,6 +1,4 @@
-import { DndContext, pointerWithin, useDroppable } from "@dnd-kit/core"
 import { ActionButton } from "@follow/components/ui/button/index.js"
-import type { FeedViewType } from "@follow/constants"
 import { Routes, views } from "@follow/constants"
 import { useTypeScriptHappyCallback } from "@follow/hooks"
 import { useRegisterGlobalContext } from "@follow/shared/bridge"
@@ -21,14 +19,13 @@ import { shortcuts } from "~/constants/shortcuts"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { useReduceMotion } from "~/hooks/biz/useReduceMotion"
 import { getRouteParams } from "~/hooks/biz/useRouteParams"
-import { useBatchUpdateSubscription } from "~/hooks/biz/useSubscriptionActions"
 import { useAuthQuery } from "~/hooks/common"
 import { Queries } from "~/queries"
 import { useSubscriptionStore } from "~/store/subscription"
 import { useFeedUnreadStore } from "~/store/unread"
 
 import { WindowUnderBlur } from "../../components/ui/background"
-import { getSelectedFeedIds, setSelectedFeedIds, useSelectedFeedIds } from "./atom"
+import { getSelectedFeedIds, setSelectedFeedIds } from "./atom"
 import { FeedColumnHeader } from "./header"
 import { FeedList } from "./list"
 
@@ -138,72 +135,50 @@ export function FeedColumn({ children, className }: PropsWithChildren<{ classNam
     window.router.navigate(Routes.Discover)
   })
 
-  const [selectedIds, setSelectedIds] = useSelectedFeedIds()
-
-  const { mutate } = useBatchUpdateSubscription()
-
   return (
-    <DndContext
-      collisionDetection={pointerWithin}
-      onDragEnd={(event) => {
-        if (!event.over) {
-          return
-        }
-
-        const { category, view } = event.over.data.current as {
-          category: string
-          view: FeedViewType
-        }
-
-        mutate({ category, view, feedIdList: selectedIds })
-
-        setSelectedIds([])
-      }}
+    <WindowUnderBlur
+      className={cn("relative flex h-full flex-col space-y-3 pt-2.5", className)}
+      onClick={useCallback(() => navigateBackHome(), [navigateBackHome])}
     >
-      <WindowUnderBlur
-        className={cn("relative flex h-full flex-col space-y-3 pt-2.5", className)}
-        onClick={useCallback(() => navigateBackHome(), [navigateBackHome])}
-      >
-        <FeedColumnHeader />
+      <FeedColumnHeader />
 
-        <div
-          className="flex w-full justify-between px-3 text-xl text-theme-vibrancyFg"
-          onClick={stopPropagation}
-        >
+      <div
+        className="flex w-full justify-between px-3 text-xl text-theme-vibrancyFg"
+        onClick={stopPropagation}
+      >
+        {views.map((item, index) => (
+          <ViewSwitchButton
+            key={item.name}
+            item={item}
+            index={index}
+            active={active}
+            setActive={setActive}
+            useHotkeysSwitch={useHotkeysSwitch}
+            setUseHotkeysSwitch={setUseHotkeysSwitch}
+          />
+        ))}
+      </div>
+      <div
+        className="relative flex size-full overflow-hidden"
+        ref={carouselRef}
+        onPointerDown={useTypeScriptHappyCallback((e) => {
+          if (!(e.target instanceof HTMLElement) || !e.target.closest("[data-feed-id]")) {
+            const nextSelectedFeedIds = getSelectedFeedIds()
+            setSelectedFeedIds(nextSelectedFeedIds.length === 0 ? nextSelectedFeedIds : [])
+          }
+        }, [])}
+      >
+        <SwipeWrapper active={active}>
           {views.map((item, index) => (
-            <ViewSwitchButton
-              key={item.name}
-              item={item}
-              index={index}
-              active={active}
-              setActive={setActive}
-              useHotkeysSwitch={useHotkeysSwitch}
-              setUseHotkeysSwitch={setUseHotkeysSwitch}
-            />
+            <section key={item.name} className="h-full w-feed-col shrink-0 snap-center">
+              <FeedList className="flex size-full flex-col text-sm" view={index} />
+            </section>
           ))}
-        </div>
-        <div
-          className="relative flex size-full"
-          ref={carouselRef}
-          onPointerDown={useTypeScriptHappyCallback((e) => {
-            if (!(e.target instanceof HTMLElement) || !e.target.closest("[data-feed-id]")) {
-              const nextSelectedFeedIds = getSelectedFeedIds()
-              setSelectedFeedIds(nextSelectedFeedIds.length === 0 ? nextSelectedFeedIds : [])
-            }
-          }, [])}
-        >
-          <SwipeWrapper active={active}>
-            {views.map((item, index) => (
-              <section key={item.name} className="h-full w-feed-col shrink-0 snap-center">
-                <FeedList className="flex size-full flex-col text-sm" view={index} />
-              </section>
-            ))}
-          </SwipeWrapper>
-        </div>
+        </SwipeWrapper>
+      </div>
 
-        {children}
-      </WindowUnderBlur>
-    </DndContext>
+      {children}
+    </WindowUnderBlur>
   )
 }
 
@@ -221,17 +196,8 @@ const ViewSwitchButton: FC<{
   const { t } = useTranslation()
   const showSidebarUnreadCount = useUISettingKey("sidebarShowUnreadCount")
 
-  const { isOver, setNodeRef } = useDroppable({
-    id: `view-${item.name}`,
-    data: {
-      category: "",
-      view: item.view,
-    },
-  })
-
   return (
     <ActionButton
-      ref={setNodeRef}
       key={item.name}
       tooltip={t(item.name)}
       shortcut={`${index + 1}`}
@@ -240,7 +206,6 @@ const ViewSwitchButton: FC<{
         "flex h-11 flex-col items-center gap-1 text-xl",
         ELECTRON ? "hover:!bg-theme-item-hover" : "",
         active === index && useHotkeysSwitch ? "bg-theme-item-active" : "",
-        isOver && "border-theme-accent-400 bg-theme-accent-400/60",
       )}
       onClick={(e) => {
         startTransition(() => {

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

@@ -11,7 +11,7 @@ import { nextFrame } from "@follow/utils/dom"
 import { UrlBuilder } from "@follow/utils/url-builder"
 import { cn } from "@follow/utils/utils"
 import dayjs from "dayjs"
-import { memo, useCallback, useContext, useState } from "react"
+import { memo, useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import { useShowContextMenu } from "~/atoms/context-menu"
@@ -29,7 +29,6 @@ import { subscriptionActions, useSubscriptionByFeedId } from "~/store/subscripti
 import { useFeedUnreadStore } from "~/store/unread"
 
 import { useSelectedFeedIds } from "./atom"
-import { DraggableContext } from "./context"
 import { feedColumnStyles } from "./styles"
 import { UnreadNumber } from "./unread-number"
 
@@ -58,7 +57,6 @@ const FeedItemImpl = ({ view, feedId, className }: FeedItemProps) => {
   })
 
   const [selectedFeedIds, setSelectedFeedIds] = useSelectedFeedIds()
-  const draggableContext = useContext(DraggableContext)
   const isInMultipleSelection = selectedFeedIds.includes(feedId)
 
   const handleClick: React.MouseEventHandler<HTMLDivElement> = useCallback(
@@ -103,13 +101,6 @@ const FeedItemImpl = ({ view, feedId, className }: FeedItemProps) => {
   return (
     <>
       <div
-        {...(isInMultipleSelection && draggableContext?.attributes
-          ? draggableContext.attributes
-          : {})}
-        {...(isInMultipleSelection && draggableContext?.listeners
-          ? draggableContext.listeners
-          : {})}
-        style={isInMultipleSelection ? draggableContext?.style : undefined}
         data-feed-id={feedId}
         data-active={isActive || isContextMenuOpen || isInMultipleSelection}
         className={cn(

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

@@ -1,4 +1,3 @@
-import { useDraggable } from "@dnd-kit/core"
 import { ScrollArea } from "@follow/components/ui/scroll-area/index.js"
 import type { FeedViewType } from "@follow/constants"
 import { views } from "@follow/constants"
@@ -31,7 +30,6 @@ import {
   useFeedListSort,
   useSelectedFeedIds,
 } from "./atom"
-import { DraggableContext } from "./context"
 import { SortableFeedList, SortByAlphabeticalInbox, SortByAlphabeticalList } from "./sort-by"
 import { feedColumnStyles } from "./styles"
 import { UnreadNumber } from "./unread-number"
@@ -131,35 +129,7 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
 
   const scrollerRef = useRef<HTMLDivElement>(null)
   const selectoRef = useRef<Selecto>(null)
-  const [selectedFeedIds, setSelectedFeedIds] = useSelectedFeedIds()
-
-  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
-    id: "selected-feed",
-    disabled: selectedFeedIds.length === 0,
-  })
-  const style = useMemo(
-    () =>
-      transform
-        ? ({
-            transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-            transitionDuration: "0",
-            transition: "none",
-          } as React.CSSProperties)
-        : undefined,
-    [transform],
-  )
-
-  const draggableContextValue = useMemo(
-    () => ({
-      attributes,
-      listeners,
-      style: {
-        ...style,
-        willChange: "transform",
-      },
-    }),
-    [attributes, listeners, style],
-  )
+  const [_selectedFeedIds, setSelectedFeedIds] = useSelectedFeedIds()
 
   return (
     <div className={cn(className, "font-medium")}>
@@ -169,7 +139,6 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
         ref={selectoRef}
         rootContainer={document.body}
         dragContainer={"#feeds-area"}
-        dragCondition={() => !(selectedFeedIds.length > 0 && isDragging)}
         selectableTargets={["[data-feed-id]"]}
         continueSelect
         hitRate={10}
@@ -207,8 +176,8 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
         }}
         mask={false}
         flex
-        viewportClassName={cn("!px-3", isDragging && "!overflow-visible")}
-        rootClassName={cn("h-full", isDragging && "overflow-visible")}
+        viewportClassName={cn("!px-3")}
+        rootClassName={cn("h-full")}
       >
         <div
           data-active={feedId === FEED_COLLECTION_LIST}
@@ -247,38 +216,36 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
           </>
         )}
 
-        <DraggableContext.Provider value={draggableContextValue}>
-          <div className="space-y-px" id="feeds-area" ref={setNodeRef}>
-            {(hasListData || hasInboxData) && (
-              <div
-                className={cn(
-                  "mb-1 flex h-6 w-full shrink-0 items-center rounded-md px-2.5 text-xs font-semibold text-theme-vibrancyFg transition-colors",
-                  Object.keys(feedsData).length === 0 ? "mt-0" : "mt-1",
-                )}
+        <div className="space-y-px" id="feeds-area">
+          {(hasListData || hasInboxData) && (
+            <div
+              className={cn(
+                "mb-1 flex h-6 w-full shrink-0 items-center rounded-md px-2.5 text-xs font-semibold text-theme-vibrancyFg transition-colors",
+                Object.keys(feedsData).length === 0 ? "mt-0" : "mt-1",
+              )}
+            >
+              {t("words.feeds")}
+            </div>
+          )}
+          {hasData ? (
+            <SortableFeedList
+              view={view}
+              data={feedsData}
+              categoryOpenStateData={categoryOpenStateData}
+            />
+          ) : (
+            <div className="flex h-full flex-1 items-center font-normal text-zinc-500">
+              <Link
+                to="/discover"
+                className="absolute inset-0 mt-[-3.75rem] flex h-full flex-1 cursor-menu flex-col items-center justify-center gap-2"
+                onClick={stopPropagation}
               >
-                {t("words.feeds")}
-              </div>
-            )}
-            {hasData ? (
-              <SortableFeedList
-                view={view}
-                data={feedsData}
-                categoryOpenStateData={categoryOpenStateData}
-              />
-            ) : (
-              <div className="flex h-full flex-1 items-center font-normal text-zinc-500">
-                <Link
-                  to="/discover"
-                  className="absolute inset-0 mt-[-3.75rem] flex h-full flex-1 cursor-menu flex-col items-center justify-center gap-2"
-                  onClick={stopPropagation}
-                >
-                  <i className="i-mgc-add-cute-re text-3xl" />
-                  <span className="text-base">{t("sidebar.add_more_feeds")}</span>
-                </Link>
-              </div>
-            )}
-          </div>
-        </DraggableContext.Provider>
+                <i className="i-mgc-add-cute-re text-3xl" />
+                <span className="text-base">{t("sidebar.add_more_feeds")}</span>
+              </Link>
+            </div>
+          )}
+        </div>
       </ScrollArea.ScrollArea>
     </div>
   )