feat: add report package button (#972)

#925 

Adding button to report malware.

Desktop: 
<img width="1551" alt="Capture d’écran 2025-02-22 à 11 07 43"
src="https://github.com/user-attachments/assets/67c7079b-2f04-4256-80b7-bfb0354098b1"
/>
Mobile:
<img width="686" alt="Capture d’écran 2025-02-22 à 11 09 46"
src="https://github.com/user-attachments/assets/d676f9a8-99d4-42e6-8c0c-7e499e3be0db"
/>

---------

Co-authored-by: Gamaliel Garcia <46827955+EGAMAGZ@users.noreply.github.com>
Co-authored-by: Leo Kettmeir <crowlkats@toaxl.com>

Author: 3 people

frontend/routes/package/(_components)/PackageHeader.tsx

@@ -6,6 +6,7 @@ import { getScoreTextColorClass } from "../../../utils/score_ring_color.ts";
 import {
   TbAlertTriangleFilled,
   TbExternalLink,
+  TbFlag,
   TbRosetteDiscountCheck,
 } from "@preact-icons/tb";
 import { Tooltip } from "../../../components/Tooltip.tsx";
@@ -33,6 +34,16 @@ export function PackageHeader({
     (pkg.latestVersion === null ||
       greaterThan(selectedVersionSemver, parse(pkg.latestVersion)));
 
+  const reportPackageBody = `Hello JSR team,
+I would like to report a package for the following reason:
+`;
+
+  const mailLink = `mailto:report@jsr.io?subject=${
+    encodeURIComponent(
+      `Report package: ${pkg.scope}/${pkg.name}@${selectedVersion?.version}`,
+    )
+  }&body=${encodeURIComponent(reportPackageBody)}`;
+
   return (
     <div class="space-y-6 mt-0 md:mt-4">
       {pkg.isArchived && (
@@ -213,6 +224,15 @@ export function PackageHeader({
               </div>
             )}
           </div>
+
+          <div class="flex flex-row items-center gap-2">
+            <a
+              class="inline-flex items-center gap-1.5 md:gap-1 text-md md:text-xs bg-red-50 border-1 border-red-300/30 rounded-md p-1.5 md:p-1 text-red-500 font-semibold hover:bg-red-100 focus:outline-none focus:border-1 focus:border-red-300 focus:ring-1 focus:ring-red-300 focus:ring-opacity-50"
+              href={mailLink}
+            >
+              <TbFlag class="size-6 md:size-4" /> Report package
+            </a>
+          </div>
         </div>
       </div>
     </div>