refactor(dashboard): extract share action handlers into useShareActions hook (JhaSourav07#630)

## Description

Extracts the inlined share handler functions and state from
`ShareSheet.tsx` into a new `useShareActions` custom hook to improve
readability and maintainability.

Fixes JhaSourav07#333

## Pillar

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

## Visual Preview
N/A - This is a logic refactor only; no visual changes.

## 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): ...`).
- [ ] 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.
- [ ] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
- [ ] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

components/dashboard/ShareSheet.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
   Check,
@@ -13,10 +13,9 @@ import {
   Smartphone,
   X,
 } from 'lucide-react';
-import { toPng } from 'html-to-image';
 import type { DashboardExportData } from '@/types/dashboard';
+import { useShareActions } from '@/hooks/useShareActions';
 
-// Inline branded icons (Twitter/X brand, LinkedIn brand)
 const XBrandIcon = ({ size = 18, className = '' }: { size?: number; className?: string }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}>
     <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.259 5.63L18.244 2.25Zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
@@ -42,191 +41,34 @@ interface ShareSheetProps {
   exportData: DashboardExportData;
 }
 
-type OptionState = 'idle' | 'loading' | 'success' | 'error';
-
-const PROFILE_URL = (username: string) =>
-  typeof window !== 'undefined'
-    ? `${window.location.origin}/dashboard/${username}`
-    : `https://commitpulse.vercel.app/dashboard/${username}`;
-
 export default function ShareSheet({ username, isOpen, onClose, exportData }: ShareSheetProps) {
-  const [states, setStates] = useState<Record<string, OptionState>>({});
   const overlayRef = useRef<HTMLDivElement>(null);
+  const {
+    states,
+    handleCopyLink,
+    handleTwitter,
+    handleLinkedIn,
+    handleReddit,
+    handleDownloadPNG,
+    handleDownloadSVG,
+    handleCopyMarkdown,
+    handleDownloadJSON,
+    handleNativeShare,
+  } = useShareActions(username, exportData, onClose);
 
-  // Close on Escape
   useEffect(() => {
     const handler = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
   }, [onClose]);
 
-  // Prevent scroll when open
   useEffect(() => {
     document.body.style.overflow = isOpen ? 'hidden' : '';
     return () => {
       document.body.style.overflow = '';
     };
   }, [isOpen]);
 
-  const setOptionState = (key: string, state: OptionState) => {
-    setStates((prev) => ({ ...prev, [key]: state }));
-    if (state === 'success' || state === 'error') {
-      setTimeout(() => setStates((prev) => ({ ...prev, [key]: 'idle' })), 2500);
-    }
-  };
-
-  /* ── Option handlers ─────────────────────────── */
-
-  const handleCopyLink = async () => {
-    setOptionState('copy', 'loading');
-    try {
-      await navigator.clipboard.writeText(PROFILE_URL(username));
-      setOptionState('copy', 'success');
-      setTimeout(() => onClose(), 800);
-    } catch {
-      setOptionState('copy', 'error');
-    }
-  };
-
-  const handleTwitter = () => {
-    const url = PROFILE_URL(username);
-    const text = encodeURIComponent(`Check out my GitHub commit pulse on CommitPulse 🚀\n${url}`);
-    window.open(`https://twitter.com/intent/tweet?text=${text}`, '_blank', 'noopener');
-    onClose();
-  };
-
-  const handleLinkedIn = () => {
-    const url = encodeURIComponent(PROFILE_URL(username));
-    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank', 'noopener');
-    onClose();
-  };
-
-  const handleReddit = () => {
-    const url = encodeURIComponent(PROFILE_URL(username));
-    const title = encodeURIComponent('Check out my CommitPulse dashboard 🚀');
-
-    window.open(`https://www.reddit.com/submit?url=${url}&title=${title}`, '_blank');
-
-    onClose();
-  };
-
-  const handleDownloadPNG = async () => {
-    setOptionState('png', 'loading');
-    try {
-      // Target the whole dashboard wrapper; fall back to body
-      const node =
-        document.getElementById('dashboard-root') ??
-        document.querySelector<HTMLElement>('[data-dashboard]') ??
-        document.body;
-
-      const dataUrl = await toPng(node, {
-        quality: 0.95,
-        pixelRatio: 2,
-        backgroundColor: '#050505',
-        filter: (el) => {
-          // Exclude the share sheet itself and the generate button from the capture
-          if (el instanceof HTMLElement) {
-            if (el.id === 'share-sheet-overlay') return false;
-            if (el.id === 'generate-dashboard-btn') return false;
-          }
-          return true;
-        },
-      });
-
-      const link = document.createElement('a');
-      link.download = `${username}-commitpulse.png`;
-      link.href = dataUrl;
-      link.click();
-      setOptionState('png', 'success');
-    } catch {
-      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](${window.location.origin}/api/streak?user=${encodeURIComponent(username)})`;
-      await navigator.clipboard.writeText(markdown);
-      setOptionState('markdown', 'success');
-      setTimeout(() => onClose(), 800);
-    } catch {
-      setOptionState('markdown', 'error');
-    }
-  };
-
-  const handleDownloadJSON = () => {
-    setOptionState('json', 'loading');
-    try {
-      const payload = {
-        username,
-        profileUrl: PROFILE_URL(username),
-        exportedAt: new Date().toISOString(),
-        currentStreak: exportData.stats.currentStreak,
-        longestStreak: exportData.stats.peakStreak,
-        totalContributions: exportData.stats.totalContributions,
-        topLanguages: exportData.languages,
-      };
-      const blob = new Blob([JSON.stringify(payload, null, 2)], {
-        type: 'application/json',
-      });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement('a');
-      link.download = `commitpulse-${username}.json`;
-      link.href = url;
-      link.click();
-      URL.revokeObjectURL(url);
-      setOptionState('json', 'success');
-    } catch {
-      setOptionState('json', 'error');
-    }
-  };
-
-  const handleNativeShare = async () => {
-    if (!('share' in navigator)) {
-      // Graceful fallback: just copy the link
-      await handleCopyLink();
-      return;
-    }
-    setOptionState('native', 'loading');
-    try {
-      await navigator.share({
-        title: `${username}'s Commit Pulse`,
-        text: `Check out my GitHub contribution pulse — streaks, insights, and more.`,
-        url: PROFILE_URL(username),
-      });
-      setOptionState('native', 'success');
-      setTimeout(() => onClose(), 600);
-    } catch (err) {
-      // User cancelled — not an error worth showing
-      if (err instanceof Error && err.name !== 'AbortError') {
-        setOptionState('native', 'error');
-      } else {
-        setOptionState('native', 'idle');
-      }
-    }
-  };
-
-  /* ── Option config ───────────────────────────── */
-
   const options = [
     {
       key: 'copy',
@@ -255,7 +97,6 @@ export default function ShareSheet({ username, isOpen, onClose, exportData }: Sh
       glow: 'rgba(37,99,235,0.35)',
       action: handleLinkedIn,
     },
-
     {
       key: 'markdown',
       icon: Code,
@@ -309,20 +150,19 @@ export default function ShareSheet({ username, isOpen, onClose, exportData }: Sh
     },
     {
       key: 'reddit',
+      icon: RedditIcon,
       label: 'Reddit',
       description: 'Share on Reddit',
-      icon: RedditIcon,
-      action: handleReddit,
       gradient: 'from-orange-500 to-orange-700',
       glow: 'rgba(249,115,22,0.35)',
+      action: handleReddit,
     },
   ];
 
   return (
     <AnimatePresence>
       {isOpen && (
         <>
-          {/* Backdrop */}
           <motion.div
             id="share-sheet-overlay"
             ref={overlayRef}
@@ -333,7 +173,6 @@ export default function ShareSheet({ username, isOpen, onClose, exportData }: Sh
             onClick={onClose}
             className="fixed inset-0 z-50 bg-black/60 backdrop-blur-[2px] flex items-center justify-center p-4"
           >
-            {/* Panel */}
             <motion.div
               initial={{ opacity: 0, y: 16, scale: 0.98 }}
               animate={{ opacity: 1, y: 0, scale: 1 }}
@@ -342,8 +181,7 @@ export default function ShareSheet({ username, isOpen, onClose, exportData }: Sh
               className="relative w-full max-w-sm"
               onClick={(e) => e.stopPropagation()}
             >
-              <div className="rounded-xl bg-white/60 dark:bg-white/[0.05] dark:bg-white/[0.05] backdrop-blur-xl  border border-black/10 dark:border-white/10 shadow-[0_24px_64px_rgba(0,0,0,0.18)] dark:shadow-[0_24px_64px_rgba(0,0,0,0.7)] overflow-hidden">
-                {/* Header */}
+              <div className="rounded-xl bg-white/60 dark:bg-white/[0.05] backdrop-blur-xl border border-black/10 dark:border-white/10 shadow-[0_24px_64px_rgba(0,0,0,0.18)] dark:shadow-[0_24px_64px_rgba(0,0,0,0.7)] overflow-hidden">
                 <div className="flex items-center justify-between px-5 pt-5 pb-4 border-b border-white/10">
                   <div>
                     <h2 className="text-sm font-semibold text-gray-900 dark:text-white tracking-tight">
@@ -359,13 +197,10 @@ export default function ShareSheet({ username, isOpen, onClose, exportData }: Sh
                     <X size={14} className="text-gray-500 dark:text-white/45" />
                   </button>
                 </div>
-
-                {/* Options */}
                 <div className="flex flex-col p-3 gap-1">
                   {options.map((opt, idx) => {
                     const state = states[opt.key] ?? 'idle';
                     const Icon = opt.icon;
-
                     return (
                       <motion.button
                         key={opt.key}
@@ -376,7 +211,6 @@ export default function ShareSheet({ username, isOpen, onClose, exportData }: Sh
                         disabled={state === 'loading'}
                         className="group flex items-center gap-3 w-full px-3 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-white/[0.06] border border-transparent hover:border-white/10 transition-all duration-200 text-left disabled:opacity-40 disabled:cursor-not-allowed"
                       >
-                        {/* Icon box */}
                         <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-gray-100 dark:bg-white/[0.04] border border-[rgba(255,255,255,0.08)] flex items-center justify-center">
                           {state === 'loading' ? (
                             <Loader2
@@ -392,8 +226,6 @@ export default function ShareSheet({ username, isOpen, onClose, exportData }: Sh
                             />
                           )}
                         </div>
-
-                        {/* Label */}
                         <div className="flex flex-col min-w-0">
                           <span className="text-sm text-gray-900 dark:text-white font-medium leading-tight">
                             {state === 'success'