Update guest v2 branding and theming

resources/js/guest-v2/screens/ShareScreen.tsx

@@ -6,21 +6,22 @@ import { Share2, QrCode, Link, Users } from 'lucide-react';
 import AppShell from '../components/AppShell';
 import { useEventData } from '../context/EventDataContext';
 import { buildEventShareLink } from '../services/eventLink';
-import { useAppearance } from '@/hooks/use-appearance';
+import { usePollStats } from '../hooks/usePollStats';
+import { fetchEventQrCode } from '../services/qrApi';
+import { useGuestThemeVariant } from '../lib/guestTheme';
 import { useTranslation } from '@/guest/i18n/useTranslation';
 
 export default function ShareScreen() {
   const { event, token } = useEventData();
   const { t } = useTranslation();
-  const { resolved } = useAppearance();
-  const isDark = resolved === 'dark';
+  const { isDark } = useGuestThemeVariant();
   const cardBorder = isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.12)';
   const cardShadow = isDark ? '0 18px 40px rgba(2, 6, 23, 0.4)' : '0 16px 30px rgba(15, 23, 42, 0.12)';
   const [copyState, setCopyState] = React.useState<'idle' | 'copied' | 'failed'>('idle');
+  const { stats } = usePollStats(token ?? null);
+  const [qrCodeDataUrl, setQrCodeDataUrl] = React.useState('');
+  const [qrLoading, setQrLoading] = React.useState(false);
   const shareUrl = buildEventShareLink(event, token);
-  const qrUrl = shareUrl
-    ? `https://api.qrserver.com/v1/create-qr-code/?size=240x240&data=${encodeURIComponent(shareUrl)}`
-    : '';
 
   const handleCopy = React.useCallback(async () => {
     if (!shareUrl) {
@@ -52,6 +53,44 @@ export default function ShareScreen() {
     }
   }, [event?.name, handleCopy, shareUrl]);
 
+  React.useEffect(() => {
+    if (!token) {
+      setQrCodeDataUrl('');
+      setQrLoading(false);
+      return;
+    }
+
+    let active = true;
+    setQrLoading(true);
+
+    fetchEventQrCode(token, 240)
+      .then((payload) => {
+        if (!active) {
+          return;
+        }
+        setQrCodeDataUrl(payload.qr_code_data_url ?? '');
+      })
+      .catch((error) => {
+        if (!active) {
+          return;
+        }
+        console.error('Failed to load QR code', error);
+        setQrCodeDataUrl('');
+      })
+      .finally(() => {
+        if (active) {
+          setQrLoading(false);
+        }
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [token]);
+
+  const guestCountLabel = stats.onlineGuests.toString();
+  const inviteDisabled = !shareUrl;
+
   return (
     <AppShell>
       <YStack gap="$4">
@@ -94,14 +133,14 @@ export default function ShareScreen() {
                 : 'radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--guest-primary, #FF5A5F) 18%, white), transparent 60%)',
             }}
           >
-            {qrUrl ? (
+            {qrCodeDataUrl ? (
               <img
-                src={qrUrl}
+                src={qrCodeDataUrl}
                 alt={t('share.invite.qrAlt', 'Event QR code')}
                 style={{ width: 120, height: 120, borderRadius: 16 }}
               />
             ) : (
-              <QrCode size={28} color={isDark ? '#F8FAFF' : '#0F172A'} />
+              <QrCode size={qrLoading ? 22 : 28} color={isDark ? '#F8FAFF' : '#0F172A'} />
             )}
             <Text fontSize="$3" fontWeight="$7">
               {t('share.invite.qrLabel', 'Show QR')}
@@ -155,12 +194,27 @@ export default function ShareScreen() {
               {t('share.invite.guestsTitle', 'Guests joined')}
             </Text>
           </XStack>
+          <YStack gap="$1">
+            <Text fontSize="$6" fontWeight="$8">
+              {guestCountLabel}
+            </Text>
+            <Text fontSize="$2" color="$color" opacity={0.7}>
+              {t('home.stats.online', 'Guests online')}
+            </Text>
+          </YStack>
           <Text fontSize="$2" color="$color" opacity={0.7}>
             {event?.name
               ? t('share.invite.guestsSubtitleEvent', 'Share {event} with your guests.', { event: event.name })
               : t('share.invite.guestsSubtitle', 'Share the event with your guests.')}
           </Text>
-          <Button size="$3" backgroundColor="$primary" borderRadius="$pill" alignSelf="flex-start" onPress={handleShare}>
+          <Button
+            size="$3"
+            backgroundColor="$primary"
+            borderRadius="$pill"
+            alignSelf="flex-start"
+            onPress={handleShare}
+            disabled={inviteDisabled}
+          >
             {t('share.invite.send', 'Send invite')}
           </Button>
         </YStack>