ui-syncup 0.3.13 → 0.4.0-beta.1

package/src/components/shared/permission-guard/permission-tooltip.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+
+interface PermissionTooltipProps {
+  children: React.ReactNode
+  tooltipContent: React.ReactNode
+  permission?: string
+  asChild?: boolean
+  className?: string
+}
+
+export function PermissionTooltip({
+  children,
+  tooltipContent,
+  permission,
+  asChild = false,
+  className,
+}: PermissionTooltipProps) {
+  const trigger =
+    asChild && React.isValidElement(children) ? children : <span>{children}</span>
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild={asChild}>{trigger}</TooltipTrigger>
+      <TooltipContent
+        side="top"
+        align="center"
+        className={cn(
+          "w-fit max-w-xs rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-muted-foreground shadow-lg",
+          className,
+        )}
+      >
+        <p>{tooltipContent}</p>
+        {permission ? (
+          <span className="mt-1 block text-[10px] uppercase tracking-wide text-muted-foreground">
+            {permission} required
+          </span>
+        ) : null}
+      </TooltipContent>
+    </Tooltip>
+  )
+}

package/src/components/shared/relative-time.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { formatRelativeTime } from "@/lib/date";
+import { cn } from "@/lib/utils";
+import { HTMLAttributes, useEffect, useState } from "react";
+
+interface RelativeTimeProps extends HTMLAttributes<HTMLTimeElement> {
+  date: Date | string | number;
+  /**
+   * Update interval in milliseconds. Set to 0 to disable auto-update.
+   * Default: 60000 (1 minute)
+   */
+  updateInterval?: number;
+}
+
+export function RelativeTime({ 
+  date, 
+  className, 
+  updateInterval = 60000,
+  ...props 
+}: RelativeTimeProps) {
+  // Use state to force re-renders for live updating
+  const [timeString, setTimeString] = useState(() => formatRelativeTime(date));
+
+  useEffect(() => {
+    // Initial update in case prop changed
+    setTimeString(formatRelativeTime(date));
+
+    // Disable if interval is 0
+    if (updateInterval <= 0) return;
+
+    const intervalId = setInterval(() => {
+      setTimeString(formatRelativeTime(date));
+    }, updateInterval);
+
+    return () => clearInterval(intervalId);
+  }, [date, updateInterval]);
+
+  // Use the time tag for semantic correctness
+  // The dateTime attribute should be in machine-readable format (ISO string)
+  const isoString = new Date(date).toISOString();
+
+  return (
+    <time 
+      dateTime={isoString} 
+      className={cn("whitespace-nowrap", className)}
+      title={new Date(date).toLocaleString()} // Tooltip with exact date
+      {...props}
+    >
+      {timeString}
+    </time>
+  );
+}

package/src/components/shared/section-container.tsx

@@ -0,0 +1,32 @@
+import { cn } from "@/lib/utils"
+
+interface SectionContainerProps {
+  children: React.ReactNode
+  className?: string
+  id?: string
+  variant?: "default" | "muted"
+}
+
+/**
+ * Reusable section wrapper for landing page sections
+ * Provides consistent spacing, max-width, and optional background variants
+ */
+export function SectionContainer({
+  children,
+  className,
+  id,
+  variant = "default",
+}: SectionContainerProps) {
+  return (
+    <section
+      id={id}
+      className={cn(
+        "w-full py-16 md:py-24",
+        variant === "muted" && "bg-muted/30",
+        className
+      )}
+    >
+      <div className="container mx-auto px-4 md:px-6 max-w-7xl">{children}</div>
+    </section>
+  )
+}

