@tuturuuu/ui 0.22.0 → 0.24.0

package/src/components/ui/legacy/meet/planId/copy-link-button.tsx

@@ -1,67 +1,15 @@
 'use client';
 
-import {
-  Check,
-  ChevronDown,
-  Copy,
-  ExternalLink,
-  LinkIcon,
-} from '@tuturuuu/icons';
+import { Check, LinkIcon } from '@tuturuuu/icons';
 import { Button } from '@tuturuuu/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@tuturuuu/ui/dropdown-menu';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
-interface LinkFormat {
-  name: string;
-  domain: string;
-  path: string;
+export function generateCanonicalMeetUrl(planId: string) {
+  return `https://tuturuuu.com/meet/plans/${planId}`;
 }
 
-const LINK_FORMATS: LinkFormat[] = [
-  { name: 'tumeet.me', domain: 'https://tumeet.me', path: '/' },
-  { name: 'tumeet.us', domain: 'https://tumeet.us', path: '/' },
-  {
-    name: 'tuturuuu.com',
-    domain: 'https://tuturuuu.com',
-    path: '/meet-together/plans/',
-  },
-];
-
-// Extract the plan ID from the URL
-const getPlanId = (url: string): string => {
-  try {
-    const urlObj = new URL(url);
-    const pathParts = urlObj.pathname.split('/');
-    // Handle /meet-together/plans/{planId} and /{planId} formats
-    let planIdIndex: number;
-    if (pathParts.includes('meet-together') && pathParts.includes('plans')) {
-      planIdIndex = pathParts.indexOf('plans') + 1;
-    } else if (pathParts.includes('r')) {
-      // Handle legacy /r/{planId} format
-      planIdIndex = pathParts.indexOf('r') + 1;
-    } else {
-      // Handle /{planId} format (tumeet.me, tumeet.us)
-      planIdIndex = pathParts.length - 1;
-    }
-    return pathParts[planIdIndex] || '';
-  } catch {
-    return '';
-  }
-};
-
-// Generate tumeet.me URL (default format)
-export const generateTumeetMeUrl = (url: string): string => {
-  const planId = getPlanId(url);
-  return planId ? `https://tumeet.me/${planId}` : url;
-};
-
 export default function CopyLinkButton({
   url,
   className,
@@ -71,148 +19,27 @@ export default function CopyLinkButton({
 }) {
   const t = useTranslations('meet-together-plan-details');
   const [copied, setCopied] = useState(false);
-  const [selectedFormat] = useState<LinkFormat>(
-    LINK_FORMATS?.[0] ?? {
-      name: 'tumeet.me',
-      domain: 'https://tumeet.me',
-      path: '/r/',
-    }
-  ); // Default to tumeet.me
-
-  useEffect(() => {
-    if (copied) {
-      setTimeout(() => {
-        setCopied(false);
-      }, 3000);
-    }
-  }, [copied]);
-
-  const planId = getPlanId(url);
-  const formattedUrl = planId
-    ? `${selectedFormat.domain}${selectedFormat.path}${planId}`
-    : url;
-
-  const handleCopy = async (linkFormat?: LinkFormat) => {
-    const urlToCopy = linkFormat
-      ? `${linkFormat.domain}${linkFormat.path}${planId}`
-      : formattedUrl;
-
-    try {
-      await navigator.clipboard.writeText(urlToCopy);
-      setCopied(true);
-    } catch (error) {
-      console.error('Failed to copy to clipboard:', error);
-      // Fallback for older browsers
-      const textArea = document.createElement('textarea');
-      textArea.value = urlToCopy;
-      document.body.appendChild(textArea);
-      textArea.select();
-      document.execCommand('copy');
-      document.body.removeChild(textArea);
-      setCopied(true);
-    }
-  };
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          className={cn(
-            'group relative w-full border-dynamic-purple/50 text-dynamic-purple transition-all duration-200 hover:border-dynamic-purple hover:bg-dynamic-purple/10 md:w-auto',
-            copied && 'border-dynamic-purple bg-dynamic-purple/20',
-            className
-          )}
-          variant="outline"
-          disabled={copied || !url}
-        >
-          {copied ? (
-            <Check className="mr-2 h-4 w-4 animate-pulse" />
-          ) : (
-            <LinkIcon className="mr-2 h-4 w-4 transition-transform duration-200 group-hover:scale-110" />
-          )}
-          <span className="transition-all duration-200">
-            {copied ? 'Copied!' : t('copy_link')}
-          </span>
-          <ChevronDown className="ml-2 h-4 w-4 transition-transform duration-200 group-hover:rotate-180" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align="end"
-        className="w-80 border-dynamic-purple/20 p-4 shadow-xl backdrop-blur-sm"
-      >
-        <div className="mb-4 border-dynamic-purple/20 border-b px-1 py-2 pb-3 font-semibold text-dynamic-purple text-sm">
-          <div className="flex items-center gap-2">
-            <LinkIcon className="h-4 w-4" />
-            Choose link format
-          </div>
-        </div>
-        {LINK_FORMATS.map((format, index) => {
-          const isDefault = format.name === 'tumeet.me';
-          return (
-            <div key={format.name}>
-              {index > 0 && (
-                <div className="my-3 border-dynamic-purple/10 border-t" />
-              )}
-              <DropdownMenuItem
-                onClick={() => handleCopy(format)}
-                className={cn(
-                  'group flex cursor-pointer flex-col items-start gap-3 rounded-lg p-4 transition-all duration-200 hover:bg-dynamic-purple/5 hover:shadow-md',
-                  isDefault &&
-                    'border border-dynamic-purple/30 bg-dynamic-purple/5 shadow-sm'
-                )}
-              >
-                <div className="flex w-full items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div
-                      className={cn(
-                        'flex h-8 w-8 items-center justify-center rounded-full font-bold text-sm',
-                        isDefault
-                          ? 'bg-dynamic-purple text-white'
-                          : 'bg-dynamic-purple/10 text-dynamic-purple'
-                      )}
-                    >
-                      {format.name.charAt(0).toUpperCase()}
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <span className="font-semibold text-foreground">
-                        {format.name}
-                      </span>
-                      {isDefault && (
-                        <span className="rounded-full border border-dynamic-purple/30 bg-dynamic-purple/20 px-2 py-0.5 font-medium text-dynamic-purple text-xs">
-                          Default
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                  <Copy className="h-4 w-4 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
-                </div>
-                <div className="w-full">
-                  <div className="mb-2 font-medium text-muted-foreground text-xs">
-                    Full URL:
-                  </div>
-                  <div className="flex items-center gap-2 rounded-md border border-dynamic-purple/20 bg-muted/30 p-3 transition-colors duration-200 group-hover:border-dynamic-purple/40 group-hover:bg-muted/50">
-                    <span className="break-all font-mono text-foreground text-xs">
-                      {format.domain}
-                      {format.path}
-                      {planId}
-                    </span>
-                    <ExternalLink className="h-3 w-3 shrink-0 text-muted-foreground" />
-                  </div>
-                </div>
-                <div className="w-full font-medium text-dynamic-purple text-xs">
-                  Click to copy to clipboard
-                </div>
-              </DropdownMenuItem>
-            </div>
-          );
-        })}
-        <div className="mt-4 border-dynamic-purple/20 border-t pt-3">
-          <div className="flex items-center gap-2 px-1 text-muted-foreground text-xs">
-            <ExternalLink className="h-3 w-3" />
-            Links will open in a new tab when shared
-          </div>
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <Button
+      className={cn(
+        'w-full transition active:scale-[0.98] sm:w-auto',
+        className
+      )}
+      variant="outline"
+      disabled={!url}
+      onClick={async () => {
+        await navigator.clipboard.writeText(url);
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 2000);
+      }}
+    >
+      {copied ? (
+        <Check className="mr-2 h-4 w-4" />
+      ) : (
+        <LinkIcon className="mr-2 h-4 w-4" />
+      )}
+      {copied ? t('copied') : t('copy_link')}
+    </Button>
   );
 }

package/src/components/ui/legacy/meet/planId/date-planner.tsx

@@ -32,7 +32,7 @@ function DatePlanner({
   onBestTimesStatusByDateAction?: (status: Record<string, boolean>) => void;
 }) {
   const t = useTranslations('meet-together-plan-details');
-  const { user, editing, endEditing, setPreviewDate } = useTimeBlocking();
+  const { user, setPreviewDate } = useTimeBlocking();
   const [tentativeMode, setTentativeMode] = useState(false);
   const [currentPage, setCurrentPage] = useState(0);
   const isMobile = useIsMobile();
@@ -125,35 +125,10 @@ function DatePlanner({
         </div>
       )}
 
-      <div
-        onMouseUp={
-          editable
-            ? (e) => {
-                e.preventDefault();
-                endEditing();
-              }
-            : undefined
-        }
-        onMouseLeave={
-          editable
-            ? (e) => {
-                e.preventDefault();
-                endEditing();
-              }
-            : undefined
-        }
-        onTouchEnd={
-          editable
-            ? () => {
-                if (!editing.enabled) return;
-                endEditing();
-              }
-            : undefined
-        }
-        className="mt-4 flex items-start justify-center gap-2"
-      >
+      <div className="mt-4 flex items-start justify-center gap-2">
         {dates && (
           <div
+            data-meet-grid-scroller
             className="flex flex-col items-start justify-start gap-4 overflow-x-auto"
             onMouseLeave={
               editable

package/src/components/ui/legacy/meet/planId/meet-insights-panel.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { BarChart3, CalendarDays, Percent, Users } from '@tuturuuu/icons';
+import type {
+  MeetTogetherPlan,
+  PlanUser,
+} from '@tuturuuu/types/primitives/MeetTogetherPlan';
+import type { Timeblock } from '@tuturuuu/types/primitives/Timeblock';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@tuturuuu/ui/accordion';
+import { Progress } from '@tuturuuu/ui/progress';
+import { useTranslations } from 'next-intl';
+import { calculateMeetPlanInsights } from '../lib/meet-insights';
+
+export function MeetInsightsPanel({
+  plan,
+  users,
+  timeblocks,
+}: {
+  plan: MeetTogetherPlan;
+  users: PlanUser[];
+  timeblocks: Timeblock[];
+}) {
+  const t = useTranslations('meet-together-plan-details');
+  const insights = calculateMeetPlanInsights({ plan, users, timeblocks });
+  const metrics = [
+    {
+      icon: Users,
+      label: t('responses'),
+      value: `${insights.respondedCount}/${insights.participantCount}`,
+      detail: t('percent_responded', {
+        count: Math.round(insights.responsePercent),
+      }),
+    },
+    {
+      icon: Percent,
+      label: t('peak_attendance'),
+      value: `${Math.round(insights.peakAttendancePercent)}%`,
+      detail: t('count_available', { count: insights.peakAttendance }),
+    },
+    {
+      icon: BarChart3,
+      label: t('average_match'),
+      value: `${Math.round(insights.averageAvailabilityPercent)}%`,
+      detail: t('across_eligible_windows'),
+    },
+    {
+      icon: CalendarDays,
+      label: t('candidate_dates'),
+      value: String(plan.dates?.length ?? 0),
+      detail: t('minute_meeting', { count: plan.duration_minutes ?? 60 }),
+    },
+  ];
+
+  return (
+    <section className="space-y-5" aria-label={t('meeting_insights')}>
+      <div className="grid gap-px overflow-hidden rounded-2xl border bg-border sm:grid-cols-2 xl:grid-cols-4">
+        {metrics.map(({ icon: Icon, label, value, detail }) => (
+          <article key={label} className="bg-background p-5">
+            <div className="mb-5 flex items-center justify-between text-muted-foreground">
+              <span className="font-medium text-xs">{label}</span>
+              <Icon className="h-4 w-4" />
+            </div>
+            <p className="font-semibold text-2xl tabular-nums tracking-tight">
+              {value}
+            </p>
+            <p className="mt-1 text-muted-foreground text-xs">{detail}</p>
+          </article>
+        ))}
+      </div>
+
+      <div className="rounded-2xl border bg-background/70 p-5">
+        <div className="mb-5">
+          <h3 className="font-semibold">{t('best_overlap_by_day')}</h3>
+          <p className="text-muted-foreground text-sm">
+            {t('best_overlap_by_day_description')}
+          </p>
+        </div>
+        <div className="space-y-4">
+          {insights.overlapByDate.map(({ date, peak }) => {
+            const percent = insights.participantCount
+              ? (peak / insights.participantCount) * 100
+              : 0;
+            return (
+              <div
+                key={date}
+                className="grid grid-cols-[7rem_1fr_3rem] items-center gap-3"
+              >
+                <span className="text-sm tabular-nums">{date}</span>
+                <Progress value={percent} className="h-2" />
+                <span className="text-right text-muted-foreground text-xs tabular-nums">
+                  {peak}/{insights.participantCount}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <Accordion
+        type="single"
+        collapsible
+        className="rounded-2xl border bg-background/70 px-5"
+      >
+        <AccordionItem value="hourly" className="border-0">
+          <AccordionTrigger>{t('hourly_availability')}</AccordionTrigger>
+          <AccordionContent>
+            <p className="mb-4 text-muted-foreground text-sm">
+              {t('hourly_availability_description')}
+            </p>
+            <div className="grid gap-3 sm:grid-cols-2">
+              {insights.availabilityByHour.map(({ hour, percent }) => (
+                <div
+                  key={hour}
+                  className="grid grid-cols-[4rem_1fr_3rem] items-center gap-3"
+                >
+                  <span className="text-sm tabular-nums">
+                    {String(hour).padStart(2, '0')}:00
+                  </span>
+                  <Progress value={percent} className="h-2" />
+                  <span className="text-right text-muted-foreground text-xs tabular-nums">
+                    {Math.round(percent)}%
+                  </span>
+                </div>
+              ))}
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </section>
+  );
+}

package/src/components/ui/legacy/meet/planId/meet-plan-live-root.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { MeetPlanSnapshot } from '@tuturuuu/internal-api';
+import type { User as PlatformUser } from '@tuturuuu/types/primitives/User';
+import { TimeBlockingProvider } from '@tuturuuu/ui/hooks/time-blocking-provider';
+import { useMeetPlanQuery } from './meet-query';
+import PlanDetailsClient from './plan-details-client';
+
+export function MeetPlanLiveRoot({
+  initialSnapshot,
+  platformUser,
+  baseUrl,
+}: {
+  initialSnapshot: MeetPlanSnapshot;
+  platformUser: PlatformUser | null;
+  baseUrl: string;
+}) {
+  const query = useMeetPlanQuery(initialSnapshot);
+  const snapshot = query.data;
+
+  return (
+    <TimeBlockingProvider
+      key={`${platformUser?.id || 'guest'}-${snapshot.plan.id}`}
+      platformUser={platformUser}
+      plan={snapshot.plan}
+      users={snapshot.users}
+      timeblocks={snapshot.timeblocks}
+    >
+      <PlanDetailsClient
+        plan={snapshot.plan}
+        polls={snapshot.polls as never}
+        users={snapshot.users}
+        timeblocks={snapshot.timeblocks}
+        finalizedTimeframes={snapshot.finalizedTimeframes}
+        isCreator={snapshot.viewer.isCreator}
+        isRefreshing={query.isFetching}
+        baseUrl={baseUrl}
+      />
+    </TimeBlockingProvider>
+  );
+}

package/src/components/ui/legacy/meet/planId/meet-query.ts

@@ -0,0 +1,26 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import {
+  getMeetPlanSnapshot,
+  type MeetPlanSnapshot,
+} from '@tuturuuu/internal-api';
+
+export const meetPlanQueryKey = (planId: string) =>
+  ['meet-plan', planId] as const;
+
+export function useMeetPlanQuery(initialSnapshot: MeetPlanSnapshot) {
+  const planId = initialSnapshot.plan.id;
+  if (!planId) throw new Error('A Tuturuuu Meet plan id is required');
+
+  return useQuery({
+    queryKey: meetPlanQueryKey(planId),
+    queryFn: () => getMeetPlanSnapshot(planId),
+    initialData: initialSnapshot,
+    refetchInterval: (query) =>
+      query.state.data?.plan.is_confirmed ? 30_000 : 5_000,
+    refetchIntervalInBackground: false,
+    refetchOnReconnect: true,
+    refetchOnWindowFocus: true,
+  });
+}