ui-syncup 0.3.13 → 0.4.0-beta.1

package/src/components/shared/notifications/notification-group-item.tsx

@@ -0,0 +1,268 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { ChevronDown, ChevronUp } from 'lucide-react'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { NotificationItem } from './notification-item'
+import { formatTimestamp, NotificationIcon, getInitials } from './utils'
+import { formatActorNames, type NotificationGroup } from '@/features/notifications/utils/group-notifications'
+import { useMarkAsRead } from '@/features/notifications/hooks'
+
+// ============================================================================
+// NOTIFICATION GROUP ITEM COMPONENT
+// ============================================================================
+
+interface NotificationGroupItemProps {
+  group: NotificationGroup
+  teamId: string | null
+}
+
+/**
+ * NotificationGroupItem - Collapsed view for grouped notifications
+ *
+ * Shows "User A and 3 others commented on Issue #123" with expandable details.
+ * Clicking the main area navigates to the entity, clicking expand shows all notifications.
+ */
+export function NotificationGroupItem({ group, teamId }: NotificationGroupItemProps) {
+  const router = useRouter()
+  const [isExpanded, setIsExpanded] = useState(false)
+  const { mutate: markAsRead } = useMarkAsRead()
+
+  const { latest, notifications, actorNames, hasUnread, type } = group
+  const timestamp = formatTimestamp(latest.createdAt)
+  const actorDisplay = formatActorNames(actorNames)
+
+  const handleClick = () => {
+    // Mark all unread notifications in group as read
+    if (hasUnread) {
+      notifications
+        .filter((n) => !n.readAt)
+        .forEach((n) => markAsRead(n.id))
+    }
+
+    // Navigate to target URL of latest notification
+    if (latest.metadata.target_url) {
+      router.push(latest.metadata.target_url)
+    }
+  }
+
+  const handleExpandClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setIsExpanded(!isExpanded)
+  }
+
+  const message = getGroupMessage(group)
+
+  return (
+    <div className="relative">
+      {/* Main collapsed view */}
+      <div
+        className={cn(
+          'p-4 hover:bg-muted/50 cursor-pointer relative group transition-colors min-h-[56px]',
+          hasUnread && 'bg-blue-50/50 dark:bg-blue-950/20'
+        )}
+        role="listitem"
+        aria-label={`${notifications.length} notifications from ${actorDisplay}`}
+        onClick={handleClick}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            handleClick()
+          }
+        }}
+      >
+        <div className="flex gap-3">
+          {/* Stacked Avatars */}
+          <div className="relative h-10 w-10 flex-shrink-0">
+            <StackedAvatars 
+              notifications={notifications.slice(0, 3)} 
+              actorNames={actorNames}
+            />
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-start gap-2">
+              <NotificationIcon 
+                type={type}
+                className="h-4 w-4 mt-0.5 text-muted-foreground flex-shrink-0" 
+              />
+              <p className="text-sm text-foreground line-clamp-2 flex-1">
+                {message}
+              </p>
+            </div>
+            
+            <div className="flex items-center gap-2 mt-1">
+              <p className="text-xs text-muted-foreground">
+                {timestamp}
+              </p>
+              <span className="text-xs text-muted-foreground">•</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-auto p-0 text-xs text-muted-foreground hover:text-foreground"
+                onClick={handleExpandClick}
+              >
+                {notifications.length} notifications
+                {isExpanded ? (
+                  <ChevronUp className="h-3 w-3 ml-1" />
+                ) : (
+                  <ChevronDown className="h-3 w-3 ml-1" />
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Unread indicator */}
+        {hasUnread && (
+          <div 
+            className="absolute left-1.5 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-blue-500" 
+            aria-label="Unread"
+          />
+        )}
+      </div>
+
+      {/* Expanded view */}
+      {isExpanded && (
+        <div className="border-l-2 border-muted ml-6 bg-muted/30">
+          {notifications.map((notification) => (
+            <NotificationItem
+              key={notification.id}
+              notification={notification}
+              teamId={teamId}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// HELPER COMPONENTS
+// ============================================================================
+
+interface StackedAvatarsProps {
+  notifications: NotificationGroup['notifications']
+  actorNames: string[]
+}
+
+/**
+ * Stacked avatars showing multiple actors
+ */
+function StackedAvatars({ notifications, actorNames }: StackedAvatarsProps) {
+  const uniqueActors = notifications
+    .filter((n, i, arr) => arr.findIndex((a) => a.actorId === n.actorId) === i)
+    .slice(0, 3)
+
+  if (uniqueActors.length === 1) {
+    const notification = uniqueActors[0]
+    const name = notification.metadata.actor_name || actorNames[0] || 'Someone'
+    return (
+      <Avatar className="h-10 w-10">
+        {notification.metadata.actor_avatar_url && (
+          <AvatarImage src={notification.metadata.actor_avatar_url} alt={name} />
+        )}
+        <AvatarFallback className={cn('text-white', getAvatarColor(notification.actorId || 'default'))}>
+          {getInitials(name)}
+        </AvatarFallback>
+      </Avatar>
+    )
+  }
+
+  return (
+    <div className="relative h-10 w-10">
+      {uniqueActors.slice(0, 2).map((notification, index) => {
+        const name = notification.metadata.actor_name || actorNames[index] || 'Someone'
+        return (
+          <Avatar
+            key={notification.actorId || index}
+            className={cn(
+              'h-7 w-7 border-2 border-background absolute',
+              index === 0 ? 'top-0 left-0 z-10' : 'bottom-0 right-0'
+            )}
+          >
+            {notification.metadata.actor_avatar_url && (
+              <AvatarImage src={notification.metadata.actor_avatar_url} alt={name} />
+            )}
+            <AvatarFallback 
+              className={cn('text-white text-xs', getAvatarColor(notification.actorId || 'default'))}
+            >
+              {getInitials(name)}
+            </AvatarFallback>
+          </Avatar>
+        )
+      })}
+      {uniqueActors.length > 2 && (
+        <div className="absolute -bottom-1 -right-1 h-5 w-5 rounded-full bg-muted border-2 border-background flex items-center justify-center text-[10px] font-medium">
+          +{uniqueActors.length - 2}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+
+/**
+ * Get group message text based on type and actors
+ */
+function getGroupMessage(group: NotificationGroup): string {
+  const { type, actorNames, latest } = group
+  const actors = formatActorNames(actorNames)
+  const { metadata } = latest
+
+  switch (type) {
+    case 'mention':
+      return `${actors} mentioned you${metadata.issue_key ? ` in ${metadata.issue_key}` : ''}`
+
+    case 'comment_created':
+      return `${actors} commented on ${metadata.issue_key || 'an issue'}`
+
+    case 'reply':
+      return `${actors} replied to your comment${metadata.issue_key ? ` on ${metadata.issue_key}` : ''}`
+
+    case 'issue_assigned':
+      return `${actors} assigned you to ${metadata.issue_key || 'issues'}`
+
+    case 'issue_status_changed':
+      return `${actors} changed status on ${metadata.issue_key || 'issues'}`
+
+    case 'project_invitation':
+      return `${actors} invited you to projects`
+
+    case 'team_invitation':
+      return `${actors} invited you to teams`
+
+    case 'role_updated':
+      return `Your role was updated by ${actors}`
+
+    default:
+      return `${actors} sent you notifications`
+  }
+}
+
+/**
+ * Get avatar color based on user ID
+ */
+function getAvatarColor(userId: string): string {
+  const colors = [
+    'bg-blue-500',
+    'bg-green-500',
+    'bg-purple-500',
+    'bg-orange-500',
+    'bg-pink-500',
+    'bg-indigo-500',
+    'bg-teal-500',
+    'bg-rose-500',
+  ]
+  const hash = userId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  return colors[hash % colors.length]
+}

package/src/components/shared/notifications/notification-item.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { cn } from '@/lib/utils'
+import { NotificationActions } from './notification-actions'
+import { formatTimestamp, NotificationIcon } from './utils'
+import { useMarkAsRead } from '@/features/notifications/hooks'
+import type { Notification } from '@/features/notifications/api'
+
+// ============================================================================
+// NOTIFICATION ITEM COMPONENT
+// ============================================================================
+
+interface NotificationItemProps {
+  notification: Notification
+  teamId: string | null
+}
+
+/**
+ * NotificationItem - Single notification in the list
+ *
+ * Features:
+ * - Polymorphic rendering based on notification type
+ * - Deep-link navigation on click with scroll-to-comment
+ * - Visual distinction for read/unread state
+ * - Inline actions for invitation types
+ */
+export function NotificationItem({ notification, teamId }: NotificationItemProps) {
+  const router = useRouter()
+  const { mutate: markAsRead } = useMarkAsRead()
+
+  const handleClick = () => {
+    // Don't navigate or mark as read for invitation notifications
+    // User must accept/decline first (handled by NotificationActions)
+    const isInvitationType = 
+      notification.type === 'project_invitation' || 
+      notification.type === 'team_invitation'
+    if (isInvitationType) {
+      return
+    }
+
+    // Mark as read if unread (non-invitation types only)
+    if (!notification.readAt) {
+      markAsRead(notification.id)
+    }
+
+    // Navigate to target URL for other notification types
+    if (notification.metadata.target_url) {
+      router.push(notification.metadata.target_url)
+    }
+  }
+
+  const actorName = notification.metadata.actor_name || 'Someone'
+  const message = getNotificationMessage(notification)
+  const timestamp = formatTimestamp(notification.createdAt)
+  const isInvitation = notification.type === 'project_invitation' || notification.type === 'team_invitation'
+
+  return (
+    <div
+      className={cn(
+        'p-4 hover:bg-muted/50 cursor-pointer relative group transition-colors min-h-[56px]',
+        !notification.readAt && 'bg-blue-50/50 dark:bg-blue-950/20'
+      )}
+      role="listitem"
+      aria-label={`Notification from ${actorName}`}
+      onClick={handleClick}
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          handleClick()
+        }
+      }}
+    >
+      <div className="flex gap-3">
+        {/* Avatar */}
+        <Avatar className="h-10 w-10 flex-shrink-0">
+          {notification.metadata.actor_avatar_url && (
+            <AvatarImage 
+              src={notification.metadata.actor_avatar_url} 
+              alt={actorName} 
+            />
+          )}
+          <AvatarFallback className={cn('text-white', getAvatarColor(notification.actorId || 'default'))}>
+            {getInitials(actorName)}
+          </AvatarFallback>
+        </Avatar>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start gap-2">
+            <NotificationIcon 
+              type={notification.type}
+              className="h-4 w-4 mt-0.5 text-muted-foreground flex-shrink-0" 
+            />
+            <p className="text-sm text-foreground line-clamp-2 flex-1">
+              {message}
+            </p>
+          </div>
+          
+          <p className="text-xs text-muted-foreground mt-1">
+            {timestamp}
+          </p>
+
+          {/* Invitation Actions */}
+          {isInvitation && (
+            <NotificationActions notification={notification} teamId={teamId} />
+          )}
+        </div>
+      </div>
+
+      {/* Unread indicator */}
+      {!notification.readAt && (
+        <div 
+          className="absolute left-1.5 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-blue-500" 
+          aria-label="Unread"
+        />
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+
+/**
+ * Get notification message text based on type and metadata
+ */
+function getNotificationMessage(notification: Notification): string {
+  const { type, metadata } = notification
+  const actor = metadata.actor_name || 'Someone'
+
+  switch (type) {
+    case 'mention':
+      return `${actor} mentioned you${metadata.issue_key ? ` in ${metadata.issue_key}` : ''}`
+
+    case 'comment_created':
+      return `${actor} commented on ${metadata.issue_key || 'an issue'}${metadata.comment_preview ? `: "${metadata.comment_preview}"` : ''}`
+
+    case 'reply':
+      return `${actor} replied to your comment${metadata.issue_key ? ` on ${metadata.issue_key}` : ''}`
+
+    case 'issue_assigned':
+      return `${actor} assigned you to ${metadata.issue_key || 'an issue'}${metadata.issue_title ? `: ${metadata.issue_title}` : ''}`
+
+    case 'issue_status_changed':
+      return `${actor} changed ${metadata.issue_key || 'issue'} status${metadata.new_status ? ` to ${metadata.new_status}` : ''}`
+
+    case 'project_invitation':
+      return `${actor} invited you to join ${metadata.project_name || 'a project'}`
+
+    case 'team_invitation':
+      return `${actor} invited you to join ${metadata.team_name || 'a team'}`
+
+    case 'role_updated':
+      return `Your role was updated${metadata.new_role ? ` to ${metadata.new_role}` : ''}${metadata.project_name ? ` in ${metadata.project_name}` : ''}`
+
+    default:
+      return `${actor} sent you a notification`
+  }
+}
+
+/**
+ * Get avatar color based on user ID
+ */
+function getAvatarColor(userId: string): string {
+  const colors = [
+    'bg-blue-500',
+    'bg-green-500',
+    'bg-purple-500',
+    'bg-orange-500',
+    'bg-pink-500',
+    'bg-indigo-500',
+    'bg-teal-500',
+    'bg-rose-500',
+  ]
+  const hash = userId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  return colors[hash % colors.length]
+}
+
+/**
+ * Get initials from name for avatar fallback
+ */
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase())
+    .slice(0, 2)
+    .join('')
+}

package/src/components/shared/notifications/notification-load-more.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
+import { cn } from '@/lib/utils'
+
+// ============================================================================
+// NOTIFICATION LOAD MORE COMPONENT (MOCKUP UI)
+// ============================================================================
+
+interface NotificationLoadMoreProps {
+  hasMore: boolean
+  isLoading?: boolean
+  onLoadMore: () => void
+  className?: string
+  disabled?: boolean
+}
+
+/**
+ * NotificationLoadMore - Load more button for notification pagination
+ *
+ * Already mockup-ready - just a presentational component.
+ */
+export function NotificationLoadMore({
+  hasMore,
+  isLoading = false,
+  onLoadMore,
+  className,
+  disabled = false,
+}: NotificationLoadMoreProps) {
+  if (!hasMore) {
+    return null
+  }
+
+  return (
+    <div className={cn('border-t p-3 flex justify-center bg-background', className)}>
+      <Button
+        variant="outline"
+        size="sm"
+        disabled={isLoading || disabled}
+        onClick={onLoadMore}
+        className="gap-2 min-h-[44px] px-4"
+        aria-disabled={isLoading || disabled}
+      >
+        {isLoading && <Spinner />}
+        {isLoading ? 'Loading more' : 'Load more'}
+      </Button>
+    </div>
+  )
+}

package/src/components/shared/notifications/notification-panel.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { NotificationBell } from './notification-bell-button'
+import { useTeam } from '@/hooks/use-team'
+import { useNotificationToast, useNotificationSubscription } from '@/features/notifications/hooks'
+import { useSession } from '@/features/auth/hooks/use-session'
+
+// ============================================================================
+// NOTIFICATION PANEL
+// ============================================================================
+
+interface NotificationPanelProps {
+  className?: string
+}
+
+/**
+ * NotificationPanel - Main entry point for notifications
+ *
+ * Wraps NotificationBell with team context and enables:
+ * - Supabase Realtime subscription for instant updates
+ * - Toast notifications for new notifications
+ * - Polling fallback when Realtime is unavailable
+ *
+ * Place this in your app header/layout.
+ */
+export function NotificationPanel({ className = '' }: NotificationPanelProps) {
+  const { currentTeam } = useTeam()
+  const { user } = useSession()
+  
+  // Subscribe to real-time notification updates via Supabase Realtime
+  // Falls back to polling if Realtime connection fails
+  const { isConnected } = useNotificationSubscription({
+    userId: user?.id ?? null,
+    enabled: !!user && !!currentTeam,
+  })
+  
+  // Enable toast notifications for real-time updates
+  useNotificationToast({ enabled: !!currentTeam })
+
+  return (
+    <NotificationBell 
+      teamId={currentTeam?.id ?? null} 
+      className={className}
+      realtimeConnected={isConnected}
+    />
+  )
+}
+
+export default NotificationPanel

package/src/components/shared/notifications/utils.tsx

@@ -0,0 +1,127 @@
+// ============================================================================
+// UTILITY FUNCTIONS FOR NOTIFICATIONS
+// ============================================================================
+
+import {
+  RiAtLine,
+  RiChat1Line,
+  RiReplyLine,
+  RiUserAddLine,
+  RiExchangeLine,
+  RiMailLine,
+  RiTeamLine,
+  RiShieldUserLine,
+} from '@remixicon/react'
+import type { NotificationType } from '@/features/notifications/api'
+import type { ComponentType } from 'react'
+
+/**
+ * Format timestamp to human-readable relative time
+ */
+export function formatTimestamp(timestamp: string): string {
+  const now = new Date()
+  const date = new Date(timestamp)
+  const seconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+  if (seconds < 60) {
+    return 'just now'
+  }
+
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) {
+    return `${minutes}m ago`
+  }
+
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) {
+    return `${hours}h ago`
+  }
+
+  const days = Math.floor(hours / 24)
+  if (days < 7) {
+    return `${days}d ago`
+  }
+
+  const weeks = Math.floor(days / 7)
+  if (weeks < 4) {
+    return `${weeks}w ago`
+  }
+
+  const months = Math.floor(days / 30)
+  return `${months}mo ago`
+}
+
+/**
+ * Get icon component for notification type
+ */
+export function getNotificationIcon(
+  type: NotificationType
+): ComponentType<{ className?: string }> | null {
+  switch (type) {
+    case 'mention':
+      return RiAtLine
+    case 'comment_created':
+      return RiChat1Line
+    case 'reply':
+      return RiReplyLine
+    case 'issue_assigned':
+      return RiUserAddLine
+    case 'issue_status_changed':
+      return RiExchangeLine
+    case 'project_invitation':
+      return RiMailLine
+    case 'team_invitation':
+      return RiTeamLine
+    case 'role_updated':
+      return RiShieldUserLine
+    default:
+      return null
+  }
+}
+
+/**
+ * NotificationIcon - Renders the appropriate icon for a notification type
+ * 
+ * This component uses a switch statement to directly render icon components,
+ * avoiding the creation of components during render which would violate React's static-components rule.
+ */
+export function NotificationIcon({
+  type,
+  className,
+}: {
+  type: NotificationType
+  className?: string
+}) {
+  switch (type) {
+    case 'mention':
+      return <RiAtLine className={className} />
+    case 'comment_created':
+      return <RiChat1Line className={className} />
+    case 'reply':
+      return <RiReplyLine className={className} />
+    case 'issue_assigned':
+      return <RiUserAddLine className={className} />
+    case 'issue_status_changed':
+      return <RiExchangeLine className={className} />
+    case 'project_invitation':
+      return <RiMailLine className={className} />
+    case 'team_invitation':
+      return <RiTeamLine className={className} />
+    case 'role_updated':
+      return <RiShieldUserLine className={className} />
+    default:
+      return null
+  }
+}
+
+/**
+ * Generate initials from name for avatar fallback
+ */
+export function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase())
+    .slice(0, 2)
+    .join('')
+}

package/src/components/shared/permission-guard/index.ts

@@ -0,0 +1 @@
+export { PermissionTooltip } from "./permission-tooltip"