@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/calendar-app/components/auto-schedule-comprehensive-dialog.tsx

@@ -1,220 +0,0 @@
-'use client';
-
-import { useQueryClient } from '@tanstack/react-query';
-import { Loader2, Sparkles } from '@tuturuuu/icons';
-import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-import { useRouter } from 'next/navigation';
-import { useRef, useState } from 'react';
-import { Button } from '../../button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '../../dialog';
-import { Label } from '../../label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../../select';
-import { toast } from '../../sonner';
-import { Switch } from '../../switch';
-
-// Extend dayjs with timezone and UTC plugins
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-interface AutoScheduleComprehensiveDialogProps {
-  wsId: string;
-  children?: React.ReactNode;
-}
-
-export default function AutoScheduleComprehensiveDialog({
-  wsId,
-  children,
-}: AutoScheduleComprehensiveDialogProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isRealtime, setIsRealtime] = useState(true);
-  const [gapMinutes, setGapMinutes] = useState(0);
-  const queryClient = useQueryClient();
-  const refreshIntervalRef = useRef<ReturnType<typeof setInterval> | null>(
-    null
-  );
-  const router = useRouter();
-  const stopRefreshing = () => {
-    if (refreshIntervalRef.current) {
-      clearInterval(refreshIntervalRef.current);
-      refreshIntervalRef.current = null;
-    }
-  };
-
-  const handleAutoSchedule = async () => {
-    if (isLoading) return;
-
-    setIsLoading(true);
-    toast.loading('Connecting to optimizer...', {
-      id: 'auto-schedule',
-    });
-
-    if (isRealtime) {
-      refreshIntervalRef.current = setInterval(() => {
-        queryClient.invalidateQueries({
-          queryKey: ['calendarEvents', wsId],
-        });
-      }, 500);
-    }
-
-    try {
-      const userTimezone = dayjs.tz.guess();
-      const apiUrl = `/api/${wsId}/calendar/auto-schedule?stream=${isRealtime}`;
-      const response = await fetch(apiUrl, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          gapMinutes,
-          timezone: userTimezone,
-        }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({
-          error: 'Failed to connect to the optimization service.',
-        }));
-        throw new Error(errorData.error);
-      }
-
-      if (isRealtime) {
-        if (!response.body)
-          throw new Error('Streaming response not available.');
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-
-        // Add a label to the while loop
-        streamLoop: while (true) {
-          const { value, done } = await reader.read();
-          if (done) break;
-
-          const chunk = decoder.decode(value);
-          const lines = chunk.split('\n\n');
-
-          for (const line of lines) {
-            if (line.startsWith('data: ')) {
-              try {
-                const json = JSON.parse(line.substring(6));
-
-                toast.loading(json.message || 'Optimizing...', {
-                  id: 'auto-schedule',
-                });
-
-                if (json.status === 'complete' || json.status === 'converged') {
-                  toast.success(json.message || 'Optimization complete!', {
-                    id: 'auto-schedule',
-                    duration: 5000,
-                  });
-                  setIsOpen(false);
-                  break streamLoop;
-                }
-                if (json.status === 'error') {
-                  throw new Error(json.message || 'An unknown error occurred');
-                }
-              } catch (e) {
-                console.warn('Failed to parse stream chunk:', line, e);
-              }
-            }
-          }
-        }
-      } else {
-        const data = await response.json();
-        toast.success(data.message || 'Optimization complete!', {
-          id: 'auto-schedule',
-          duration: 5000,
-        });
-        setIsOpen(false);
-      }
-    } catch (error) {
-      console.error('Auto-schedule error:', error);
-      toast.error('Failed to optimize calendar', {
-        id: 'auto-schedule',
-        description:
-          error instanceof Error
-            ? error.message
-            : 'An unexpected error occurred',
-      });
-    } finally {
-      router.refresh();
-      setIsLoading(false);
-      stopRefreshing();
-      await queryClient.invalidateQueries({
-        queryKey: ['calendarEvents', wsId],
-      });
-    }
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Auto-Schedule Settings</DialogTitle>
-          <DialogDescription>
-            Configure how the auto-scheduler optimizes your calendar.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 py-4">
-          <div className="flex items-center justify-between">
-            <Label htmlFor="realtime-updates">Real-time updates</Label>
-            <Switch
-              id="realtime-updates"
-              checked={isRealtime}
-              onCheckedChange={setIsRealtime}
-              disabled={isLoading}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label>Gap Between Events</Label>
-            <Select
-              value={String(gapMinutes)}
-              onValueChange={(value) => setGapMinutes(Number(value))}
-              disabled={isLoading}
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="0">No Gap</SelectItem>
-                <SelectItem value="15">15-minute Gap</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button
-            onClick={handleAutoSchedule}
-            disabled={isLoading}
-            className="w-full"
-          >
-            {isLoading ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            ) : (
-              <Sparkles className="mr-2 h-4 w-4" />
-            )}
-            {isLoading ? 'Optimizing...' : 'Run Auto-Schedule'}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ui/calendar-app/components/calendar-header-actions.tsx

