added trash button

apps/passport-client/components/screens/GmailScreen/TrashButton.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { FaTrash } from "react-icons/fa";
+
+export function TrashButton({ onClick }: { onClick: () => void }): ReactNode {
+  return (
+    <div
+      onClick={onClick}
+      className="inline-flex items-center justify-center text-gray-600 hover:bg-gray-400 cursor-pointer m-2 active:bg-gray-500 transition-colors duration-200 active:text-white"
+      style={{
+        borderRadius: "50%",
+        width: "28px",
+        minWidth: "28px",
+        maxWidth: "28px",
+        height: "28px",
+        minHeight: "28px",
+        maxHeight: "28px"
+      }}
+    >
+      <FaTrash size={12} />
+    </div>
+  );
+}

apps/passport-client/components/screens/GmailScreen/ZmailPCDScreen.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo } from "react";
 import { usePCDCollection, useStateContext } from "../../../src/appHooks";
 import { PCDCard } from "../../shared/PCDCard";
 import { BackButton } from "./BackButton";
+import { TrashButton } from "./TrashButton";
 import { useZmailContext } from "./ZmailContext";
 
 export const ZmailPCDScreen = React.memo(ZmailPCDScreenImpl);
@@ -36,16 +37,23 @@ export function ZmailPCDScreenImpl(): JSX.Element | null {
 
   return (
     <div className="h-full flex flex-col">
-      <div className="min-h-3 bg-gray-300 flex-shrink-0">
-        {ctx.viewingPCDID && (
-          <BackButton
-            onClick={() => {
-              ctx.update({
-                viewingPCDID: undefined
-              });
-            }}
-          />
-        )}
+      <div className="min-h-3 bg-gray-300 flex-shrink-0 flex flex-row justify-between items-center">
+        <BackButton
+          onClick={() => {
+            ctx.update({
+              viewingPCDID: undefined
+            });
+          }}
+        />
+
+        <TrashButton
+          onClick={async () => {
+            await dispatch({ type: "remove-pcd", id: pcd.id });
+            ctx.update({
+              viewingPCDID: undefined
+            });
+          }}
+        />
       </div>
       <div className="w-full text-black flex flex-col flex-grow overflow-y-scroll">
         <div className="w-full h-full flex flex-row">