feature(share): add svg download option to share sheet (JhaSourav07#108)

## Description

Fixes JhaSourav07#52

Added a **"Download SVG"** option to the ShareSheet in the dashboard. 

Users can now download the full-commit PNG. It fetches the SVG from the
current endpoint `/api/streak?user=${username}`, converts to
`image/svg+xml`, and forces a browser download of the filename
`[username]-commitpulse.svg`.

The new functionality is added next to the current "Copy Markdown"
functionality keeping in line with the existing Tailwind CSS Styles.


## Pillar

* [ ] 🎨 Pillar 1 — New Theme Design
* [ ] 📐 Pillar 2 — Geometric SVG Improvement
* [ ] 🕐 Pillar 3 — Timezone Logic Optimization
* [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview

<img width="1896" height="870" alt="Screenshot 2026-05-15 212039"
src="https://github.com/user-attachments/assets/95a63df4-289a-429a-a177-b5fe8473f5ea"
/>
<img width="808" height="100" alt="Screenshot 2026-05-15 212108"
src="https://github.com/user-attachments/assets/936165e7-05ca-4ebb-acf0-1ba0dc25c38a"
/>

## Checklist before requesting a review:

* [x] I have read the `CONTRIBUTING.md` file.
* [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
* [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
* [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
* [x] I have updated `README.md` if I added a new theme or URL
parameter.
* [x] I have started the repo.
* [x] I have made sure that i have only one commit to merge in this PR.
* [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).

Author: JhaSourav07

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}