@@ -1,67 +0,0 @@
-'use client';
-
-import { CheckSquare, ChevronDown, PlusIcon, Repeat } from '@tuturuuu/icons';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@tuturuuu/ui/dropdown-menu';
-import HabitFormDialog from '@tuturuuu/ui/tu-do/habits/habit-form-dialog';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-import { QuickTaskDialog } from './quick-task-dialog';
-import { SmartScheduleButton } from './smart-schedule-button';
-
-interface CalendarHeaderActionsProps {
-  workspaceId: string;
-  enableSmartScheduling: boolean;
-}
-
-export function CalendarHeaderActions({
-  workspaceId,
-}: CalendarHeaderActionsProps) {
-  const t = useTranslations('calendar');
-  const [quickTaskOpen, setQuickTaskOpen] = useState(false);
-  const [habitFormOpen, setHabitFormOpen] = useState(false);
-
-  return (
-    <div className="grid w-full items-center gap-2 md:flex md:w-auto">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="default" size="xs" className="gap-1.5">
-            <PlusIcon className="h-4 w-4" />
-            <span className="hidden sm:inline">{t('create')}</span>
-            <ChevronDown className="h-3 w-3 opacity-60" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem onClick={() => setQuickTaskOpen(true)}>
-            <CheckSquare className="h-4 w-4" />
-            {t('new-task')}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => setHabitFormOpen(true)}>
-            <Repeat className="h-4 w-4" />
-            {t('new-habit')}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <SmartScheduleButton wsId={workspaceId} />
-
-      <QuickTaskDialog
-        wsId={workspaceId}
-        open={quickTaskOpen}
-        onOpenChange={setQuickTaskOpen}
-      />
-
-      <HabitFormDialog
-        wsId={workspaceId}
-        open={habitFormOpen}
-        onOpenChange={setHabitFormOpen}
-        onSuccess={() => setHabitFormOpen(false)}
-      />
-    </div>
-  );
-}

