@tuturuuu/ui 0.30.2 → 0.32.0

package/src/components/ui/custom/language-dropdown-item.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import { Check, Hexagon } from '@tuturuuu/icons';
 import { useRouter } from 'next/navigation';
-import { DropdownMenuItem } from '../dropdown-menu';
 import { persistLocalePreference } from './locale-preference';
+import { SatelliteLanguageItem } from './satellite-language-item';
 
 interface Props {
   label: string;
@@ -32,17 +31,10 @@ export function LanguageDropdownItem({
   };
 
   return (
-    <DropdownMenuItem
-      className="cursor-pointer"
-      onClick={useLocale}
-      disabled={selected}
-    >
-      {selected ? (
-        <Check className="h-4 w-4 text-dynamic-indigo" />
-      ) : (
-        <Hexagon className="h-4 w-4 text-dynamic-indigo" />
-      )}
-      {label}
-    </DropdownMenuItem>
+    <SatelliteLanguageItem
+      label={label}
+      selected={selected}
+      onSelect={useLocale}
+    />
   );
 }

package/src/components/ui/custom/nav-link.tsx

@@ -33,6 +33,7 @@ import {
 } from '../dropdown-menu';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
 import type { NavLink as NavLinkType } from './navigation';
+import { satelliteNavigationItemClass } from './satellite-navigation';
 
 function matchesPathPrefix(targetPath: string, pathPrefix: string) {
   return targetPath === pathPrefix || targetPath.startsWith(`${pathPrefix}/`);
@@ -362,16 +363,15 @@ export function NavLink({
 
   const commonProps = {
     className: cn(
-      'group/navlink flex w-full cursor-pointer items-center justify-between rounded-md p-2 font-medium text-sm',
-      isCollapsed && 'justify-center',
-      isActive && 'bg-accent text-accent-foreground',
+      satelliteNavigationItemClass({
+        isCollapsed,
+        isActive: Boolean(isActive),
+        isDisabled,
+      }),
       link.preferenceHiddenActive &&
         'bg-dynamic-amber/10 ring-1 ring-dynamic-amber/40',
       link.isBack && 'mb-2 cursor-pointer',
-      isResolvingHref && 'pointer-events-none opacity-70',
-      isDisabled
-        ? 'cursor-not-allowed opacity-50'
-        : 'hover:bg-accent hover:text-accent-foreground'
+      isResolvingHref && 'pointer-events-none opacity-70'
     ),
     onClick: (event: React.MouseEvent<HTMLElement>) => {
       if (isTierRestricted) {

package/src/components/ui/custom/nav.tsx

@@ -1,10 +1,7 @@
 'use client';
-
-import { cn } from '@tuturuuu/utils/format';
-import { usePathname } from 'next/navigation';
-import { useEffect, useState } from 'react';
 import { NavLink } from './nav-link';
 import type { NavLink as NavLinkType } from './navigation';
+import { SidebarNavigation } from './satellite-navigation';
 
 interface NavProps {
   wsId: string;
@@ -14,7 +11,6 @@ interface NavProps {
   onClick: () => void;
   className?: string;
 }
-
 export function Nav({
   wsId,
   links,
@@ -23,64 +19,20 @@ export function Nav({
   onClick,
   className,
 }: NavProps) {
-  const pathname = usePathname();
-
-  const [urlToLoad, setUrlToLoad] = useState<string>();
-
-  useEffect(() => {
-    if (urlToLoad && urlToLoad === pathname) setUrlToLoad(undefined);
-  }, [pathname, urlToLoad]);
-
-  if (!links?.length) {
-    return null;
-  }
-
   return (
-    <div
-      data-collapsed={isCollapsed}
-      className={cn('group flex flex-col gap-y-0.5 p-2', className)}
-    >
-      <nav className="grid gap-y-0.5">
-        {links.map((link, index) => {
-          if (!link) {
-            return (
-              <div
-                key={`nav-divider-${index}`}
-                className={cn(
-                  'my-1 border-b',
-                  isCollapsed ? 'mx-auto w-1/2' : 'w-auto'
-                )}
-              />
-            );
-          }
-
-          const previousSectionLabel = links
-            .slice(0, index)
-            .reverse()
-            .find((previousLink) => previousLink)?.sectionLabel;
-          const shouldShowSectionLabel =
-            link.sectionLabel && link.sectionLabel !== previousSectionLabel;
-
-          return (
-            <div key={`nav-item-${link.href || link.title}-${index}`}>
-              {shouldShowSectionLabel && !isCollapsed && (
-                <div className="px-2 pt-3 pb-1 first:pt-0">
-                  <span className="font-semibold text-[11px] text-muted-foreground/80 uppercase tracking-wider">
-                    {link.sectionLabel}
-                  </span>
-                </div>
-              )}
-              <NavLink
-                wsId={wsId}
-                link={link}
-                isCollapsed={isCollapsed}
-                onSubMenuClick={onSubMenuClick}
-                onClick={onClick}
-              />
-            </div>
-          );
-        })}
-      </nav>
-    </div>
+    <SidebarNavigation
+      links={links}
+      isCollapsed={isCollapsed}
+      className={className}
+      renderLink={(link) => (
+        <NavLink
+          wsId={wsId}
+          link={link}
+          isCollapsed={isCollapsed}
+          onSubMenuClick={onSubMenuClick}
+          onClick={onClick}
+        />
+      )}
+    />
   );
 }

package/src/components/ui/custom/notification-card.tsx

@@ -0,0 +1,361 @@
+'use client';
+
+import {
+  AtSign,
+  Bell,
+  Calendar,
+  Check,
+  CheckCircle2,
+  ClipboardList,
+  Edit3,
+  Eye,
+  EyeOff,
+  Loader2,
+  Mail,
+  RotateCcw,
+  Shield,
+  UserPlus,
+  X,
+  XCircle,
+} from '@tuturuuu/icons';
+import { updateNotificationMetadata } from '@tuturuuu/internal-api';
+import {
+  acceptWorkspaceInvite,
+  declineWorkspaceInvite,
+} from '@tuturuuu/internal-api/workspaces';
+import { Button } from '@tuturuuu/ui/button';
+import type { Notification } from '@tuturuuu/ui/hooks/use-notifications';
+import {
+  dispatchRequestOpenTask,
+  waitForTaskOpenResult,
+} from '@tuturuuu/ui/lib/task-open-events';
+import { toast } from '@tuturuuu/ui/sonner';
+import { cn } from '@tuturuuu/utils/format';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { useState } from 'react';
+
+import { useNotificationRuntime } from './notification-runtime';
+
+dayjs.extend(relativeTime);
+interface NotificationCardProps {
+  notification: Notification;
+  wsId?: string;
+  onMarkAsRead: (id: string, isUnread: boolean) => void;
+  markAsReadText: string;
+  markAsUnreadText: string;
+  queryClient: any;
+  onActionComplete?: () => void;
+  acceptText: string;
+  declineText: string;
+  acceptedText: string;
+  declinedText: string;
+}
+
+function getWorkspaceInviteWorkspaceId(notification: Notification) {
+  const candidates = [
+    notification.data?.workspace_id,
+    notification.entity_id,
+    notification.ws_id,
+  ];
+
+  return (
+    candidates.find(
+      (candidate): candidate is string =>
+        typeof candidate === 'string' && candidate.length > 0
+    ) ?? null
+  );
+}
+
+export function NotificationCard({
+  notification,
+  wsId,
+  onMarkAsRead,
+  markAsReadText,
+  markAsUnreadText,
+  queryClient,
+  onActionComplete,
+  acceptText,
+  declineText,
+  acceptedText,
+  declinedText,
+}: NotificationCardProps) {
+  const isUnread = !notification.read_at;
+  const [processingAction, setProcessingAction] = useState<string | null>(null);
+  const { router, params, pathname, Link } = useNotificationRuntime();
+
+  const handleAction = async (actionType: string, payload: any) => {
+    setProcessingAction(actionType);
+
+    try {
+      switch (actionType) {
+        case 'WORKSPACE_INVITE_ACCEPT':
+        case 'WORKSPACE_INVITE_DECLINE': {
+          const accept = actionType === 'WORKSPACE_INVITE_ACCEPT';
+          const targetWsId = payload.wsId;
+          if (!targetWsId) {
+            toast.error('Failed to process invite');
+            break;
+          }
+
+          await (accept
+            ? acceptWorkspaceInvite(targetWsId)
+            : declineWorkspaceInvite(targetWsId));
+          await updateNotificationMetadata(notification.id, {
+            action_taken: accept ? 'accepted' : 'declined',
+            action_timestamp: new Date().toISOString(),
+          });
+
+          await Promise.all([
+            queryClient.invalidateQueries({
+              queryKey: ['workspaces'],
+              refetchType: 'active',
+            }),
+            queryClient.invalidateQueries({
+              queryKey: ['notifications'],
+              refetchType: 'active',
+            }),
+            queryClient.refetchQueries({
+              queryKey: ['notifications'],
+              type: 'active',
+            }),
+          ]);
+
+          toast.success(accept ? acceptedText : declinedText);
+
+          onMarkAsRead(notification.id, true);
+          router.refresh();
+          onActionComplete?.();
+          break;
+        }
+        default:
+          break;
+      }
+    } catch (error) {
+      console.error('Action error:', error);
+      toast.error('An error occurred');
+    } finally {
+      setProcessingAction(null);
+    }
+  };
+
+  const notificationWsId = notification.ws_id || wsId;
+  const isTaskEntityNotification =
+    notification.entity_type === 'task' && !!notification.entity_id;
+  const entityLink =
+    notification.entity_type === 'time_tracking_request' &&
+    notification.entity_id &&
+    notificationWsId
+      ? `/${notificationWsId}/time-tracker/requests`
+      : null;
+
+  return (
+    <div
+      className={cn(
+        'group relative rounded-xl border p-3 transition-all hover:border-foreground/20 hover:shadow-sm',
+        isUnread
+          ? 'border-dynamic-blue/40 bg-dynamic-blue/5'
+          : 'bg-foreground/2 hover:bg-foreground/4'
+      )}
+    >
+      <div className="flex items-start gap-3">
+        {/* Icon */}
+        <div
+          className={cn(
+            'flex h-8 w-8 flex-none items-center justify-center rounded-full transition-colors',
+            isUnread
+              ? 'bg-dynamic-blue/20 text-dynamic-blue'
+              : 'bg-foreground/10 text-foreground/60'
+          )}
+        >
+          {getNotificationIcon(notification.type)}
+        </div>
+
+        {/* Content */}
+        <div className="min-w-0 flex-1">
+          <div className="mb-1 font-medium text-sm leading-snug">
+            {notification.title}
+          </div>
+
+          {notification.description && (
+            <div className="mb-1.5 line-clamp-2 text-foreground/70 text-xs leading-relaxed">
+              {notification.description}
+            </div>
+          )}
+
+          <div className="mb-2 text-foreground/40 text-xs">
+            {dayjs(notification.created_at).fromNow()}
+          </div>
+
+          {/* Action buttons or status */}
+          {notification.type === 'workspace_invite' &&
+          notification.data?.action_taken ? (
+            <div className="mt-2 inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
+              {notification.data.action_taken === 'accepted' ? (
+                <>
+                  <CheckCircle2 className="h-3 w-3 text-dynamic-green" />
+                  <span className="font-medium text-dynamic-green">
+                    {acceptedText}
+                  </span>
+                </>
+              ) : (
+                <>
+                  <XCircle className="h-3 w-3 text-foreground/40" />
+                  <span className="font-medium text-foreground/60">
+                    {declinedText}
+                  </span>
+                </>
+              )}
+            </div>
+          ) : notification.type === 'workspace_invite' &&
+            !notification.data?.action_taken ? (
+            <div className="mt-2 flex items-center gap-1.5">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() =>
+                  handleAction('WORKSPACE_INVITE_DECLINE', {
+                    wsId: getWorkspaceInviteWorkspaceId(notification),
+                  })
+                }
+                disabled={!!processingAction}
+                className="h-7 gap-1 text-xs"
+              >
+                {processingAction === 'WORKSPACE_INVITE_DECLINE' ? (
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                ) : (
+                  <X className="h-3 w-3" />
+                )}
+                {declineText}
+              </Button>
+              <Button
+                size="sm"
+                onClick={() =>
+                  handleAction('WORKSPACE_INVITE_ACCEPT', {
+                    wsId: getWorkspaceInviteWorkspaceId(notification),
+                  })
+                }
+                disabled={!!processingAction}
+                className="h-7 gap-1 text-xs"
+              >
+                {processingAction === 'WORKSPACE_INVITE_ACCEPT' ? (
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                ) : (
+                  <Check className="h-3 w-3" />
+                )}
+                {acceptText}
+              </Button>
+            </div>
+          ) : isTaskEntityNotification ? (
+            <Button
+              variant="link"
+              size="sm"
+              className="h-auto p-0 text-xs hover:text-dynamic-blue"
+              disabled={!!processingAction}
+              onClick={async () => {
+                if (!notification.entity_id) return;
+                setProcessingAction('OPEN_TASK');
+                try {
+                  const { handled, requestId } = dispatchRequestOpenTask({
+                    taskId: notification.entity_id,
+                    wsId: notificationWsId,
+                  });
+
+                  const opened = handled
+                    ? await waitForTaskOpenResult(requestId, 6000)
+                    : false;
+
+                  if (!opened && notificationWsId) {
+                    const locale =
+                      typeof params?.locale === 'string' ? params.locale : null;
+                    const targetWorkspacePath = locale
+                      ? `/${locale}/${notificationWsId}`
+                      : `/${notificationWsId}`;
+                    const isAlreadyInTargetWorkspace =
+                      pathname === targetWorkspacePath ||
+                      pathname.startsWith(`${targetWorkspacePath}/`);
+
+                    const openTaskParam = `openTaskId=${encodeURIComponent(notification.entity_id)}`;
+                    const fallbackUrl = isAlreadyInTargetWorkspace
+                      ? `${pathname}?${openTaskParam}`
+                      : `${targetWorkspacePath}?${openTaskParam}`;
+
+                    router.push(fallbackUrl);
+                  }
+                  onActionComplete?.();
+                } finally {
+                  setProcessingAction(null);
+                }
+              }}
+            >
+              {processingAction === 'OPEN_TASK' ? (
+                <>
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  Opening...
+                </>
+              ) : (
+                'View details →'
+              )}
+            </Button>
+          ) : entityLink ? (
+            <Link href={entityLink} onClick={onActionComplete}>
+              <Button
+                variant="link"
+                size="sm"
+                className="h-auto p-0 text-xs hover:text-dynamic-blue"
+              >
+                View details →
+              </Button>
+            </Link>
+          ) : null}
+        </div>
+
+        {/* Mark as read/unread button */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn(
+            'h-7 w-7 flex-none transition-opacity hover:bg-foreground/10',
+            'opacity-0 group-hover:opacity-100'
+          )}
+          onClick={() => onMarkAsRead(notification.id, isUnread)}
+          title={isUnread ? markAsReadText : markAsUnreadText}
+        >
+          {isUnread ? (
+            <EyeOff className="h-4 w-4" />
+          ) : (
+            <Eye className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function getNotificationIcon(type: string) {
+  const iconClassName = 'h-4 w-4';
+
+  switch (type) {
+    case 'task_assigned':
+      return <ClipboardList className={iconClassName} />;
+    case 'task_updated':
+      return <Edit3 className={iconClassName} />;
+    case 'task_completed':
+      return <CheckCircle2 className={iconClassName} />;
+    case 'task_reopened':
+      return <RotateCcw className={iconClassName} />;
+    case 'task_mention':
+      return <AtSign className={iconClassName} />;
+    case 'task_due_date_changed':
+    case 'task_start_date_changed':
+      return <Calendar className={iconClassName} />;
+    case 'workspace_invite':
+      return <Mail className={iconClassName} />;
+    case 'account_update':
+      return <UserPlus className={iconClassName} />;
+    case 'security_alert':
+      return <Shield className={iconClassName} />;
+    default:
+      return <Bell className={iconClassName} />;
+  }
+}

package/src/components/ui/custom/notification-list.tsx

@@ -0,0 +1,178 @@
+'use client';
+import { Archive, Bell, Inbox, Loader2, RotateCcw } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import type {
+  Notification,
+  useInfiniteNotifications,
+} from '@tuturuuu/ui/hooks/use-notifications';
+import { useCallback, useEffect, useRef } from 'react';
+import { NotificationCard } from './notification-card';
+
+type TabType = 'inbox' | 'archive';
+export function NotificationList({
+  query,
+  notifications,
+  hasNotifications,
+  activeTab,
+  wsId,
+  noNotificationsText,
+  emptyArchiveText,
+  loadingMoreText,
+  retryText,
+  acceptText,
+  declineText,
+  acceptedText,
+  declinedText,
+  markAsReadText,
+  markAsUnreadText,
+  onMarkAsRead,
+  queryClient,
+  onActionComplete,
+}: {
+  query: ReturnType<typeof useInfiniteNotifications>;
+  notifications: Notification[];
+  hasNotifications: boolean;
+  activeTab: TabType;
+  wsId?: string;
+  noNotificationsText: string;
+  emptyArchiveText: string;
+  loadingMoreText: string;
+  retryText: string;
+  acceptText: string;
+  declineText: string;
+  acceptedText: string;
+  declinedText: string;
+  markAsReadText: string;
+  markAsUnreadText: string;
+  onMarkAsRead: (id: string, isUnread: boolean) => void;
+  queryClient: any;
+  onActionComplete: () => void;
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+
+  // Infinite scroll via IntersectionObserver
+  const handleIntersect = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      const entry = entries[0];
+      if (
+        entry?.isIntersecting &&
+        query.hasNextPage &&
+        !query.isFetchingNextPage
+      ) {
+        query.fetchNextPage();
+      }
+    },
+    [query]
+  );
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(handleIntersect, {
+      root: scrollRef.current,
+      rootMargin: '100px',
+    });
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [handleIntersect]);
+
+  const emptyText =
+    activeTab === 'inbox' ? noNotificationsText : emptyArchiveText;
+
+  if (query.error) {
+    return (
+      <div className="flex h-90 flex-col items-center justify-center text-center">
+        <Bell className="mb-3 h-10 w-10 text-dynamic-red/30" />
+        <p className="text-foreground/60 text-sm">
+          Failed to load notifications
+        </p>
+        <p className="mt-1 text-foreground/40 text-xs">
+          {query.error instanceof Error ? query.error.message : 'Unknown error'}
+        </p>
+        <Button
+          className="mt-3"
+          disabled={query.isFetching}
+          onClick={() => query.refetch()}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          {query.isFetching ? (
+            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
+          )}
+          {retryText}
+        </Button>
+      </div>
+    );
+  }
+
+  if (query.isLoading) {
+    return (
+      <div className="space-y-2 p-2">
+        {[...Array(3)].map((_, i) => (
+          <div key={i} className="rounded-xl border bg-foreground/2 p-3">
+            <div className="flex items-start gap-3">
+              <div className="h-8 w-8 flex-none animate-pulse rounded-full bg-foreground/10" />
+              <div className="min-w-0 flex-1 space-y-2">
+                <div className="h-3 w-24 animate-pulse rounded bg-foreground/10" />
+                <div className="h-4 w-full animate-pulse rounded bg-foreground/10" />
+                <div className="h-3 w-3/4 animate-pulse rounded bg-foreground/10" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (!hasNotifications) {
+    return (
+      <div className="flex h-90 flex-col items-center justify-center text-center">
+        {activeTab === 'inbox' ? (
+          <Inbox className="mb-3 h-10 w-10 text-foreground/20" />
+        ) : (
+          <Archive className="mb-3 h-10 w-10 text-foreground/20" />
+        )}
+        <p className="text-foreground/60 text-sm">{emptyText}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={scrollRef} className="max-h-90 overflow-y-auto">
+      <div className="space-y-1.5 p-2">
+        {notifications.map((notification) => (
+          <NotificationCard
+            key={notification.id}
+            notification={notification}
+            wsId={wsId}
+            onMarkAsRead={onMarkAsRead}
+            markAsReadText={markAsReadText}
+            markAsUnreadText={markAsUnreadText}
+            queryClient={queryClient}
+            onActionComplete={onActionComplete}
+            acceptText={acceptText}
+            declineText={declineText}
+            acceptedText={acceptedText}
+            declinedText={declinedText}
+          />
+        ))}
+
+        {/* Sentinel for infinite scroll */}
+        <div ref={sentinelRef} className="h-1" />
+
+        {query.isFetchingNextPage && (
+          <div className="flex items-center justify-center gap-2 py-3 text-foreground/40 text-xs">
+            <Loader2 className="h-3 w-3 animate-spin" />
+            {loadingMoreText}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}