package/src/components/shared/service-status-banner.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+/**
+ * ServiceStatusBanner Component
+ * 
+ * Displays a warning banner when optional services (email, storage, Redis) 
+ * are not configured. Shows degraded functionality for each service.
+ * 
+ * @requirements Requirement 9.4 - Display banner in admin settings for degraded state
+ */
+
+import { useState } from "react";
+import { AlertTriangle, ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { useServiceHealth } from "@/features/setup";
+import type { ServiceHealthDTO } from "@/features/setup/api";
+
+interface ServiceInfo {
+  key: keyof Omit<ServiceHealthDTO, 'database'>;
+  label: string;
+  docUrl: string;
+}
+
+const OPTIONAL_SERVICES: ServiceInfo[] = [
+  {
+    key: 'email',
+    label: 'Email (Resend)',
+    docUrl: '/docs/configuration#email',
+  },
+  {
+    key: 'storage',
+    label: 'Storage (R2/S3)',
+    docUrl: '/docs/configuration#storage',
+  },
+  {
+    key: 'redis',
+    label: 'Redis',
+    docUrl: '/docs/configuration#redis',
+  },
+];
+
+export function ServiceStatusBanner() {
+  const { data: health, isLoading } = useServiceHealth();
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Don't render during loading or if health data not available
+  if (isLoading || !health) {
+    return null;
+  }
+
+  // Filter services that are not configured
+  const unconfiguredServices = OPTIONAL_SERVICES.filter(
+    (service) => health[service.key].status === 'not_configured'
+  );
+
+  // Don't render if all services are configured
+  if (unconfiguredServices.length === 0) {
+    return null;
+  }
+
+  return (
+    <Alert className="mb-6 border-amber-500/50 bg-amber-50 dark:bg-amber-950/20">
+      <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
+      <AlertTitle className="text-amber-800 dark:text-amber-200">
+        Some services are not configured
+      </AlertTitle>
+      <AlertDescription className="text-amber-700 dark:text-amber-300">
+        <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
+          <div className="flex items-center justify-between">
+            <p className="text-sm">
+              {unconfiguredServices.length} optional service{unconfiguredServices.length > 1 ? 's are' : ' is'} running in degraded mode.
+            </p>
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm" className="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 h-7 px-2">
+                {isExpanded ? (
+                  <ChevronDown className="h-4 w-4" />
+                ) : (
+                  <ChevronRight className="h-4 w-4" />
+                )}
+                <span className="ml-1">{isExpanded ? 'Hide' : 'Show'} details</span>
+              </Button>
+            </CollapsibleTrigger>
+          </div>
+          <CollapsibleContent className="mt-3 space-y-2">
+            {unconfiguredServices.map((service) => {
+              const serviceHealth = health[service.key];
+              return (
+                <div
+                  key={service.key}
+                  className="rounded-md bg-amber-100/50 dark:bg-amber-900/20 p-3"
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex-1">
+                      <p className="font-medium text-sm text-amber-900 dark:text-amber-100">
+                        {service.label}
+                      </p>
+                      <p className="text-sm text-amber-700 dark:text-amber-300 mt-0.5">
+                        {serviceHealth.degradedBehavior || serviceHealth.message}
+                      </p>
+                    </div>
+                    <a
+                      href={service.docUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400 hover:underline whitespace-nowrap"
+                    >
+                      Configure
+                      <ExternalLink className="h-3 w-3" />
+                    </a>
+                  </div>
+                </div>
+              );
+            })}
+          </CollapsibleContent>
+        </Collapsible>
+      </AlertDescription>
+    </Alert>
+  );
+}

package/src/components/shared/settings-sidebar/index.ts

@@ -0,0 +1,2 @@
+export { UserSettingsAside, type UserSettingsNavItem } from './user-settings-aside'
+export { TeamSettingAside, type TeamSettingsNavItem } from './team-setting-aside'

package/src/components/shared/settings-sidebar/team-setting-aside.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import type { ComponentType } from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+
+export interface TeamSettingsNavItem {
+  href: string
+  label: string
+  description?: string
+  icon: ComponentType<{ className?: string }>
+  badge?: number | string
+  badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline'
+  comingSoon?: boolean
+}
+
+interface TeamSettingAsideProps {
+  items: TeamSettingsNavItem[]
+  heading?: string
+}
+
+export function TeamSettingAside({ items, heading = 'Settings' }: TeamSettingAsideProps) {
+  const pathname = usePathname()
+
+  return (
+    <aside className="w-full md:w-64 shrink-0">
+      <div className="pb-2">
+        <h2 className="mb-2 px-2 text-lg font-semibold tracking-tight">{heading}</h2>
+      </div>
+      <nav className="space-y-1">
+        {items.map((item) => {
+          const isActive = pathname === item.href
+          const Icon = item.icon
+
+          if (item.comingSoon) {
+            return (
+              <div
+                key={item.href}
+                className="flex items-center gap-3 rounded-lg px-3 py-3 text-sm text-muted-foreground opacity-60"
+              >
+                <Icon className="h-5 w-5 mt-0.5 shrink-0" />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium text-sm">{item.label}</span>
+                    <Badge variant="secondary" className="text-xs">
+                      Soon
+                    </Badge>
+                  </div>
+                  {item.description && (
+                    <div className="text-xs text-muted-foreground mt-0.5">
+                      {item.description}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )
+          }
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                'flex items-start gap-3 rounded-lg px-3 py-3 transition-colors',
+                isActive
+                  ? 'bg-secondary text-secondary-foreground'
+                  : 'text-muted-foreground hover:bg-secondary/50 hover:text-foreground'
+              )}
+            >
+              <Icon className="h-5 w-5 mt-0.5 shrink-0" />
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-sm">{item.label}</span>
+                  {item.badge !== undefined && item.badge !== null && (
+                    <Badge
+                      variant={item.badgeVariant ?? 'secondary'}
+                      className="h-5 min-w-5 rounded-full px-1 font-mono text-xs tabular-nums"
+                    >
+                      {item.badge}
+                    </Badge>
+                  )}
+                </div>
+                {item.description && (
+                  <div className="text-xs text-muted-foreground mt-0.5">
+                    {item.description}
+                  </div>
+                )}
+              </div>
+            </Link>
+          )
+        })}
+      </nav>
+    </aside>
+  )
+}

package/src/components/shared/settings-sidebar/user-settings-aside.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import type { ComponentType } from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+
+export interface UserSettingsNavItem {
+  href: string
+  label: string
+  description?: string
+  icon: ComponentType<{ className?: string }>
+}
+
+interface UserSettingsAsideProps {
+  items: UserSettingsNavItem[]
+  heading?: string
+}
+
+export function UserSettingsAside({ items, heading = 'Settings' }: UserSettingsAsideProps) {
+  const pathname = usePathname()
+
+  const visibleItems = items.filter((item) => {
+    if (process.env.NODE_ENV === 'production') {
+      return !['Notifications', 'Integrations'].includes(item.label)
+    }
+    return true
+  })
+
+  return (
+    <aside className="w-full md:w-64 shrink-0">
+      <div className="pb-2">
+        <h2 className="mb-2 px-2 text-lg font-semibold tracking-tight">{heading}</h2>
+      </div>
+      <nav className="space-y-1">
+        {visibleItems.map((item) => {
+          const isActive = pathname === item.href
+          const Icon = item.icon
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                'flex items-start gap-3 rounded-lg px-3 py-3 transition-colors',
+                isActive
+                  ? 'bg-secondary text-secondary-foreground'
+                  : 'text-muted-foreground hover:bg-secondary/50 hover:text-foreground'
+              )}
+            >
+              <Icon className="h-5 w-5 mt-0.5 shrink-0" />
+              <div className="flex-1 min-w-0">
+                <span className="font-medium text-sm">{item.label}</span>
+                {item.description && (
+                  <div className="text-xs text-muted-foreground mt-0.5">
+                    {item.description}
+                  </div>
+                )}
+              </div>
+            </Link>
+          )
+        })}
+      </nav>
+    </aside>
+  )
+}

