@tuturuuu/ui 0.23.0 → 0.24.0

package/src/components/ui/legacy/meet/planId/plan-details-client.tsx

@@ -1,22 +1,31 @@
 'use client';
 
-import { CircleQuestionMark } from '@tuturuuu/icons';
+import {
+  Activity,
+  CalendarClock,
+  CircleQuestionMark,
+  Users,
+} from '@tuturuuu/icons';
 import type {
+  MeetFinalizedTimeframe,
   MeetTogetherPlan,
   PlanUser,
 } from '@tuturuuu/types/primitives/MeetTogetherPlan';
 import type { GetPollsForPlanResult } from '@tuturuuu/types/primitives/Poll';
 import type { Timeblock } from '@tuturuuu/types/primitives/Timeblock';
+import { Badge } from '@tuturuuu/ui/badge';
 import { useTimeBlocking } from '@tuturuuu/ui/hooks/time-blocking-provider';
 import { Label } from '@tuturuuu/ui/label';
 import EditPlanDialog from '@tuturuuu/ui/legacy/meet/edit-plan-dialog';
-import { Separator } from '@tuturuuu/ui/separator';
 import { Switch } from '@tuturuuu/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
-import { cn } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import AgendaDetails from './agenda-details';
+import { MeetInsightsPanel } from './meet-insights-panel';
+import { MeetSuggestionsPanel } from './meet-suggestions-panel';
 import PlanLogin from './plan-login';
 import SidebarDisplay from './sidebar-display';
 import StickyBottomIndicator from './sticky-bottom-indicator';
