Add printing capabilities for emails.

web/app/(main)/emails/components-client.jsx

@@ -1,11 +1,13 @@
 'use client';
 
 import { useRef, useEffect } from 'react';
-import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import { Letter } from 'react-letter';
 import { extract } from 'letterparser';
 import { format, formatDistanceToNow } from 'date-fns';
+import { useReactToPrint } from 'react-to-print';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPrint } from '@fortawesome/free-solid-svg-icons';
 
 import { ThreadEntriesSkeleton, Card, ThreadEntryScrollContainer } from './components-server';
 import { useApiCall, useTextApiCall } from '@/lib/api';
@@ -92,7 +94,7 @@ export const ThreadEntry = ({ entry }) => {
   }, [emailRef.current]);
 
   return (
-    <Card id={`entry-${entry.entryId}`}>
+    <Card id={`entry-${entry.entryId}`} className="break-inside-avoid">
       <div className="p-4 border-b">
         <div className="flex items-center space-x-1">
           <div className="flex flex-1 justify-between items-baseline space-x-1">
@@ -127,17 +129,26 @@ export const ThreadEntry = ({ entry }) => {
 
 
 export const ThreadEntriesFetch = ({ threadId }) => {
+  const printRef = useRef(null);
+  const triggerPrint = useReactToPrint({ contentRef: printRef });
   const { data } = useApiCall(`api/email/entries?threadId=${threadId}`)
 
   return (
-    <ThreadEntryScrollContainer>
-      {data && data.length && <>
-        <div className="text-xl px-4 pt-2">{data[data.length -1].emailSubject}</div>
-        {data.map(e => (
-          <ThreadEntry key={e.entryId} entry={e} />
-        ))}
-      </>}
-    </ThreadEntryScrollContainer>
+    <div ref={printRef} className="h-full">
+      <ThreadEntryScrollContainer>
+        {data && data.length && <>
+          <div className="text-xl px-4 pt-2 flex justify-between">
+            <div>{data[data.length -1].emailSubject}</div>
+            <button className="print:hidden text-muted-foreground" onClick={triggerPrint}>
+              <FontAwesomeIcon icon={faPrint} />
+            </button>
+          </div>
+          {data.map(e => (
+            <ThreadEntry key={e.entryId} entry={e} />
+          ))}
+        </>}
+      </ThreadEntryScrollContainer>
+    </div>
   )
 }
 

web/app/globals.css

@@ -68,3 +68,9 @@
     @apply bg-background text-foreground;
   }
 }
+
+@media print{
+    @page {
+        margin: 2cm;
+    }
+}

web/package.json

@@ -9,6 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@icons-pack/react-simple-icons": "^10.2.0",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
@@ -29,6 +32,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-letter": "^0.4.0",
     "react-markdown": "^9.0.3",
+    "react-to-print": "^3.0.4",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },

web/tailwind.config.js

@@ -16,6 +16,8 @@ module.exports = {
       padding: "2rem",
       screens: {
         "2xl": "1400px",
+        "print": {raw: 'print'},
+        "screen": {raw: 'screen'},
       },
     },
     extend: {