package/src/components/shared/sidebar/app-sidebar.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import * as React from 'react';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from '@/components/ui/sidebar';
+import { Badge } from '@/components/ui/badge';
+import {
+  RiHome3Line,
+  RiBox2Line,
+  RiListSettingsLine,
+  RiBugLine,
+} from '@remixicon/react';
+import {
+  TeamSwitcher,
+  NavMain,
+  NavProjects,
+} from '@/components/shared/sidebar';
+import { useRecentProjects } from '@/features/projects/hooks';
+import type { NavItem } from '@/components/shared/sidebar';
+import { Separator } from '@/components/ui/separator';
+
+import Cookies from 'js-cookie';
+import { useCanManageTeam } from '@/features/teams/hooks/use-can-manage-team';
+import { useTeams } from '@/features/teams';
+import { isSingleWorkspaceMode } from '@/config/workspace';
+
+// Mock navigation data for mockup UI
+// const MOCK_NAV_ITEMS: NavItem[] = [ ... ] - Moved inside component for dynamic permissions
+
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const teamIdCookie = Cookies.get("team_id");
+  const { data: teamsData } = useTeams();
+  const teams = teamsData?.teams ?? [];
+  
+  // Use cookie if available and valid, otherwise fallback to first team
+  const currentTeam = teams.find((t) => t.id === teamIdCookie) ?? teams[0];
+  const teamId = currentTeam?.id;
+  
+  const canManageTeam = useCanManageTeam(teamId);
+  const { recentProjects, isLoaded: isRecentProjectsLoaded } = useRecentProjects();
+
+  const navItems = React.useMemo(() => {
+    const items: NavItem[] = [
+      {
+        title: 'Home',
+        url: '/',
+        icon: RiHome3Line,
+      },
+      {
+        title: 'Projects',
+        url: '/projects',
+        icon: RiBox2Line,
+      },
+    ];
+
+    if (canManageTeam) {
+      items.push({
+        // In single-workspace mode: Use "Settings" label (Requirement 12.4)
+        // In multi-workspace mode: Use "Team Settings" label
+        title: isSingleWorkspaceMode() ? 'Settings' : 'Team Settings',
+        url: '/team/settings',
+        icon: RiListSettingsLine,
+        items: [
+          {
+            title: 'General',
+            url: '/team/settings',
+          },
+          {
+            title: 'Members',
+            url: '/team/settings/members',
+          },
+        ],
+      });
+    }
+
+    // Dev-only: Auth testing page
+    if (process.env.NODE_ENV !== 'production') {
+      items.push({
+        title: 'Dev: Auth Testing',
+        url: '/dev/auth',
+        icon: RiBugLine,
+      });
+    }
+
+    return items;
+  }, [canManageTeam]);
+
+  return (
+    <Sidebar
+      collapsible="icon"
+      {...props}
+    >
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="/">
+                <div className="flex aspect-square size-8 items-center justify-center">
+                  <svg 
+                    width="32" 
+                    height="32" 
+                    viewBox="0 0 218 218" 
+                    fill="none" 
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="size-8"
+                  >
+                    <path 
+                      d="M119.001 109.071V209.071H99.001V132.879L14.002 216.212L0 201.931L84.5166 119.071H9.00098V99.0713H109.001L119.001 109.071ZM186.782 172.711L179.711 179.782L172.641 186.854L132.234 146.447L139.306 139.376L146.376 132.305L186.782 172.711ZM209.001 119.071H151.857V99.0713H209.001V119.071ZM85.7676 71.6953L71.625 85.8379L31.2188 45.4316L45.3613 31.2891L85.7676 71.6953ZM209.001 9.07129L216.071 16.1426L146.376 85.8379L139.306 78.7666L132.234 71.6953L201.93 2L209.001 9.07129ZM119.001 66.2139H99.001V9.07129H119.001V66.2139Z" 
+                      fill="currentColor"
+                      className="dark:fill-white fill-black"
+                    />
+                  </svg>
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <div className="flex items-center gap-2">
+                    <span className="truncate font-semibold">UI Syncup</span>
+                    <Badge variant="secondary" className="px-1.5 py-0 text-[10px] h-4 leading-none font-mono">Alpha</Badge>
+                  </div>
+                  <span className="truncate text-xs text-muted-foreground">Design Feedback Tracker</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+        <TeamSwitcher />
+      </SidebarHeader>
+      <Separator/>
+      <SidebarContent>
+        <NavMain items={navItems} />
+        <NavProjects projects={recentProjects} isLoading={!isRecentProjectsLoaded} />
+      </SidebarContent>
+      <SidebarFooter>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+}

