improve UI a bit

src/app/studio/[ownerId]/main.tsx

@@ -13,7 +13,7 @@ export default function Main({ videoTasks }: { videoTasks: VideoTask[] }) {
 
   return (
     <div className="flex flex-col md:flex-row">
-      <div className="h-full flex flex-col space-y-4 w-full md:w-[600px] px-4 py-8">
+      <div className="h-full flex flex-col space-y-4 w-full md:w-[800px] px-4 py-8">
         <VideoForm />
         <VideoTasksQueue videoTasks={videoTasks} onSelectVideo={selectVideo} />
         <RefreshStudio />

src/components/business/tasks/columns.tsx

@@ -51,6 +51,7 @@ export const columns: ColumnDef<VideoTask>[] = [
         </div>
       )
     },
+    enableSorting: false,
   },
   {
     accessorKey: "progressPercent",
@@ -61,21 +62,19 @@ export const columns: ColumnDef<VideoTask>[] = [
       const progress = Number(row.getValue("progressPercent") || 0)
 
       return (
-        <div className="flex w-[30px] items-center">
+        <div className="flex items-center">
           <span>{progress}%</span>
         </div>
       )
     },
-    filterFn: (row, id, value) => {
-      return value.includes(row.getValue(id))
-    },
+    enableSorting: false,
   },
   {
     accessorKey: "preview",
     header: ({ column }) => (
       null // no header
     ),
-    cell: ({ row }) => <div className="w-[120px]">
+    cell: ({ row }) => <div className="w-[100px]">
       <a
         className="hover:underline cursor-pointer"
         target="_blank"
@@ -91,11 +90,11 @@ export const columns: ColumnDef<VideoTask>[] = [
     header: ({ column }) => (
       null // no header
     ),
-    cell: ({ row }) => <div className="w-[80px]">
+    cell: ({ row }) => <div className="">
       <a
         className="hover:underline cursor-pointer"
         target="_blank"
-        href={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${row.getValue("fileName")}`}>Download</a>
+        href={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${row.getValue("fileName")}`}>Save</a>
     </div>,
     enableSorting: false,
     enableHiding: false,

src/components/business/tasks/video-tasks-queue.tsx

@@ -95,6 +95,7 @@ export function VideoTasksQueue({
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}
+                  className="cursor-pointer"
                   onClick={() => {
                     const videoId = `${row.getValue("id") || ""}`
                     const video = videoTasks.find(({ id }) => id === videoId)

src/components/business/video-form.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useTransition } from "react"
 import { usePathname } from "next/navigation"
 
-// import { experimental_useFormStatus as useFormStatus } from "react-dom"
+import { experimental_useFormStatus as useFormStatus } from "react-dom"
 import { Textarea } from "@/components/ui/textarea"
 import { Button } from "@/components/ui/button"
 import { formSubmit } from "@/server/actions"
@@ -11,7 +11,7 @@ import { formSubmit } from "@/server/actions"
 export const VideoForm = () => {
   const pathname = usePathname()
   const ownerId = pathname.split("/").pop()
-  const [isPending, startTransition] = useTransition()
+  const { pending } = useFormStatus()
 
   return (
     <form
@@ -57,8 +57,9 @@ export const VideoForm = () => {
           size="lg"
           className="text-md md:w-32"
           type="submit"
+          disabled={pending}
         >
-          Generate
+          {pending ? "Loading.." : "Generate"}
         </Button>
       </div>
     </form>

src/components/business/video-player.tsx

@@ -5,7 +5,9 @@ import { VideoTask } from "@/app/types"
 export const VideoPlayer = ({ video }: { video?: VideoTask }) => {
 
   if (typeof video === "undefined") {
-    return <p>No video to display</p>
+    return <div className="flex w-full h-screen items-center justify-center text-center">
+      <div>No video to display</div>
+    </div>
   }
 
   return (