feat(v2): animate file list (#109)

* feat(v2): animate file list

* fix tests

package.json

@@ -23,6 +23,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@formkit/auto-animate": "0.8.1",
     "@hookform/resolvers": "3.3.2",
     "@radix-ui/react-label": "2.0.2",
     "@radix-ui/react-navigation-menu": "1.1.4",

src/components/FileList.tsx

@@ -1,3 +1,4 @@
+import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { ListXIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { getFiles, useStore } from 'src/store';
@@ -9,10 +10,11 @@ export const FileList = () => {
   const { t } = useTranslation();
   const files = useStore(getFiles);
   const clearFiles = useStore(state => state.clearFiles);
+  const [listRef] = useAutoAnimate();
 
   return (
     <div className="relative h-full">
-      <ul className="flex h-full flex-col gap-3 overflow-y-auto px-4 pb-14 pt-4">
+      <ul className="flex h-full flex-col gap-3 overflow-y-auto px-4 pb-14 pt-4" ref={listRef}>
         {files.map(file => (
           <li key={file.path}>
             <FileCard file={file} />

src/components/__tests__/FileList.test.tsx

@@ -8,6 +8,10 @@ vi.mock('src/store/selectors', () => ({
   getFiles: vi.fn(),
 }));
 
+vi.mock('@formkit/auto-animate/react', () => ({
+  useAutoAnimate: vi.fn().mockReturnValue([]),
+}));
+
 const file1 = { name: 'file1.mkv', path: '/path/file1.mkv', size: 1024 } as VideoFile;
 const file2 = { name: 'file2.mkv', path: '/path/file2.mkv', size: 1024 } as VideoFile;
 const file3 = { name: 'file3.mkv', path: '/path/file3.mkv', size: 1024 } as VideoFile;