chore: cleanup deps

package.json

@@ -46,9 +46,7 @@
     "overlayscrollbars-react": "^0.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-intersection-observer": "^9.13.1",
-    "react-use": "^17.5.1",
-    "zod": "^3.23.8"
+    "react-use": "^17.5.1"
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^1.14.3",

pnpm-lock.yaml

@@ -86,9 +86,6 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
-      react-intersection-observer:
-        specifier: ^9.13.1
-        version: 9.13.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-use:
         specifier: ^17.5.1
         version: 17.5.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -4097,15 +4094,6 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
-  react-intersection-observer@9.13.1:
-    resolution: {integrity: sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==}
-    peerDependencies:
-      react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-
   react-universal-interface@0.6.2:
     resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==}
     peerDependencies:
@@ -9127,12 +9115,6 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
-  react-intersection-observer@9.13.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-    optionalDependencies:
-      react-dom: 18.3.1(react@18.3.1)
-
   react-universal-interface@0.6.2(react@18.3.1)(tslib@2.7.0):
     dependencies:
       react: 18.3.1

src/components/section/card.tsx

@@ -2,7 +2,7 @@ import type { NewsItem, SourceID, SourceInfo, SourceResponse } from "@shared/typ
 import type { UseQueryResult } from "@tanstack/react-query"
 import { useQuery } from "@tanstack/react-query"
 import clsx from "clsx"
-import { useInView } from "react-intersection-observer"
+import { useInView } from "framer-motion"
 import { useAtom } from "jotai"
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from "react"
 import { sources } from "@shared/sources"
@@ -33,10 +33,9 @@ interface Query {
 
 export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragged, handleListeners, style, ...props }, dndRef) => {
   const ref = useRef<HTMLDivElement>(null)
-  const { ref: inViewRef, inView } = useInView()
+  const inView = useInView(ref)
 
   useImperativeHandle(dndRef, () => ref.current!)
-  useImperativeHandle(inViewRef, () => ref.current!)
 
   return (
     <div

src/styles/globals.css

@@ -4,7 +4,6 @@
 html,
 body,
 #app {
-  --col-count: 5;
   height: 100vh;
   margin: 0;
   padding: 0;