feat: add WebP export support for generated badges (JhaSourav07#1112)

## Description

Added WebP export support for generated dashboard badges.

Fixes JhaSourav07#1002

## Pillar

* [x] Other (Bug fix, refactoring, docs)

## Checklist

- [x] Code follows the project style guidelines
- [x] Tested the feature locally
- [x] No breaking changes introduced
- [x] Linked the PR to the assigned issue

## Changes Made

* Added  handleDownloadWEBP export handler
* Integrated WebP option into the ShareSheet export menu
* Added .webp image generation using `toCanvas()` and
`canvas.toDataURL('image/webp')`

## Result

Users can now export optimized WebP images with improved compression and
better compatibility for modern platforms while preserving dashboard
visuals.

Author: ArnavJoshi6391

components/dashboard/ShareSheet.tsx

@@ -56,6 +56,7 @@ export default function ShareSheet({ username, isOpen, onClose, exportData }: Sh
     handleLinkedIn,
     handleReddit,
     handleDownloadPNG,
+    handleDownloadWEBP,
     handleDownloadSVG,
     handleCopyMarkdown,
     handleDownloadJSON,
@@ -180,6 +181,15 @@ endsolid commitpulse_monolith`;
       glow: 'transparent',
       action: handleDownloadPNG,
     },
+    {
+      key: 'webp',
+      icon: Download,
+      label: 'Download as WebP',
+      description: 'Download optimized WebP image',
+      gradient: 'bg-zinc-800',
+      glow: 'transparent',
+      action: handleDownloadWEBP,
+    },
     {
       key: 'svg',
       icon: Download,

hooks/useShareActions.ts

@@ -1,6 +1,6 @@
 'use client';
 import { useState, useRef, useEffect } from 'react';
-import { toPng } from 'html-to-image';
+import { toPng, toCanvas } from 'html-to-image';
 import type { DashboardExportData } from '@/types/dashboard';
 
 type OptionState = 'idle' | 'loading' | 'success' | 'error';
@@ -104,6 +104,38 @@ export function useShareActions(
     }
   };
 
+  const handleDownloadWEBP = async () => {
+    setOptionState('webp', 'loading');
+    try {
+      const node =
+        document.getElementById('dashboard-root') ??
+        document.querySelector<HTMLElement>('[data-dashboard]') ??
+        document.body;
+      const isDark =
+        typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+      const canvas = await toCanvas(node, {
+        quality: 0.95,
+        pixelRatio: 2,
+        backgroundColor: isDark ? '#050505' : '#ffffff',
+        filter: (el) => {
+          if (el instanceof HTMLElement) {
+            if (el.id === 'share-sheet-overlay') return false;
+            if (el.id === 'generate-dashboard-btn') return false;
+          }
+          return true;
+        },
+      });
+      const dataUrl = canvas.toDataURL('image/webp');
+      const link = document.createElement('a');
+      link.download = `${username}-commitpulse.webp`;
+      link.href = dataUrl;
+      link.click();
+      setOptionState('webp', 'success');
+    } catch {
+      setOptionState('webp', 'error');
+    }
+  };
+
   const handleDownloadSVG = async () => {
     setOptionState('svg', 'loading');
     try {
@@ -192,6 +224,7 @@ export function useShareActions(
     handleLinkedIn,
     handleReddit,
     handleDownloadPNG,
+    handleDownloadWEBP,
     handleDownloadSVG,
     handleCopyMarkdown,
     handleDownloadJSON,