fix: only completed items can be unpinned. Maybe cross iscon is not the best

app/components/pinning-network-banner.tsx

@@ -78,12 +78,26 @@ export const PinningNetworkBanner = () => {
 };
 
 const PinCidItem = ({ item }: { item: PinningStatus }) => {
+  const { unpin } = usePinning();
+
   return (
     <div className="px-4 mb-4">
-      <div className="flex flex-col items-center rounded-lg py-2 px-4 hover:bg-primary/50 group">
+      <div className="relative flex flex-col items-center rounded-lg py-2 px-4 hover:bg-primary/50 group">
         <div className="flex justify-between items-center w-full">
           <span className="font-semibold">{item.id}</span>
           <span className="group-hover:hidden">{item.progress}%</span>
+          {item.status === "completed" ? (
+            <Button
+              variant="ghost"
+              className="absolute top-2 right-2 hidden group-hover:flex rounded-full h-3"
+              onClick={() =>
+                unpin({
+                  cid: item.id,
+                })
+              }>
+              <Cross2Icon />
+            </Button>
+          ) : null}
         </div>
         <Progress value={item.progress} className="h-2" />
       </div>