package/src/components/ui/calendar-app/components/experimental-feature-dialog.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import { TriangleAlert } from '@tuturuuu/icons';
-import { Button } from '../../button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '../../dialog';
-
-interface ExperimentalFeatureDialogProps {
-  open: boolean;
-  onConfirm: () => void;
-  onClose?: () => void;
-}
-
-export function ExperimentalFeatureDialog({
-  open,
-  onConfirm,
-  onClose,
-}: ExperimentalFeatureDialogProps) {
-  const handleOpenChange = (isOpen: boolean) => {
-    if (!isOpen) {
-      onClose?.();
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 text-destructive">
-            <TriangleAlert className="h-5 w-5" />
-            Experimental Feature
-          </DialogTitle>
-          <DialogDescription className="pt-2">
-            Smart scheduling is enabled for testing. This feature is very
-            experimental and could result in unexpected behaviors.
-            <br />
-            <br />
-            Not stable enough for production use, only for experimentation and
-            testing purposes only.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <Button variant="destructive" onClick={onConfirm}>
-            I understand, proceed anyway
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ui/calendar-app/components/habits-panel.tsx

@@ -1,335 +0,0 @@
-'use client';
-
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import {
-  Calendar,
-  Clock,
-  Flame,
-  Pencil,
-  Plus,
-  RefreshCw,
-  Repeat,
-} from '@tuturuuu/icons';
-import type { Habit, HabitStreak } from '@tuturuuu/types/primitives/Habit';
-import { getRecurrenceDescription } from '@tuturuuu/types/primitives/Habit';
-import { cn } from '@tuturuuu/utils/format';
-import Link from 'next/link';
-import { useState } from 'react';
-import { getTaskApiUrl, getTasksAppUrl } from '../../../../lib/tasks-app-url';
-import { Badge } from '../../badge';
-import { Button } from '../../button';
-import { Card, CardContent } from '../../card';
-import { ScrollArea } from '../../scroll-area';
-import { Skeleton } from '../../skeleton';
-import { toast } from '../../sonner';
-import { Switch } from '../../switch';
-import HabitFormDialog from '../../tu-do/habits/habit-form-dialog';
-
-interface HabitWithStreak extends Habit {
-  streak?: HabitStreak;
-}
-
-interface HabitsPanelProps {
-  wsId: string;
-  onEventCreated?: () => void;
-}
-
-const colorMap: Record<string, string> = {
-  BLUE: 'bg-dynamic-blue',
-  RED: 'bg-dynamic-red',
-  GREEN: 'bg-dynamic-green',
-  YELLOW: 'bg-dynamic-yellow',
-  PURPLE: 'bg-dynamic-purple',
-  PINK: 'bg-dynamic-pink',
-  CYAN: 'bg-dynamic-cyan',
-  ORANGE: 'bg-dynamic-orange',
-};
-
-const priorityColors: Record<string, string> = {
-  critical: 'text-dynamic-red',
-  high: 'text-dynamic-orange',
-  normal: 'text-dynamic-blue',
-  low: 'text-muted-foreground',
-};
-
-export function HabitsPanel({ wsId }: HabitsPanelProps) {
-  const [isHabitDialogOpen, setIsHabitDialogOpen] = useState(false);
-  const [editingHabit, setEditingHabit] = useState<Habit | null>(null);
-  const queryClient = useQueryClient();
-
-  // Fetch habits with React Query
-  const {
-    data: habitsData,
-    isLoading,
-    error,
-    refetch,
-  } = useQuery({
-    queryKey: ['habits', wsId],
-    queryFn: async () => {
-      const response = await fetch(
-        getTaskApiUrl(`/api/v1/workspaces/${wsId}/habits`)
-      );
-      if (!response.ok) {
-        throw new Error('Failed to fetch habits');
-      }
-      return response.json();
-    },
-  });
-
-  const habits: HabitWithStreak[] = (habitsData?.habits || []).filter(
-    (h: HabitWithStreak) => h.is_active
-  );
-
-  // Mutation to update habit visibility
-  const visibilityMutation = useMutation({
-    mutationFn: async ({
-      habitId,
-      isVisible,
-    }: {
-      habitId: string;
-      isVisible: boolean;
-    }) => {
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/habits/${habitId}`,
-        {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ is_visible_in_calendar: isVisible }),
-        }
-      );
-      if (!response.ok) {
-        throw new Error('Failed to update habit visibility');
-      }
-      return response.json();
-    },
-    onMutate: async ({ habitId, isVisible }) => {
-      // Cancel any outgoing refetches
-      await queryClient.cancelQueries({ queryKey: ['habits', wsId] });
-
-      // Snapshot the previous value
-      const previousHabits = queryClient.getQueryData(['habits', wsId]);
-
-      // Optimistically update to the new value
-      queryClient.setQueryData(
-        ['habits', wsId],
-        (old: { habits: HabitWithStreak[] } | undefined) => {
-          if (!old) return old;
-          return {
-            ...old,
-            habits: old.habits.map((h) =>
-              h.id === habitId ? { ...h, is_visible_in_calendar: isVisible } : h
-            ),
-          };
-        }
-      );
-
-      return { previousHabits };
-    },
-    onError: (_err, _variables, context) => {
-      // Rollback on error
-      if (context?.previousHabits) {
-        queryClient.setQueryData(['habits', wsId], context.previousHabits);
-      }
-      toast.error('Failed to update visibility');
-    },
-  });
-
-  const toggleVisibility = (habitId: string, currentVisibility: boolean) => {
-    visibilityMutation.mutate({
-      habitId,
-      isVisible: !currentVisibility,
-    });
-  };
-
-  const handleEditHabit = (habit: Habit) => {
-    setEditingHabit(habit);
-    setIsHabitDialogOpen(true);
-  };
-
-  const handleDialogClose = (open: boolean) => {
-    if (!open) {
-      setEditingHabit(null);
-    }
-    setIsHabitDialogOpen(open);
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex flex-col gap-3 p-4">
-        {[1, 2, 3].map((i) => (
-          <Skeleton key={i} className="h-24 w-full rounded-lg" />
-        ))}
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex flex-col items-center justify-center gap-3 p-8 text-center">
-        <p className="text-muted-foreground text-sm">Failed to load habits</p>
-        <Button variant="outline" size="sm" onClick={() => refetch()}>
-          <RefreshCw className="mr-2 h-4 w-4" />
-          Retry
-        </Button>
-      </div>
-    );
-  }
-
-  if (habits.length === 0) {
-    return (
-      <>
-        <div className="flex flex-col items-center justify-center gap-3 p-8 text-center">
-          <Repeat className="h-12 w-12 text-muted-foreground" />
-          <div>
-            <h4 className="font-medium">No active habits</h4>
-            <p className="text-muted-foreground text-sm">
-              Create habits to track recurring activities
-            </p>
-          </div>
-          <Button size="sm" onClick={() => setIsHabitDialogOpen(true)}>
-            <Plus className="mr-1 h-4 w-4" />
-            Create Habit
-          </Button>
-        </div>
-        <HabitFormDialog
-          open={isHabitDialogOpen}
-          onOpenChange={handleDialogClose}
-          wsId={wsId}
-          habit={editingHabit ?? undefined}
-          onSuccess={() => {
-            setIsHabitDialogOpen(false);
-            setEditingHabit(null);
-            refetch();
-          }}
-        />
-      </>
-    );
-  }
-
-  return (
-    <div className="flex h-full flex-col">
-      {/* Header */}
-      <div className="flex items-center justify-between border-b p-3">
-        <div className="flex items-center gap-2">
-          <Repeat className="h-4 w-4" />
-          <span className="font-medium text-sm">
-            {habits.length} active habit{habits.length !== 1 ? 's' : ''}
-          </span>
-        </div>
-        <div className="flex items-center gap-1">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
-            onClick={() => setIsHabitDialogOpen(true)}
-            title="Create new habit"
-          >
-            <Plus className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
-            onClick={() => refetch()}
-          >
-            <RefreshCw className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-
-      {/* Habits List */}
-      <ScrollArea className="flex-1">
-        <div className="flex flex-col gap-2 p-3">
-          {habits.map((habit) => {
-            const colorClass = colorMap[habit.color] || colorMap.BLUE;
-            const isVisible = habit.is_visible_in_calendar ?? true;
-
-            return (
-              <Card
-                key={habit.id}
-                className={cn(
-                  'relative overflow-hidden transition-all',
-                  !isVisible && 'opacity-60'
-                )}
-              >
-                <div
-                  className={cn('absolute top-0 left-0 h-full w-1', colorClass)}
-                />
-                <CardContent className="p-3 pl-4">
-                  <div className="flex items-start justify-between gap-2">
-                    <div className="min-w-0 flex-1">
-                      <h4 className="truncate font-medium">{habit.name}</h4>
-                      <p className="flex items-center gap-1 text-muted-foreground text-xs">
-                        <Calendar className="h-3 w-3" />
-                        {getRecurrenceDescription(habit)}
-                      </p>
-                    </div>
-                    <div className="flex shrink-0 items-center gap-1">
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-7 w-7"
-                        onClick={() => handleEditHabit(habit)}
-                        title="Edit habit"
-                      >
-                        <Pencil className="h-3.5 w-3.5" />
-                      </Button>
-                      <Switch
-                        checked={isVisible}
-                        onCheckedChange={() =>
-                          toggleVisibility(habit.id, isVisible)
-                        }
-                      />
-                    </div>
-                  </div>
-
-                  {/* Badges */}
-                  <div className="mt-2 flex flex-wrap gap-1">
-                    <Badge variant="secondary" className="gap-1 text-xs">
-                      <Clock className="h-3 w-3" />
-                      {habit.duration_minutes}m
-                    </Badge>
-                    <Badge
-                      variant="outline"
-                      className={cn('text-xs', priorityColors[habit.priority])}
-                    >
-                      {habit.priority}
-                    </Badge>
-                    {habit.streak && habit.streak.current_streak > 0 && (
-                      <Badge variant="secondary" className="gap-1 text-xs">
-                        <Flame className="h-3 w-3 text-dynamic-orange" />
-                        {habit.streak.current_streak}
-                      </Badge>
-                    )}
-                  </div>
-                </CardContent>
-              </Card>
-            );
-          })}
-        </div>
-      </ScrollArea>
-
-      {/* Footer */}
-      <div className="border-t p-3">
-        <Link href={getTasksAppUrl(`/${wsId}/habits`)}>
-          <Button variant="outline" size="sm" className="w-full">
-            Manage Habits
-          </Button>
-        </Link>
-      </div>
-
-      {/* Habit Creation/Edit Dialog */}
-      <HabitFormDialog
-        open={isHabitDialogOpen}
-        onOpenChange={handleDialogClose}
-        wsId={wsId}
-        habit={editingHabit ?? undefined}
-        onSuccess={() => {
-          setIsHabitDialogOpen(false);
-          setEditingHabit(null);
-          refetch();
-        }}
-      />
-    </div>
-  );
-}