feat(video): add video list component to display videos

Implement VideoList component to show videos from a provider. Replace placeholder div with the new component in VideoPage.

src/renderer/src/pages/video/VideoList.tsx

@@ -0,0 +1,20 @@
+import { useVideos } from '@renderer/hooks/video/useVideos'
+import { Video } from '@renderer/types/video'
+
+export type VideoListProps = { providerId: string }
+
+export const VideoList = ({ providerId }: VideoListProps) => {
+  const { videos } = useVideos(providerId)
+  return (
+    <div className="w-40">
+      {videos.map((video) => (
+        <VideoListItem key={video.id} video={video} />
+      ))}
+    </div>
+  )
+}
+
+const VideoListItem = ({ video }: { video: Video }) => {
+  // TODO: get thumbnail from video
+  return <div>{video.metadata.id}</div>
+}

src/renderer/src/pages/video/VideoPage.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next'
 
 import { ModelSetting } from './settings/ModelSetting'
 import { ProviderSetting } from './settings/ProviderSetting'
+import { VideoList } from './VideoList'
 import { VideoPanel } from './VideoPanel'
 
 export const VideoPage = () => {
@@ -31,7 +32,7 @@ export const VideoPage = () => {
         <VideoPanel provider={provider} />
         <Divider orientation="vertical" />
         {/* Video list */}
-        <div className="w-40"></div>
+        <VideoList providerId={providerId} />
       </div>
     </div>
   )