@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/components/commerce/product-view-switcher.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useState, useCallback, type ReactNode } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { usePathname, useRouter } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+import { LayoutGrid, List } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { FragmentOf, readFragment } from '@/graphql';
+import { ProductCardFragment } from '@/lib/vendure/fragments';
+import { ProductCard } from './product-card';
+import { ProductListView } from './product-list-view';
+
+const STORAGE_KEY = 'catalog-view-preference';
+
+function getInitialView(urlView: string | undefined): 'grid' | 'list' {
+    if (urlView === 'grid' || urlView === 'list') return urlView;
+    if (typeof window !== 'undefined') {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored === 'list') return 'list';
+    }
+    return 'grid';
+}
+
+interface ProductViewSwitcherProps {
+    products: FragmentOf<typeof ProductCardFragment>[];
+    totalItems: number;
+    urlView?: string;
+    currentPage?: number;
+    take?: number;
+    children?: ReactNode;
+}
+
+export function ProductViewSwitcher({ products, totalItems, urlView, currentPage, take, children }: ProductViewSwitcherProps) {
+    const t = useTranslations('Product');
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const [view, setViewState] = useState<'grid' | 'list'>(() => getInitialView(urlView));
+
+    const setView = useCallback((newView: 'grid' | 'list') => {
+        setViewState(newView);
+        localStorage.setItem(STORAGE_KEY, newView);
+        const params = new URLSearchParams(searchParams);
+        if (newView === 'grid') {
+            params.delete('view');
+        } else {
+            params.set('view', newView);
+        }
+        router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    }, [pathname, searchParams, router]);
+
+    return (
+        <>
+            <div className="flex items-center justify-between">
+                <p className="text-sm text-muted-foreground">
+                    {t('productCount', {count: totalItems})}
+                </p>
+                <div className="flex items-center gap-2">
+                    <div className="flex items-center border border-border rounded-md">
+                        <button
+                            onClick={() => setView('grid')}
+                            className={cn(
+                                'p-1.5 rounded-l-md transition-colors',
+                                view === 'grid'
+                                    ? 'bg-primary/10 text-primary'
+                                    : 'text-muted-foreground hover:text-foreground',
+                            )}
+                            aria-label="Grid view"
+                        >
+                            <LayoutGrid className="h-4 w-4" />
+                        </button>
+                        <button
+                            onClick={() => setView('list')}
+                            className={cn(
+                                'p-1.5 rounded-r-md transition-colors',
+                                view === 'list'
+                                    ? 'bg-primary/10 text-primary'
+                                    : 'text-muted-foreground hover:text-foreground',
+                            )}
+                            aria-label="List view"
+                        >
+                            <List className="h-4 w-4" />
+                        </button>
+                    </div>
+                    {children}
+                </div>
+            </div>
+
+            {view === 'list' ? (
+                <ProductListView products={products} currentPage={currentPage} take={take} />
+            ) : (
+                <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {products.map((product, i) => {
+                        const { productId } = readFragment(ProductCardFragment, product);
+                        const position = currentPage && take ? (currentPage - 1) * take + i + 1 : undefined;
+                        return (
+                            <div key={productId} data-search-product-id={productId} data-search-position={position}>
+                                <ProductCard product={product} />
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </>
+    );
+}

package/dist/assets/storefront/src/components/commerce/quote-action-buttons.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import {useState, useTransition, useCallback, useEffect, useRef} from 'react';
+import {useRouter} from '@/i18n/navigation';
+import {Button} from '@/components/ui/button';
+import {Textarea} from '@/components/ui/textarea';
+import {XCircle, MessageSquare, ShoppingCart, Send, Loader2, AlertTriangle} from 'lucide-react';
+import {useTranslations} from 'next-intl';
+import {
+    submitQuote,
+    acceptQuote,
+    rejectQuote,
+    requestQuoteChanges,
+    acceptAndConvertQuote,
+    checkQuoteStock,
+} from '@/app/[locale]/account/quotes/actions';
+
+const TERMINAL_STATUSES = new Set(['ACCEPTED', 'REJECTED', 'CANCELLED', 'EXPIRED']);
+const POLL_INTERVAL_MS = 1000;
+const MAX_POLLS = 10;
+
+interface QuoteActionButtonsProps {
+    quoteId: string;
+    status: string;
+    convertedOrderId?: string | null;
+}
+
+export function QuoteActionButtons({quoteId, status, convertedOrderId}: QuoteActionButtonsProps) {
+    const router = useRouter();
+    const t = useTranslations('Quotes');
+    const [reason, setReason] = useState('');
+    const [isPending, startTransition] = useTransition();
+    const [result, setResult] = useState<{success: boolean; message?: string} | null>(null);
+    const [polling, setPolling] = useState(false);
+    const pollCount = useRef(0);
+    const initialStatus = useRef(status);
+    const [stockWarning, setStockWarning] = useState<Array<{
+        sku: string;
+        productName: string;
+        requestedQuantity: number;
+        availableStock: number;
+    }> | null>(null);
+
+    // When status prop changes (page re-rendered with new data), stop polling
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing local state to prop change
+    useEffect(() => {
+        if (status !== initialStatus.current) {
+            setPolling(false);
+            setResult(null);
+            pollCount.current = 0;
+            initialStatus.current = status;
+        }
+    }, [status]);
+
+    // Poll for status change by refreshing the page data
+    useEffect(() => {
+        if (!polling) return;
+        const timer = setInterval(() => {
+            pollCount.current++;
+            if (pollCount.current >= MAX_POLLS) {
+                setPolling(false);
+                return;
+            }
+            router.refresh();
+        }, POLL_INTERVAL_MS);
+        return () => clearInterval(timer);
+    }, [polling, router]);
+
+    const handleAction = useCallback((action: () => Promise<{success: boolean; message?: string; redirectTo?: string}>) => {
+        startTransition(async () => {
+            const res = await action();
+            setResult(res);
+            if (res.success && 'redirectTo' in res && res.redirectTo) {
+                router.push(res.redirectTo);
+            } else if (res.success) {
+                pollCount.current = 0;
+                setPolling(true);
+                router.refresh();
+            }
+        });
+    }, [router]);
+
+    if (TERMINAL_STATUSES.has(status) && status !== 'ACCEPTED') {
+        return null;
+    }
+
+    if (status === 'ACCEPTED' && convertedOrderId) {
+        return null;
+    }
+
+    if (polling) {
+        return (
+            <div className="flex items-center gap-2 rounded-md border border-blue-200 bg-blue-50 p-3 text-sm text-blue-800">
+                <Loader2 className="h-4 w-4 animate-spin"/>
+                {t('actionProcessing')}
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-3">
+            {status === 'DRAFT' && (
+                <Button
+                    size="sm"
+                    onClick={() => handleAction(() => submitQuote(quoteId))}
+                    disabled={isPending}
+                    className="w-full"
+                >
+                    <Send className="h-4 w-4 mr-1"/>
+                    {t('actionSubmitQuoteRequest')}
+                </Button>
+            )}
+
+            {(status === 'QUOTED' || (status === 'ACCEPTED' && !convertedOrderId)) && (
+                <>
+                    {stockWarning && (
+                        <div className="rounded-md border border-amber-200 bg-amber-50 p-4 space-y-3">
+                            <div className="flex items-start gap-2">
+                                <AlertTriangle className="h-4 w-4 text-amber-600 mt-0.5 shrink-0"/>
+                                <div>
+                                    <p className="text-sm font-medium text-amber-900">{t('stockWarningTitle')}</p>
+                                    <ul className="text-xs text-amber-800 mt-1.5 space-y-1">
+                                        {stockWarning.map(item => (
+                                            <li key={item.sku}>
+                                                <span className="font-medium">{item.productName}</span>
+                                                <span className="text-amber-700"> — {t('stockWarningNeedAvailable', {needed: item.requestedQuantity, available: item.availableStock})}</span>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </div>
+                            </div>
+                            <p className="text-xs text-amber-700">
+                                {status === 'ACCEPTED'
+                                    ? t('stockWarningAcceptedMessage')
+                                    : t('stockWarningQuotedMessage')}
+                            </p>
+                            <div className="flex flex-col gap-2">
+                                {status === 'QUOTED' && (
+                                    <Button
+                                        size="sm"
+                                        variant="outline"
+                                        className="w-full"
+                                        disabled={isPending}
+                                        onClick={() => {
+                                            setStockWarning(null);
+                                            handleAction(() => acceptQuote(quoteId));
+                                        }}
+                                    >
+                                        {t('actionAcceptQuote')}
+                                    </Button>
+                                )}
+                                <Button
+                                    size="sm"
+                                    variant="outline"
+                                    className="w-full border-amber-300 text-amber-900 hover:bg-amber-100"
+                                    onClick={() => setStockWarning(null)}
+                                >
+                                    {t('actionDismiss')}
+                                </Button>
+                            </div>
+                        </div>
+                    )}
+                    {!stockWarning && (
+                        <>
+                            {status === 'QUOTED' && (
+                                <Textarea
+                                    placeholder={t('changeRequestPlaceholder')}
+                                    value={reason}
+                                    onChange={(e) => setReason(e.target.value)}
+                                    rows={2}
+                                    disabled={isPending}
+                                />
+                            )}
+                            <div className="flex flex-col gap-2">
+                                <Button
+                                    onClick={() => {
+                                        startTransition(async () => {
+                                            const stockResult = await checkQuoteStock(quoteId);
+                                            if (!stockResult.allInStock) {
+                                                setStockWarning(stockResult.outOfStockItems);
+                                                return;
+                                            }
+                                            const res = await acceptAndConvertQuote(quoteId);
+                                            setResult(res);
+                                            if (res.success && 'redirectTo' in res && res.redirectTo) {
+                                                router.push(res.redirectTo);
+                                            } else if (res.success) {
+                                                pollCount.current = 0;
+                                                setPolling(true);
+                                                router.refresh();
+                                            }
+                                        });
+                                    }}
+                                    disabled={isPending}
+                                    className="w-full"
+                                >
+                                    <ShoppingCart className="h-4 w-4 mr-2"/>
+                                    {status === 'ACCEPTED' ? t('actionProceedToCheckout') : t('actionAcceptAndCheckout')}
+                                </Button>
+                                {status === 'QUOTED' && (
+                                    <>
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => handleAction(() => requestQuoteChanges(quoteId, reason))}
+                                            disabled={isPending || !reason.trim()}
+                                            className="w-full"
+                                        >
+                                            <MessageSquare className="h-4 w-4 mr-1"/>
+                                            {t('actionRequestChanges')}
+                                        </Button>
+                                        <Button
+                                            variant="destructive"
+                                            size="sm"
+                                            onClick={() => handleAction(() => rejectQuote(quoteId, reason || undefined))}
+                                            disabled={isPending}
+                                            className="w-full"
+                                        >
+                                            <XCircle className="h-4 w-4 mr-1"/>
+                                            {t('actionRejectQuote')}
+                                        </Button>
+                                    </>
+                                )}
+                            </div>
+                        </>
+                    )}
+                </>
+            )}
+
+            {result && !result.success && (
+                <p className="text-sm text-red-600">{result.message || t('errorOccurred')}</p>
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/quote-activity-timeline.tsx

@@ -0,0 +1,320 @@
+'use client';
+
+import {useState} from 'react';
+import {useLocale} from 'next-intl';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {Price} from '@/components/commerce/price';
+import {formatDateTime} from '@/lib/format';
+import {FileText, MessageSquare, Send, ArrowRight, Plus, Minus, ChevronDown, ChevronRight} from 'lucide-react';
+import type {QuoteVersion, QuoteComment} from '@/lib/vendure/queries';
+
+type TimelineItem =
+    | { type: 'version'; version: QuoteVersion; timestamp: number }
+    | { type: 'comment'; comment: QuoteComment; timestamp: number; grouped: boolean };
+
+/** Comments posted within 30s of a version are visually grouped under it (smaller dot, indented) */
+const GROUP_THRESHOLD_MS = 30_000;
+/** Diffs with more than this many changes start collapsed */
+const COLLAPSE_THRESHOLD = 3;
+
+interface QuoteActivityTimelineProps {
+    versions: QuoteVersion[];
+    comments: QuoteComment[];
+    currentVersionNumber?: number;
+    currencyCode: string;
+}
+
+export function QuoteActivityTimeline({versions, comments, currentVersionNumber, currencyCode}: QuoteActivityTimelineProps) {
+    const locale = useLocale();
+    const sorted = [...versions].sort((a, b) => a.versionNumber - b.versionNumber);
+
+    // Build timeline items
+    const items: TimelineItem[] = [];
+    for (const version of sorted) {
+        items.push({type: 'version', version, timestamp: new Date(version.createdAt).getTime()});
+    }
+    for (const comment of comments) {
+        items.push({type: 'comment', comment, timestamp: new Date(comment.createdAt).getTime(), grouped: false});
+    }
+    items.sort((a, b) => a.timestamp - b.timestamp);
+
+    // Mark comments near a version as grouped
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.type === 'comment') {
+            for (let j = i - 1; j >= 0; j--) {
+                if (Math.abs(item.timestamp - items[j].timestamp) > GROUP_THRESHOLD_MS) break;
+                if (items[j].type === 'version') {item.grouped = true; break;}
+            }
+            if (!item.grouped) {
+                for (let j = i + 1; j < items.length; j++) {
+                    if (Math.abs(items[j].timestamp - item.timestamp) > GROUP_THRESHOLD_MS) break;
+                    if (items[j].type === 'version') {item.grouped = true; break;}
+                }
+            }
+        }
+    }
+
+    // Compute diffs between consecutive versions
+    const versionDiffs = new Map<string, VersionDiff>();
+    for (let i = 1; i < sorted.length; i++) {
+        versionDiffs.set(sorted[i].id, computeDiff(sorted[i - 1], sorted[i]));
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Activity</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <div className="relative">
+                    {/* Vertical timeline line */}
+                    <div className="absolute left-[11px] top-3 bottom-3 w-px bg-gradient-to-b from-border via-border/50 to-transparent" />
+                    <div className="space-y-0">
+                        {items.map((item) => {
+                            if (item.type === 'version') {
+                                return (
+                                    <VersionEntry
+                                        key={`v-${item.version.id}`}
+                                        version={item.version}
+                                        isCurrent={item.version.versionNumber === currentVersionNumber}
+                                        diff={versionDiffs.get(item.version.id)}
+                                        locale={locale}
+                                        currencyCode={currencyCode}
+                                    />
+                                );
+                            }
+                            return (
+                                <CommentEntry
+                                    key={`c-${item.comment.id}`}
+                                    comment={item.comment}
+                                    grouped={item.grouped}
+                                    locale={locale}
+                                />
+                            );
+                        })}
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
+
+// ── Version diff logic ──
+
+interface VersionDiff {
+    addedItems: Array<{productName: string; sku: string; quantity: number; unitPrice: number}>;
+    removedItems: Array<{productName: string; sku: string}>;
+    changedItems: Array<{
+        productName: string;
+        sku: string;
+        prevPrice: number;
+        newPrice: number;
+        prevQty: number;
+        newQty: number;
+        priceChanged: boolean;
+        qtyChanged: boolean;
+    }>;
+    totalDelta: number;
+}
+
+function computeDiff(prev: QuoteVersion, curr: QuoteVersion): VersionDiff {
+    const prevBySku = new Map(prev.lineItems.map(li => [li.sku, li]));
+    const currBySku = new Map(curr.lineItems.map(li => [li.sku, li]));
+
+    const addedItems: VersionDiff['addedItems'] = [];
+    const removedItems: VersionDiff['removedItems'] = [];
+    const changedItems: VersionDiff['changedItems'] = [];
+
+    for (const [sku, item] of currBySku) {
+        const prevItem = prevBySku.get(sku);
+        if (!prevItem) {
+            addedItems.push({productName: item.productName, sku, quantity: item.quantity, unitPrice: item.unitPrice});
+        } else {
+            const priceChanged = item.unitPrice !== prevItem.unitPrice;
+            const qtyChanged = item.quantity !== prevItem.quantity;
+            if (priceChanged || qtyChanged) {
+                changedItems.push({
+                    productName: item.productName,
+                    sku,
+                    prevPrice: prevItem.unitPrice,
+                    newPrice: item.unitPrice,
+                    prevQty: prevItem.quantity,
+                    newQty: item.quantity,
+                    priceChanged,
+                    qtyChanged,
+                });
+            }
+        }
+    }
+    for (const [sku, item] of prevBySku) {
+        if (!currBySku.has(sku)) {
+            removedItems.push({productName: item.productName, sku});
+        }
+    }
+
+    return {addedItems, removedItems, changedItems, totalDelta: curr.total - prev.total};
+}
+
+function buildSummary(diff: VersionDiff): string {
+    const parts: string[] = [];
+    if (diff.addedItems.length > 0) parts.push(`+${diff.addedItems.length} item${diff.addedItems.length > 1 ? 's' : ''}`);
+    if (diff.removedItems.length > 0) parts.push(`-${diff.removedItems.length} item${diff.removedItems.length > 1 ? 's' : ''}`);
+    const priceChanges = diff.changedItems.filter(c => c.priceChanged).length;
+    const qtyChanges = diff.changedItems.filter(c => c.qtyChanged).length;
+    if (priceChanges > 0) parts.push(`${priceChanges} price change${priceChanges > 1 ? 's' : ''}`);
+    if (qtyChanges > 0) parts.push(`${qtyChanges} qty change${qtyChanges > 1 ? 's' : ''}`);
+    return parts.join(', ');
+}
+
+// ── Timeline entries ──
+
+function VersionEntry({version, isCurrent, diff, locale, currencyCode}: {version: QuoteVersion; isCurrent: boolean; diff?: VersionDiff; locale: string; currencyCode: string}) {
+    const isFirst = version.versionNumber === 1;
+    const summary = diff ? buildSummary(diff) : null;
+    const totalChanges = diff
+        ? diff.addedItems.length + diff.removedItems.length + diff.changedItems.length
+        : 0;
+    const hasChanges = totalChanges > 0;
+    const [expanded, setExpanded] = useState(totalChanges <= COLLAPSE_THRESHOLD);
+
+    const allDiffRows = diff ? [
+        ...diff.addedItems.map(item => ({type: 'added' as const, ...item})),
+        ...diff.removedItems.map(item => ({type: 'removed' as const, ...item})),
+        ...diff.changedItems.map(item => ({type: 'changed' as const, ...item})),
+    ] : [];
+
+    return (
+        <div className="relative flex gap-3 py-3 group">
+            <div className="relative z-10 flex-shrink-0">
+                <div className={`h-6 w-6 rounded-full flex items-center justify-center shadow-sm ${
+                    isFirst ? 'bg-muted text-muted-foreground' : 'bg-primary text-primary-foreground'
+                }`}>
+                    {isFirst ? <FileText className="h-3 w-3" /> : <Send className="h-3 w-3" />}
+                </div>
+            </div>
+            <div className="flex-1 min-w-0">
+                <div className="flex items-start justify-between">
+                    <div>
+                        <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium">
+                                {isFirst ? 'Quote Requested' : `Revision v${version.versionNumber}`}
+                            </span>
+                            {isCurrent && (
+                                <span className="text-[10px] bg-primary/10 text-primary px-1.5 py-0.5 rounded font-medium">
+                                    Current
+                                </span>
+                            )}
+                        </div>
+                        {summary && (
+                            <p className="text-xs text-muted-foreground mt-0.5">{summary}</p>
+                        )}
+                    </div>
+                    <div className="text-right flex-shrink-0 ml-4">
+                        <p className="text-xs text-muted-foreground">{formatDateTime(version.createdAt, locale)}</p>
+                        <p className="text-sm font-medium">
+                            <Price value={version.total} currencyCode={currencyCode} taxLabel="excl" />
+                        </p>
+                    </div>
+                </div>
+                {hasChanges && (
+                    <div className="mt-2">
+                        {totalChanges > COLLAPSE_THRESHOLD && (
+                            <button
+                                type="button"
+                                onClick={() => setExpanded(!expanded)}
+                                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors mb-1"
+                            >
+                                {expanded
+                                    ? <ChevronDown className="h-3 w-3" />
+                                    : <ChevronRight className="h-3 w-3" />
+                                }
+                                {expanded ? 'Hide' : 'Show'} {totalChanges} changes
+                            </button>
+                        )}
+                        {expanded && (
+                            <div className="text-xs space-y-1 border-l-2 border-muted pl-3">
+                                {allDiffRows.map(row => {
+                                    if (row.type === 'added') {
+                                        return (
+                                            <div key={row.sku} className="flex items-center gap-1.5 text-green-600 dark:text-green-400">
+                                                <Plus className="h-3 w-3" />
+                                                <span>{row.productName}</span>
+                                                <span className="text-muted-foreground">× {row.quantity}</span>
+                                            </div>
+                                        );
+                                    }
+                                    if (row.type === 'removed') {
+                                        return (
+                                            <div key={row.sku} className="flex items-center gap-1.5 text-red-600 dark:text-red-400 line-through">
+                                                <Minus className="h-3 w-3" />
+                                                <span>{row.productName}</span>
+                                            </div>
+                                        );
+                                    }
+                                    return (
+                                        <div key={row.sku} className="flex items-center gap-1.5">
+                                            <ArrowRight className="h-3 w-3 text-muted-foreground" />
+                                            <span>{row.productName}</span>
+                                            {row.priceChanged && (
+                                                <span>
+                                                    <span className="text-muted-foreground line-through">
+                                                        <Price value={row.prevPrice} currencyCode={currencyCode} />
+                                                    </span>
+                                                    {' '}
+                                                    <span className={row.newPrice < row.prevPrice ? 'text-green-600' : 'text-red-600'}>
+                                                        <Price value={row.newPrice} currencyCode={currencyCode} />
+                                                    </span>
+                                                </span>
+                                            )}
+                                            {row.qtyChanged && (
+                                                <span className="text-muted-foreground">
+                                                    qty {row.prevQty} → {row.newQty}
+                                                </span>
+                                            )}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+function CommentEntry({comment, grouped, locale}: {comment: QuoteComment; grouped: boolean; locale: string}) {
+    const authorName = comment.authorCustomer
+        ? `${comment.authorCustomer.firstName} ${comment.authorCustomer.lastName}`
+        : 'Seller';
+
+    return (
+        <div className="relative flex gap-3 py-2 group">
+            {/* Icon */}
+            <div className={`relative z-10 flex-shrink-0 ${grouped ? 'ml-2 mt-0.5' : ''}`}>
+                {grouped ? (
+                    <div className="h-2 w-2 rounded-full border bg-background" />
+                ) : (
+                    <div className="h-6 w-6 rounded-full flex items-center justify-center shadow-sm bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+                        <MessageSquare className="h-3 w-3" />
+                    </div>
+                )}
+            </div>
+            {/* Content */}
+            <div className="flex-1 min-w-0">
+                <div className="flex items-start justify-between">
+                    <div>
+                        <span className={`text-xs font-medium ${grouped ? 'text-muted-foreground' : ''}`}>
+                            {authorName}
+                        </span>
+                        <p className="text-sm mt-0.5">{comment.text}</p>
+                    </div>
+                    <span className="text-xs text-muted-foreground flex-shrink-0 ml-4 whitespace-nowrap">
+                        {formatDateTime(comment.createdAt, locale)}
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+}