package/src/components/shared/sidebar/index.ts

@@ -0,0 +1,36 @@
+// ============================================================================
+// SIDEBAR COMPONENTS - BARREL EXPORTS
+// ============================================================================
+//
+// This file provides clean imports for all sidebar-related components
+// following the compound component pattern as per AGENTS.md
+//
+
+// Main navigation components
+export { NavMain } from './sidebar-main'
+export { NavProjects } from './sidebar-project'
+
+// Team management components
+export { TeamSwitcher } from './sidebar-team-switcher'
+export { TeamAvatar, generateTeamInitials } from './sidebar-team-avatar'
+
+// Types and mock data
+export type { Team, Project, NavItem, NavSubItem, User } from './type'
+export {
+  MOCK_TEAMS,
+  MOCK_PROJECTS,
+} from './type'
+
+// ============================================================================
+// USAGE EXAMPLES
+// ============================================================================
+//
+// Import individual components:
+// import { NavMain, NavProjects, TeamSwitcher } from '@/components/shared/sidebar'
+//
+// Import types:
+// import type { Team, NavItem } from '@/components/shared/sidebar'
+//
+// Import mock data:
+// import { MOCK_TEAMS, MOCK_PROJECTS } from '@/components/shared/sidebar'
+//

package/src/components/shared/sidebar/sidebar-main.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { RiArrowRightSLine } from '@remixicon/react';
+
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@/components/ui/sidebar';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import type { NavItem } from './type';
+
+export function NavMain({
+  items,
+}: {
+  items: NavItem[];
+}) {
+  return (
+    <SidebarGroup>
+      {/* <SidebarGroupLabel>Platform</SidebarGroupLabel> */}
+      <SidebarMenu>
+        {items.map((item) => {
+          const hasSubItems = !!item.items?.length;
+          const ItemIcon = item.icon;
+
+          if (hasSubItems) {
+            return (
+              <Collapsible
+                key={item.title}
+                asChild
+                defaultOpen={false}
+                className="group/collapsible"
+              >
+                <SidebarMenuItem>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuButton tooltip={item.title}>
+                      {ItemIcon ? <ItemIcon className="size-4 shrink-0" /> : null}
+                      <span>{item.title}</span>
+                      <RiArrowRightSLine className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                    </SidebarMenuButton>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {item.items?.map((subItem) => (
+                        <SidebarMenuSubItem key={subItem.title}>
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </SidebarMenuItem>
+              </Collapsible>
+            );
+          }
+
+          return (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton
+                asChild
+                tooltip={item.title}
+              >
+                <a href={item.url}>
+                  {ItemIcon ? <ItemIcon className="size-4 shrink-0" /> : null}
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          );
+        })}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}