From d7f0154fb89dc9dfafc2bc7fd22e24c6ebaaafc7 Mon Sep 17 00:00:00 2001
From: Derrick Hammer <derrick@derrickhammer.com>
Date: Fri, 29 Mar 2024 13:21:03 -0400
Subject: [PATCH] fix: add a queued tab to the pinning accordion

---
 app/components/pinning-network-banner.tsx | 26 ++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/components/pinning-network-banner.tsx b/app/components/pinning-network-banner.tsx
index bad556c..f5842d0 100644
--- a/app/components/pinning-network-banner.tsx
+++ b/app/components/pinning-network-banner.tsx
@@ -15,7 +15,15 @@ import type { PinningStatus } from "~/data/pinning";
 export const PinningNetworkBanner = () => {
   const { progressData: data } = usePinning();
 
-  const itemsLeft = useMemo(
+    const itemsQueued = useMemo(
+        () =>
+            data?.items.filter((item: PinningStatus) =>
+                item.status.includes("queued"),
+            ) || [],
+        [data],
+    );
+
+  const itemsProcessing = useMemo(
     () =>
       data?.items.filter((item: PinningStatus) =>
         item.status.includes("processing"),
@@ -44,12 +52,24 @@ export const PinningNetworkBanner = () => {
           <AccordionContent>
             <Tabs className="w-full" defaultValue="inProgress">
               <TabsList className="rounded-none">
+                <TabsTrigger value="queued">Queued</TabsTrigger>
                 <TabsTrigger value="inProgress">In Progress</TabsTrigger>
                 <TabsTrigger value="completed">Completed</TabsTrigger>
               </TabsList>
+                <TabsContent value="queued">
+                    {itemsQueued.length ? (
+                    itemsQueued.map((item: PinningStatus) => (
+                        <PinCidItem key={item.id} item={item} />
+                    ))
+                    ) : (
+                    <div className="text-muted text-sm flex justify-center items-center h-10">
+                        Nothing yet.
+                    </div>
+                    )}
+                </TabsContent>
               <TabsContent value="inProgress">
-                {itemsLeft.length ? (
-                  itemsLeft.map((item: PinningStatus) => (
+                {itemsProcessing.length ? (
+                    itemsProcessing.map((item: PinningStatus) => (
                     <PinCidItem key={item.id} item={item} />
                   ))
                 ) : (