From d8b0ec3cb96418a40e366b4b9c5cf67d4d27a6d1 Mon Sep 17 00:00:00 2001
From: Alex Kern <alex@kern.io>
Date: Sun, 8 Sep 2024 21:56:19 -0700
Subject: [PATCH] better list item format

---
 src/app/page.tsx            | 15 +++++++----
 src/components/Uploader.tsx | 53 ++++++++++++++++++++++++++++---------
 2 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0937927..f879839 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import React, { useCallback, useState } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import WebRTCProvider from '../components/WebRTCProvider'
 import DropZone from '../components/DropZone'
 import UploadFileList from '../components/UploadFileList'
@@ -13,6 +14,8 @@ import Spinner from '../components/Spinner'
 import Wordmark from '../components/Wordmark'
 import CancelButton from '../components/CancelButton'
 
+const queryClient = new QueryClient()
+
 function PageWrapper({
   children,
   isRotating = false,
@@ -21,11 +24,13 @@ function PageWrapper({
   isRotating?: boolean
 }): JSX.Element {
   return (
-    <div className="flex flex-col items-center space-y-5 py-10 max-w-2xl mx-auto">
-      <Spinner direction="up" isRotating={isRotating} />
-      <Wordmark />
-      {children}
-    </div>
+    <QueryClientProvider client={queryClient}>
+      <div className="flex flex-col items-center space-y-5 py-10 max-w-2xl mx-auto">
+        <Spinner direction="up" isRotating={isRotating} />
+        <Wordmark />
+        {children}
+      </div>
+    </QueryClientProvider>
   )
 }
 
diff --git a/src/components/Uploader.tsx b/src/components/Uploader.tsx
index 2805954..19defc7 100644
--- a/src/components/Uploader.tsx
+++ b/src/components/Uploader.tsx
@@ -325,6 +325,46 @@ function CopyableInput({ label, value }: { label: string; value: string }) {
   )
 }
 
+function ConnectionListItem({ conn }: { conn: UploaderConnection }) {
+  const getStatusColor = (status: UploaderConnectionStatus) => {
+    switch (status) {
+      case UploaderConnectionStatus.Uploading:
+        return 'bg-green-500'
+      case UploaderConnectionStatus.Paused:
+        return 'bg-yellow-500'
+      case UploaderConnectionStatus.Done:
+        return 'bg-blue-500'
+      case UploaderConnectionStatus.Closed:
+        return 'bg-red-500'
+      default:
+        return 'bg-gray-500'
+    }
+  }
+
+  return (
+    <div className="w-full mt-4">
+      <div className="flex items-center space-x-2 mb-2">
+        <span className="text-sm font-medium">
+          {conn.browserName} {conn.browserVersion}
+        </span>
+        <span
+          className={`px-1.5 py-0.5 text-white rounded-md transition-colors duration-200 font-medium text-[10px] ${getStatusColor(
+            conn.status,
+          )}`}
+        >
+          {conn.status}
+        </span>
+      </div>
+      <ProgressBar
+        value={
+          (conn.completedFiles + conn.currentFileProgress) / conn.totalFiles
+        }
+        max={1}
+      />
+    </div>
+  )
+}
+
 export default function Uploader({
   files,
   password,
@@ -355,18 +395,7 @@ export default function Uploader({
         </div>
       </div>
       {connections.map((conn, i) => (
-        <div key={i} className="w-full mt-4">
-          {/* TODO(@kern): Make this look nicer */}
-          <div className="text-sm">
-            {conn.status} {conn.browserName} {conn.browserVersion}
-          </div>
-          <ProgressBar
-            value={
-              (conn.completedFiles + conn.currentFileProgress) / conn.totalFiles
-            }
-            max={1}
-          />
-        </div>
+        <ConnectionListItem key={i} conn={conn} />
       ))}
     </>
   )