feature(share): add svg download option to share sheet

Author: guptakaran20

components/dashboard/ShareSheet.test.tsx

@@ -187,4 +187,31 @@ describe('ShareSheet', () => {
       expect(screen.getByText('JSON Downloaded!')).toBeDefined();
     });
   });
+
+  it('handles Download SVG action', async () => {
+    // Mock fetch
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      text: vi.fn().mockResolvedValue('<svg>mock</svg>'),
+    });
+
+    render(<ShareSheet {...defaultProps} />);
+
+    const svgButton = screen.getByText('Download SVG').closest('button');
+    fireEvent.click(svgButton!);
+
+    await waitFor(() => {
+      expect(screen.getByText('SVG Downloaded!')).toBeDefined();
+    });
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      `/api/streak?user=${encodeURIComponent(defaultProps.username)}`
+    );
+
+    const blob = vi.mocked(URL.createObjectURL).mock.calls[0][0] as Blob;
+    expect(blob.type).toBe('image/svg+xml');
+
+    expect(HTMLAnchorElement.prototype.click).toHaveBeenCalled();
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock-download');
+  });
 });

components/dashboard/ShareSheet.tsx

@@ -2,7 +2,17 @@
 
 import { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Check, Download, FileJson, Link2, Loader2, Share2, Smartphone, X } from 'lucide-react';
+import {
+  Check,
+  Code,
+  Download,
+  FileJson,
+  Link2,
+  Loader2,
+  Share2,
+  Smartphone,
+  X,
+} from 'lucide-react';
 import { toPng } from 'html-to-image';
 import type { DashboardExportData } from '@/types/dashboard';
 
@@ -117,6 +127,36 @@ export default function ShareSheet({ username, isOpen, onClose, exportData }: Sh
       setOptionState('png', 'error');
     }
   };
+  const handleDownloadSVG = async () => {
+    setOptionState('svg', 'loading');
+    try {
+      const response = await fetch(`/api/streak?user=${encodeURIComponent(username)}`);
+      if (!response.ok) throw new Error('Failed to fetch SVG');
+      const svgText = await response.text();
+      const blob = new Blob([svgText], { type: 'image/svg+xml' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.download = `${username}-commitpulse.svg`;
+      link.href = url;
+      link.click();
+      URL.revokeObjectURL(url);
+      setOptionState('svg', 'success');
+    } catch {
+      setOptionState('svg', 'error');
+    }
+  };
+
+  const handleCopyMarkdown = async () => {
+    setOptionState('markdown', 'loading');
+    try {
+      const markdown = `![CommitPulse](${PROFILE_URL(username).replace(username, `api/streak?user=${username}`)})`;
+      await navigator.clipboard.writeText(markdown);
+      setOptionState('markdown', 'success');
+      setTimeout(() => onClose(), 800);
+    } catch {
+      setOptionState('markdown', 'error');
+    }
+  };
 
   const handleDownloadJSON = () => {
     setOptionState('json', 'loading');
@@ -200,6 +240,16 @@ export default function ShareSheet({ username, isOpen, onClose, exportData }: Sh
       glow: 'rgba(37,99,235,0.35)',
       action: handleLinkedIn,
     },
+
+    {
+      key: 'markdown',
+      icon: Code,
+      label: 'Copy Markdown',
+      description: 'Copy markdown snippet for your README',
+      gradient: 'bg-zinc-800',
+      glow: 'transparent',
+      action: handleCopyMarkdown,
+    },
     {
       key: 'png',
       icon: Download,
@@ -209,6 +259,15 @@ export default function ShareSheet({ username, isOpen, onClose, exportData }: Sh
       glow: 'transparent',
       action: handleDownloadPNG,
     },
+    {
+      key: 'svg',
+      icon: Download,
+      label: 'Download SVG',
+      description: 'Download the raw monolith SVG',
+      gradient: 'bg-zinc-800',
+      glow: 'transparent',
+      action: handleDownloadSVG,
+    },
     {
       key: 'json',
       icon: FileJson,
@@ -315,7 +374,9 @@ export default function ShareSheet({ username, isOpen, onClose, exportData }: Sh
                                   ? 'Downloaded!'
                                   : opt.key === 'json'
                                     ? 'JSON Downloaded!'
-                                    : opt.label
+                                    : opt.key === 'svg'
+                                      ? 'SVG Downloaded!'
+                                      : opt.label
                               : state === 'error'
                                 ? 'Failed — try again'
                                 : opt.label}