@@ -26,179 +35,184 @@ import UtilityButtons from './utility-buttons';
 interface PlanDetailsClientProps {
   plan: MeetTogetherPlan;
   polls: GetPollsForPlanResult | null;
-  // platformUser: User | null;
-  // isCreator: boolean;
   users: PlanUser[];
   timeblocks: Timeblock[];
+  finalizedTimeframes: MeetFinalizedTimeframe[];
+  isCreator: boolean;
+  isRefreshing: boolean;
   baseUrl: string;
 }
 
 export default function PlanDetailsClient({
   plan,
-  // platformUser,
-  // isCreator,
   users,
   polls,
   timeblocks,
+  finalizedTimeframes,
+  isCreator,
+  isRefreshing,
   baseUrl,
 }: PlanDetailsClientProps) {
   const { resolvedTheme } = useTheme();
+  const t = useTranslations('meet-together-plan-details');
   const [showBestTimes, setShowBestTimes] = useState(false);
   const { filteredUserIds, isDirty, resetLocalTimeblocks, user } =
     useTimeBlocking();
-
-  // If user filter is active, force best times off
-  const isUserFilterActive = filteredUserIds && filteredUserIds.length > 0;
-
-  useEffect(() => {
-    if (isUserFilterActive && showBestTimes) {
-      setShowBestTimes(false);
-    }
-  }, [isUserFilterActive, showBestTimes]);
-
-  // Best times status state
-  const [bestTimesStatusByDate, setBestTimesStatusByDate] = useState<
-    Record<string, boolean>
-  >({});
-  const allDates = plan.dates || [];
-  const noBestTimesFound =
-    showBestTimes &&
-    allDates.length > 0 &&
-    allDates.every((d) => bestTimesStatusByDate[d] === false);
+  const isUserFilterActive = filteredUserIds.length > 0;
 
   const downloadAsPNG = useCallback(async () => {
     const element = document.getElementById('plan-ref');
     if (!element) throw new Error('Plan element not found');
-
-    const backgroundColor = resolvedTheme === 'dark' ? '#0a0a0a' : '#ffffff';
-
-    try {
-      const html2canvas = (await import('html2canvas-pro')).default;
-      const canvas = await html2canvas(element, {
-        useCORS: true,
-        allowTaint: true,
-        backgroundColor,
-        scale: 1,
-        logging: false,
-        onclone: (clonedDoc: Document) => {
-          Array.from(clonedDoc.getElementsByTagName('link')).forEach(
-            (link: HTMLLinkElement) => {
-              link.removeAttribute('integrity');
-              link.removeAttribute('crossorigin');
-            }
-          );
-        },
-      });
-
-      const link = document.createElement('a');
-      link.download = `plan-${plan.id}.png`;
-      link.href = canvas.toDataURL('image/png', 2.0);
-      link.click();
-    } catch (error) {
-      console.error('Error generating PNG:', error);
-      throw error;
-    }
+    const html2canvas = (await import('html2canvas-pro')).default;
+    const canvas = await html2canvas(element, {
+      useCORS: true,
+      allowTaint: true,
+      backgroundColor: resolvedTheme === 'dark' ? '#0a0a0a' : '#ffffff',
+      scale: 1,
+      logging: false,
+    });
+    const link = document.createElement('a');
+    link.download = `tuturuuu-meet-${plan.id}.png`;
+    link.href = canvas.toDataURL('image/png', 2);
+    link.click();
   }, [plan.id, resolvedTheme]);
 
   return (
     <>
-      <div className="flex w-full max-w-7xl flex-col gap-6 p-4 text-foreground md:px-6 lg:gap-14 lg:px-10">
-        <div className="flex w-full flex-col items-center">
-          <UtilityButtons plan={plan} handlePNG={downloadAsPNG} />
-
-          <div id="plan-ref" className="flex w-full flex-col items-center">
-            <p className="my-4 flex max-w-xl items-center gap-2 text-balance text-center font-semibold text-2xl leading-tight! md:mb-4 lg:text-3xl">
-              {plan.name}{' '}
-              {user?.id === plan.creator_id ? (
-                <EditPlanDialog
-                  plan={plan}
-                  onSuccess={() => {
-                    resetLocalTimeblocks();
-                  }}
-                />
-              ) : null}
-            </p>
-
-            {/* Show Only Best Times Toggle - Back to original centered position */}
-            <div className="mb-4 flex flex-col items-center justify-center gap-2">
-              <div className="flex items-center justify-center gap-2">
-                <Label
-                  htmlFor="show-best-times-toggle"
-                  className="flex cursor-pointer items-center gap-1 text-sm"
-                >
-                  Show Only Best Times
-                </Label>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <span className="ml-1 inline-flex cursor-pointer items-center justify-center">
-                      <CircleQuestionMark size={16} />
-                    </span>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">
-                    <div>
+      <main className="relative min-h-dvh w-full overflow-hidden bg-background text-foreground">
+        <div className="pointer-events-none absolute inset-x-0 top-0 -z-0 h-72 bg-[radial-gradient(circle_at_top_left,hsl(var(--primary)/0.10),transparent_52%)]" />
+        <div className="relative mx-auto flex w-full max-w-[1560px] flex-col gap-5 px-3 py-4 sm:px-5 lg:px-8">
+          <header className="rounded-2xl border bg-background/90 p-4 shadow-sm backdrop-blur-xl sm:p-5">
+            <div className="flex flex-col justify-between gap-5 xl:flex-row xl:items-start">
+              <div className="min-w-0">
+                <div className="mb-3 flex flex-wrap items-center gap-2">
+                  <Badge variant={plan.is_confirmed ? 'default' : 'secondary'}>
+                    {plan.is_confirmed
+                      ? t('finalized')
+                      : t('collecting_availability')}
+                  </Badge>
+                  <Badge variant="outline" className="tabular-nums">
+                    {t('minutes_short', { count: plan.duration_minutes ?? 60 })}
+                  </Badge>
+                  <Badge variant="outline">
+                    {plan.timezone || t('legacy_fixed_offset')}
+                  </Badge>
+                  <span className="flex items-center gap-1.5 text-muted-foreground text-xs">
+                    <span
+                      className={
+                        isRefreshing
+                          ? 'h-1.5 w-1.5 animate-pulse rounded-full bg-primary'
+                          : 'h-1.5 w-1.5 rounded-full bg-muted-foreground/40'
+                      }
+                    />
+                    {isRefreshing ? t('refreshing') : t('up_to_date')}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <h1 className="text-balance font-semibold text-2xl tracking-tight sm:text-3xl">
+                    {plan.name || t('untitled_meeting')}
+                  </h1>
+                  {user?.id === plan.creator_id && !plan.is_confirmed ? (
+                    <EditPlanDialog
+                      plan={plan}
+                      onSuccess={resetLocalTimeblocks}
+                    />
+                  ) : null}
+                </div>
+                <p className="mt-2 max-w-3xl text-pretty text-muted-foreground text-sm">
+                  {plan.description || t('default_plan_description')}
+                </p>
+              </div>
+              <UtilityButtons plan={plan} handlePNG={downloadAsPNG} />
+            </div>
+          </header>
+
+          <div id="plan-ref">
+            <Tabs defaultValue="availability" className="space-y-5">
+              <TabsList className="grid h-auto w-full grid-cols-3 rounded-xl border bg-muted/30 p-1 sm:w-fit sm:min-w-[28rem]">
+                <TabsTrigger value="availability" className="gap-2 py-2.5">
+                  <CalendarClock className="h-4 w-4" />
+                  <span className="hidden sm:inline">{t('availability')}</span>
+                  <span className="sm:hidden">{t('times')}</span>
+                </TabsTrigger>
+                <TabsTrigger value="suggestions" className="gap-2 py-2.5">
+                  <Activity className="h-4 w-4" /> {t('suggestions')}
+                </TabsTrigger>
+                <TabsTrigger value="insights" className="gap-2 py-2.5">
+                  <Users className="h-4 w-4" /> {t('insights')}
+                </TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="availability" className="mt-0">
+                <div className="grid items-start gap-5 xl:grid-cols-[minmax(0,1fr)_22rem]">
+                  <section className="min-w-0 rounded-2xl border bg-background/80 p-3 sm:p-5">
+                    <div className="mb-4 flex flex-wrap items-center justify-between gap-3 border-b pb-4">
                       <div>
-                        <b>Show Only Best Times</b> highlights the time slots
-                        that work best for the most people.
+                        <h2 className="font-semibold">
+                          {t('availability_canvas')}
+                        </h2>
+                        <p className="text-muted-foreground text-xs">
+                          {t('availability_canvas_description')}
+                        </p>
                       </div>
-                      <ul className="mt-2 list-disc pl-4 text-xs">
-                        <li>
-                          Only time slots where <b>2 or more people</b> are
-                          available are highlighted.
-                        </li>
-                        <li>
-                          If you filter by user, this feature is <b>disabled</b>{' '}
-                          (since &quot;best time&quot; only makes sense for
-                          groups).
-                        </li>
-                      </ul>
-                      <div className="mt-2 text-muted-foreground text-xs">
-                        We&apos;re always tweaking this feature for clarity and
-                        usefulness. Let us know if you have feedback!
+                      <div className="flex items-center gap-2">
+                        <Label htmlFor="show-best-times" className="text-xs">
+                          {t('peak_only')}
+                        </Label>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <CircleQuestionMark className="h-3.5 w-3.5 text-muted-foreground" />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {t('peak_only_description')}
+                          </TooltipContent>
+                        </Tooltip>
+                        <Switch
+                          id="show-best-times"
+                          checked={showBestTimes}
+                          onCheckedChange={setShowBestTimes}
+                          disabled={isUserFilterActive}
+                        />
                       </div>
                     </div>
-                  </TooltipContent>
-                </Tooltip>
-                <Switch
-                  id="show-best-times-toggle"
-                  checked={showBestTimes}
-                  onCheckedChange={() => setShowBestTimes((v) => !v)}
-                  disabled={isUserFilterActive}
-                />
-              </div>
-              {noBestTimesFound && (
-                <div className="mt-2 w-full max-w-xl rounded bg-yellow-100 p-2 text-center text-xs text-yellow-900 dark:bg-yellow-900 dark:text-yellow-100">
-                  <strong>No best times were found!</strong>
-                  <br />
-                  Encourage your group to sync up or adjust their availability.
+                    <UnifiedAvailability
+                      plan={plan}
+                      timeblocks={timeblocks}
+                      showBestTimes={showBestTimes}
+                    />
+                  </section>
+                  <aside className="rounded-2xl border bg-background/80 p-2 xl:sticky xl:top-4">
+                    <SidebarDisplay plan={plan} polls={polls} users={users} />
+                  </aside>
                 </div>
-              )}
-            </div>
-            <div
-              className={cn(
-                'mt-8 grid w-full grid-cols-1 items-start justify-between gap-4 md:grid-cols-3'
-              )}
-            >
-              <div className={cn('md:col-span-2')}>
-                <UnifiedAvailability
+              </TabsContent>
+
+              <TabsContent value="suggestions" className="mt-0">
+                <MeetSuggestionsPanel
                   plan={plan}
+                  users={users}
                   timeblocks={timeblocks}
-                  showBestTimes={showBestTimes}
-                  onBestTimesStatusByDateAction={setBestTimesStatusByDate}
+                  finalizedTimeframes={finalizedTimeframes}
+                  isCreator={isCreator}
                 />
-              </div>
-              <SidebarDisplay plan={plan} polls={polls} users={users} />
-            </div>
+              </TabsContent>
 
-            <Separator className="my-8" />
+              <TabsContent value="insights" className="mt-0">
+                <MeetInsightsPanel
+                  plan={plan}
+                  users={users}
+                  timeblocks={timeblocks}
+                />
+              </TabsContent>
+            </Tabs>
+          </div>
 
+          <section className="rounded-2xl border bg-background/80 p-4 sm:p-5">
             <AgendaDetails plan={plan} />
-          </div>
+          </section>
         </div>
-      </div>
-
-      {/* Discord-style sticky bottom indicator for unsaved changes */}
+      </main>
       {isDirty && <StickyBottomIndicator />}
-
       <PlanLogin plan={plan} baseUrl={baseUrl} />
     </>
   );

package/src/components/ui/legacy/meet/planId/selectable-day-time.tsx

@@ -2,6 +2,7 @@ import { useTimeBlocking } from '@tuturuuu/ui/hooks/time-blocking-provider';
 import { timetzToTime } from '@tuturuuu/utils/date-helper';
 import { cn } from '@tuturuuu/utils/format';
 import dayjs from 'dayjs';
+import type { PointerEvent as ReactPointerEvent } from 'react';
 
 export default function SelectableDayTime({
   date,
@@ -19,6 +20,36 @@ export default function SelectableDayTime({
   const { editing, selectedTimeBlocks, edit, setPreviewDate, endEditing } =
     useTimeBlocking();
 
+  const editCellAtPointer = (event: ReactPointerEvent<HTMLElement>) => {
+    const edge = 72;
+    const scrollStep = 18;
+    if (event.clientY < edge) window.scrollBy({ top: -scrollStep });
+    else if (event.clientY > window.innerHeight - edge)
+      window.scrollBy({ top: scrollStep });
+
+    const horizontalScroller = event.currentTarget.closest<HTMLElement>(
+      '[data-meet-grid-scroller]'
+    );
+    if (horizontalScroller) {
+      const bounds = horizontalScroller.getBoundingClientRect();
+      if (event.clientX < bounds.left + edge)
+        horizontalScroller.scrollBy({ left: -scrollStep });
+      else if (event.clientX > bounds.right - edge)
+        horizontalScroller.scrollBy({ left: scrollStep });
+    }
+
+    const target = document
+      .elementFromPoint(event.clientX, event.clientY)
+      ?.closest<HTMLElement>('[data-meet-slot]');
+    const isoDate = target?.dataset.meetSlot;
+    if (!isoDate) return;
+    edit({
+      mode: (target.dataset.meetMode as 'add' | 'remove') || 'add',
+      date: new Date(isoDate),
+      tentativeMode: target.dataset.meetTentative === 'true',
+    });
+  };
+
   const hourBlocks = Array.from(Array(Math.floor(end + 1 - start)).keys());
   const hourSplits = 4;
 
@@ -153,67 +184,68 @@ export default function SelectableDayTime({
           } as const;
 
           return (
-            // biome-ignore lint/a11y/useKeyWithMouseEvents: mouse drag selection is intentional UX for time blocking
-            <div
+            <button
+              type="button"
               key={`${date}-${i}`}
-              onMouseDown={
-                disabled
-                  ? undefined
-                  : isSelectable
-                    ? (e) => {
-                        e.preventDefault();
-                        edit(editData);
-                      }
-                    : undefined
+              data-meet-slot={currentDate.toISOString()}
+              data-meet-mode={editData.mode}
+              data-meet-tentative={String(editData.tentativeMode ?? false)}
+              disabled={!isSelectable}
+              aria-label={
+                isSelectable
+                  ? `${date} ${dayjs(currentDate).format('HH:mm')}`
+                  : undefined
               }
-              onMouseOver={
-                disabled
-                  ? undefined
-                  : isSelectable
-                    ? (e) => {
-                        e.preventDefault();
-                        if (!editing.enabled) return;
-                        edit(editData);
-                      }
-                    : (e) => {
-                        e.preventDefault();
-                        setPreviewDate(editData.date);
-                      }
+              aria-pressed={isSelectable ? isSelected : undefined}
+              onPointerDown={
+                isSelectable
+                  ? (event) => {
+                      event.preventDefault();
+                      event.currentTarget.setPointerCapture(event.pointerId);
+                      edit(editData);
+                    }
+                  : undefined
               }
-              onTouchStart={
-                disabled
-                  ? undefined
-                  : isSelectable
-                    ? (e) => {
-                        if (editing.enabled) return;
-                        e.preventDefault();
-                        edit(editData, e.nativeEvent);
-                      }
-                    : (e) => {
-                        e.preventDefault();
-                        setPreviewDate(editData.date);
-                      }
+              onPointerMove={
+                isSelectable
+                  ? (event) => {
+                      if (!editing.enabled) return;
+                      event.preventDefault();
+                      editCellAtPointer(event);
+                    }
+                  : undefined
               }
-              onTouchMove={
-                disabled
-                  ? undefined
-                  : isSelectable
-                    ? (e) => {
-                        if (!editing.enabled) return;
-                        e.preventDefault();
-                        edit(editData, e.nativeEvent);
-                      }
-                    : undefined
+              onPointerUp={
+                isSelectable
+                  ? (event) => {
+                      event.preventDefault();
+                      if (
+                        event.currentTarget.hasPointerCapture(event.pointerId)
+                      )
+                        event.currentTarget.releasePointerCapture(
+                          event.pointerId
+                        );
+                      endEditing();
+                    }
+                  : undefined
+              }
+              onPointerCancel={isSelectable ? endEditing : undefined}
+              onPointerEnter={
+                isSelectable
+                  ? () => {
+                      if (editing.enabled) edit(editData);
+                    }
+                  : () => setPreviewDate(editData.date)
               }
-              onTouchEnd={
-                disabled
-                  ? undefined
-                  : (e) => {
-                      e.preventDefault();
-                      if (editing.enabled) {
-                        endEditing();
-                      }
+              onKeyDown={
+                isSelectable
+                  ? (event) => {
+                      if (event.key !== ' ' && event.key !== 'Enter') return;
+                      event.preventDefault();
+                      edit(editData);
+                      queueMicrotask(endEditing);
                     }
+                  : undefined
               }
               className={`${
                 i + hourSplits < array.length
@@ -229,7 +261,7 @@ export default function SelectableDayTime({
                       ? 'bg-dynamic-red/50'
                       : 'bg-dynamic-red/20'
                   : ''
-              } relative h-3 w-full ${cn(
+              } relative h-3 w-full touch-none focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-primary ${cn(
                 hideBorder
                   ? ''
                   : (i + 1) % hourSplits === 0

package/src/components/ui/legacy/meet/planId/show-qr-button.tsx

@@ -13,12 +13,10 @@ import {
 } from '@tuturuuu/ui/dialog';
 import { useTranslations } from 'next-intl';
 import { QRCodeCanvas } from 'qrcode.react';
-import CopyLinkButton, { generateTumeetMeUrl } from './copy-link-button';
+import CopyLinkButton from './copy-link-button';
 
 export default function ShowQRButton({ url }: { url: string }) {
   const t = useTranslations();
-  const tumeetMeUrl = generateTumeetMeUrl(url);
-
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -37,7 +35,7 @@ export default function ShowQRButton({ url }: { url: string }) {
 
         <div className="flex items-center justify-center">
           <QRCodeCanvas
-            value={tumeetMeUrl}
+            value={url}
             size={256}
             marginSize={2}
             className="rounded-lg"
@@ -45,7 +43,7 @@ export default function ShowQRButton({ url }: { url: string }) {
         </div>
 
         <DialogFooter>
-          <CopyLinkButton url={tumeetMeUrl} className="md:w-full" />
+          <CopyLinkButton url={url} className="md:w-full" />
         </DialogFooter>
       </DialogContent>
     </Dialog>

package/src/components/ui/legacy/meet/planId/unified-availability.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { Calendar, Save, Users } from '@tuturuuu/icons';
+import { Calendar, Redo2, Save, Undo2, Users } from '@tuturuuu/icons';
 import type { MeetTogetherPlan } from '@tuturuuu/types/primitives/MeetTogetherPlan';
 import type { Timeblock } from '@tuturuuu/types/primitives/Timeblock';
 import { Button } from '@tuturuuu/ui/button';
 import { useTimeBlocking } from '@tuturuuu/ui/hooks/time-blocking-provider';
+import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import AllAvailabilities from './all-availabilities';
 import AvailabilityPlanner from './availability-planner';
@@ -22,7 +23,9 @@ export default function UnifiedAvailability({
   showBestTimes = false,
   onBestTimesStatusByDateAction,
 }: UnifiedAvailabilityProps) {
-  const { isDirty, handleSave, isSaving } = useTimeBlocking();
+  const t = useTranslations('meet-together-plan-details');
+  const { isDirty, handleSave, isSaving, canUndo, canRedo, undo, redo } =
+    useTimeBlocking();
   const [isEditing, setIsEditing] = useState(false);
   const { user, setDisplayMode } = useTimeBlocking();
 
@@ -56,25 +59,45 @@ export default function UnifiedAvailability({
           {isEditing ? (
             <>
               <Users size={16} />
-              View Everyone
+              {t('view_everyone')}
             </>
           ) : (
             <>
               <Calendar size={16} />
-              Add Availability
+              {t('add_availability')}
             </>
           )}
         </Button>
         {isEditing && (
-          <Button
-            variant="default"
-            size="lg"
-            onClick={handleSave}
-            disabled={!isDirty || isSaving}
-          >
-            <Save size={16} />
-            {isSaving ? 'Saving...' : 'Save Changes'}
-          </Button>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={undo}
+              disabled={!canUndo}
+              aria-label={t('undo')}
+            >
+              <Undo2 size={16} />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={redo}
+              disabled={!canRedo}
+              aria-label={t('redo')}
+            >
+              <Redo2 size={16} />
+            </Button>
+            <Button
+              variant="default"
+              size="lg"
+              onClick={handleSave}
+              disabled={!isDirty || isSaving}
+            >
+              <Save size={16} />
+              {isSaving ? t('saving') : t('save_changes')}
+            </Button>
+          </div>
         )}
       </div>