feat(web/recent): display recently downloaded jobs

services/backend/generated/types/index.ts

@@ -0,0 +1,64 @@
+// Code generated by tygo. DO NOT EDIT.
+
+//////////
+// source: job.go
+
+export interface DownloadJob {
+  ID: string;
+  URL: string;
+  TIMESTAMP: string /* RFC3339 */;
+}
+export interface JobData {
+  ID: string;
+  JobID: string;
+  URL: string;
+  IsPlaylist: boolean;
+  STATUS: string;
+  PROGRESS: number /* int */;
+  CreatedAt: string /* RFC3339 */;
+  UpdatedAt: string /* RFC3339 */;
+}
+
+//////////
+// source: metadata.go
+
+export interface VideoMetadata {
+  id: string;
+  title: string;
+  uploader: string;
+  filesize: number /* int64 */;
+  duration: number /* float64 */;
+  format: string;
+  thumbnail: string;
+}
+export interface PlaylistMetadata {
+  id: string;
+  title: string;
+  description: string;
+}
+
+//////////
+// source: video.go
+
+/**
+ * Video represents metadata for a single video.
+ */
+export interface Video {
+  id: number /* int */; // Primary key in database
+  job_id: string; // ID associated with the download job
+  title: string; // Title of the video
+  uploader: string; // Uploader or channel name
+  file_path: string; // Path where the video file is stored
+  last_downloaded_at: string /* RFC3339 */; // Timestamp of when the video was last downloaded
+  length: number /* float64 */; // Duration of the video in seconds
+  size: number /* int64 */; // File size in bytes
+  quality: string; // Video quality
+}
+/**
+ * Playlist represents metadata for a playlist or channel.
+ */
+export interface Playlist {
+  id: string; // Playlist or channel ID
+  title: string; // Title of the playlist or channel
+  description: string; // Description of the playlist or channel
+}

web/app/page.tsx

@@ -2,16 +2,17 @@
 
 import {UrlInput} from "@/components/url-input";
 import JobProgress from "@/components/job-progress";
+import Recent from "@/components/recent";
 
 export default function Home() {
-
-
     return (
-    <div className="flex flex-col w-full min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col w-full">
-          <UrlInput />
-          <JobProgress />
-      </main>
-    </div>
-  );
+        <div
+            className="flex flex-col w-full min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+            <main className="flex flex-col w-full">
+                <UrlInput/>
+                <JobProgress/>
+                <Recent/>
+            </main>
+        </div>
+    );
 }

web/components/recent.tsx

@@ -0,0 +1,52 @@
+import React, {useEffect, useState} from 'react';
+import {Card, CardHeader, CardContent, CardTitle} from "@/components/ui/card";
+import {Progress} from "@/components/ui/progress";
+import {JobData} from "@/types";
+import useAppState from "@/store/appState";
+
+const Recent: React.FC = () => {
+    const [jobs, setJobs] = useState<JobData[]>();
+    const [message, setMessage] = useState("");
+
+    useEffect(() => {
+        fetch(process.env.NEXT_PUBLIC_SERVER_URL + "/recent").then((res) => {
+            if (!res.ok) {
+                setMessage("No recent jobs found.");
+                return;
+            }
+            return res.json()
+        }).then((data) => {
+            setJobs(data.message);
+        });
+
+        const unsubscribe = useAppState.subscribe(
+            (state) => {
+                if (state.isDownloading) {
+                    setMessage('')
+                    unsubscribe();
+                }
+            }
+        );
+    }, []);
+
+    return (
+        <div className="space-y-4 max-w-screen-md">
+            {jobs && !message && jobs.map((job) => (
+                <Card key={job.JobID} className="w-full max-w-screen-sm">
+                    <CardHeader>
+                        <CardTitle>{job.URL}</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <p>
+                            Progress: ({job.PROGRESS}%)
+                        </p>
+                        <Progress value={job.PROGRESS} className="mt-2"/>
+                    </CardContent>
+                </Card>
+            ))}
+            {message && <p>{message}</p>}
+        </div>
+    );
+};
+
+export default Recent;

web/components/url-input.tsx

@@ -7,12 +7,15 @@ import {Button} from "@/components/ui/button"
 import {Input} from "@/components/ui/input"
 import {AlertDestructive} from "@/components/alert-destructive";
 import {toast} from "sonner";
+import useAppState from "@/store/appState";
 
 export function UrlInput() {
     const [url, setUrl] = useState("")
     const [loading, setLoading] = useState(false)
     const [error, setError] = useState("")
+
     const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL
+    const setIsDownloading = useAppState((state) => state.setIsDownloading);
 
     const isValidYoutubeUrl = (url: string) => {
         const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+$/
@@ -27,6 +30,7 @@ export function UrlInput() {
         }
 
         setLoading(true)
+        setIsDownloading(true)
         try {
             const response = await fetch(`${SERVER_URL}/download`, {
                 method: "POST",

web/package.json

@@ -24,7 +24,8 @@
     "react-dom": "19.0.0-rc-69d4b800-20241021",
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.5",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@types/node": "^22",

web/store/appState.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface AppState {
+  isDownloading: boolean;
+  setIsDownloading: (value: boolean) => void;
+}
+
+const useAppState = create<AppState>((set) => ({
+  isDownloading: false, // Initial state
+  setIsDownloading: (value) => set(() => ({ isDownloading: value })), // Mutator
+}));
+
+export default useAppState;

web/types/index.ts

@@ -0,0 +1,64 @@
+// Code generated by tygo. DO NOT EDIT.
+
+//////////
+// source: job.go
+
+export interface DownloadJob {
+  ID: string;
+  URL: string;
+  TIMESTAMP: string /* RFC3339 */;
+}
+export interface JobData {
+  ID: string;
+  JobID: string;
+  URL: string;
+  IsPlaylist: boolean;
+  STATUS: string;
+  PROGRESS: number /* int */;
+  CreatedAt: string /* RFC3339 */;
+  UpdatedAt: string /* RFC3339 */;
+}
+
+//////////
+// source: metadata.go
+
+export interface VideoMetadata {
+  id: string;
+  title: string;
+  uploader: string;
+  filesize: number /* int64 */;
+  duration: number /* float64 */;
+  format: string;
+  thumbnail: string;
+}
+export interface PlaylistMetadata {
+  id: string;
+  title: string;
+  description: string;
+}
+
+//////////
+// source: video.go
+
+/**
+ * Video represents metadata for a single video.
+ */
+export interface Video {
+  id: number /* int */; // Primary key in database
+  job_id: string; // ID associated with the download job
+  title: string; // Title of the video
+  uploader: string; // Uploader or channel name
+  file_path: string; // Path where the video file is stored
+  last_downloaded_at: string /* RFC3339 */; // Timestamp of when the video was last downloaded
+  length: number /* float64 */; // Duration of the video in seconds
+  size: number /* int64 */; // File size in bytes
+  quality: string; // Video quality
+}
+/**
+ * Playlist represents metadata for a playlist or channel.
+ */
+export interface Playlist {
+  id: string; // Playlist or channel ID
+  title: string; // Title of the playlist or channel
+  description: string; // Description of the playlist or channel
+}