@object-ui/plugin-detail 3.0.2 → 3.1.0

package/src/RecordComments.tsx

@@ -0,0 +1,215 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Button, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
+import { MessageSquare, Send, Pin, Search, X } from 'lucide-react';
+import type { CommentEntry } from '@object-ui/types';
+
+export interface RecordCommentsProps {
+  comments: CommentEntry[];
+  onAddComment?: (text: string) => void | Promise<void>;
+  /** Callback to toggle pin/star on a comment */
+  onTogglePin?: (commentId: string | number) => void;
+  /** Enable search input for filtering comments */
+  searchable?: boolean;
+  className?: string;
+}
+
+/**
+ * Format a timestamp string into a human-readable relative time or date string.
+ */
+function formatTimestamp(timestamp: string): string {
+  try {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+  } catch {
+    return timestamp;
+  }
+}
+
+export const RecordComments: React.FC<RecordCommentsProps> = ({
+  comments,
+  onAddComment,
+  onTogglePin,
+  searchable = false,
+  className,
+}) => {
+  const [newComment, setNewComment] = React.useState('');
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const handleSubmit = React.useCallback(async () => {
+    const text = newComment.trim();
+    if (!text || !onAddComment) return;
+
+    setIsSubmitting(true);
+    try {
+      await onAddComment(text);
+      setNewComment('');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [newComment, onAddComment]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit],
+  );
+
+  /** Sort pinned comments first, then by date */
+  const sortedComments = React.useMemo(() => {
+    const filtered = searchQuery.trim()
+      ? comments.filter(c => {
+          const q = searchQuery.trim().toLowerCase();
+          return c.text.toLowerCase().includes(q) || c.author.toLowerCase().includes(q);
+        })
+      : comments;
+
+    return [...filtered].sort((a, b) => {
+      if (a.pinned && !b.pinned) return -1;
+      if (!a.pinned && b.pinned) return 1;
+      return 0;
+    });
+  }, [comments, searchQuery]);
+
+  return (
+    <Card className={cn('', className)}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <MessageSquare className="h-4 w-4" />
+          Comments
+          <span className="text-sm font-normal text-muted-foreground">
+            ({comments.length})
+          </span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Search Input */}
+        {searchable && (
+          <div className="flex items-center gap-2">
+            <div className="relative flex-1">
+              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+              <input
+                className="w-full rounded-md border border-input bg-background pl-8 pr-8 py-1.5 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                placeholder="Search comments…"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                aria-label="Search comments"
+              />
+              {searchQuery && (
+                <button
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                  onClick={() => setSearchQuery('')}
+                  aria-label="Clear search"
+                  type="button"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Comment Input */}
+        {onAddComment && (
+          <div className="flex gap-2">
+            <textarea
+              className="flex-1 min-h-[60px] rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
+              placeholder="Add a comment… (Ctrl+Enter to submit)"
+              value={newComment}
+              onChange={(e) => setNewComment(e.target.value)}
+              onKeyDown={handleKeyDown}
+              disabled={isSubmitting}
+            />
+            <Button
+              size="icon"
+              variant="default"
+              onClick={handleSubmit}
+              disabled={!newComment.trim() || isSubmitting}
+              className="shrink-0 self-end"
+            >
+              <Send className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
+
+        {/* Comment List */}
+        {sortedComments.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-4">
+            {searchQuery.trim() ? 'No matching comments' : 'No comments yet'}
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {sortedComments.map((comment) => (
+              <div key={comment.id} className={cn('flex gap-3', comment.pinned && 'bg-muted/40 rounded-md p-2 -mx-2')}>
+                {/* Avatar */}
+                <div className="shrink-0">
+                  {comment.avatarUrl ? (
+                    <img
+                      src={comment.avatarUrl}
+                      alt={comment.author}
+                      className="h-8 w-8 rounded-full object-cover"
+                    />
+                  ) : (
+                    <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground">
+                      {comment.author.charAt(0).toUpperCase()}
+                    </div>
+                  )}
+                </div>
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-0.5">
+                    <span className="text-sm font-medium truncate">{comment.author}</span>
+                    <span className="text-xs text-muted-foreground">
+                      {formatTimestamp(comment.createdAt)}
+                    </span>
+                    {comment.pinned && (
+                      <span className="text-xs text-amber-600 flex items-center gap-0.5">
+                        <Pin className="h-3 w-3" />
+                        Pinned
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-sm whitespace-pre-wrap break-words">{comment.text}</p>
+                  {/* Pin action */}
+                  {onTogglePin && (
+                    <button
+                      type="button"
+                      className="mt-1 text-xs text-muted-foreground hover:text-foreground flex items-center gap-1"
+                      onClick={() => onTogglePin(comment.id)}
+                      aria-label={comment.pinned ? 'Unpin comment' : 'Pin comment'}
+                    >
+                      <Pin className="h-3 w-3" />
+                      {comment.pinned ? 'Unpin' : 'Pin'}
+                    </button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/src/RecordNavigationEnhanced.tsx

@@ -0,0 +1,211 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Button, Input } from '@object-ui/components';
+import {
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronLeft,
+  ChevronRight,
+  Search,
+} from 'lucide-react';
+
+export interface RecordNavigationEnhancedProps {
+  currentIndex: number;
+  totalRecords: number;
+  recordIds: string[];
+  onNavigate: (recordId: string) => void;
+  onSearch?: (query: string) => void;
+  className?: string;
+}
+
+export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> = ({
+  currentIndex,
+  totalRecords,
+  recordIds,
+  onNavigate,
+  onSearch,
+  className,
+}) => {
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [isSearchOpen, setIsSearchOpen] = React.useState(false);
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+  const canGoFirst = currentIndex > 0;
+  const canGoPrev = currentIndex > 0;
+  const canGoNext = currentIndex < totalRecords - 1;
+  const canGoLast = currentIndex < totalRecords - 1;
+
+  const handleFirst = React.useCallback(() => {
+    if (canGoFirst) onNavigate(recordIds[0]);
+  }, [canGoFirst, onNavigate, recordIds]);
+
+  const handlePrev = React.useCallback(() => {
+    if (canGoPrev) onNavigate(recordIds[currentIndex - 1]);
+  }, [canGoPrev, onNavigate, recordIds, currentIndex]);
+
+  const handleNext = React.useCallback(() => {
+    if (canGoNext) onNavigate(recordIds[currentIndex + 1]);
+  }, [canGoNext, onNavigate, recordIds, currentIndex]);
+
+  const handleLast = React.useCallback(() => {
+    if (canGoLast) onNavigate(recordIds[recordIds.length - 1]);
+  }, [canGoLast, onNavigate, recordIds]);
+
+  const handleSearchChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      setSearchQuery(value);
+      onSearch?.(value);
+    },
+    [onSearch],
+  );
+
+  const handleToggleSearch = React.useCallback(() => {
+    setIsSearchOpen((prev) => {
+      if (!prev) {
+        requestAnimationFrame(() => searchInputRef.current?.focus());
+      } else {
+        setSearchQuery('');
+        onSearch?.('');
+      }
+      return !prev;
+    });
+  }, [onSearch]);
+
+  // Keyboard shortcuts
+  React.useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement)?.tagName;
+      const isEditable =
+        tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement)?.isContentEditable;
+
+      // Allow search input to capture normal keys
+      if (isEditable && e.target !== searchInputRef.current) return;
+      // In search input, only handle navigation keys
+      if (e.target === searchInputRef.current) {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          setIsSearchOpen(false);
+          setSearchQuery('');
+          onSearch?.('');
+          (e.target as HTMLElement).blur();
+        }
+        return;
+      }
+
+      switch (e.key) {
+        case 'Home':
+          e.preventDefault();
+          if (canGoFirst) onNavigate(recordIds[0]);
+          break;
+        case 'End':
+          e.preventDefault();
+          if (canGoLast) onNavigate(recordIds[recordIds.length - 1]);
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          if (canGoPrev) onNavigate(recordIds[currentIndex - 1]);
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          if (canGoNext) onNavigate(recordIds[currentIndex + 1]);
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [currentIndex, recordIds, canGoFirst, canGoPrev, canGoNext, canGoLast, onNavigate, onSearch]);
+
+  return (
+    <div className={cn('flex items-center gap-1.5', className)}>
+      {/* First */}
+      <Button
+        variant="outline"
+        size="icon"
+        className="h-8 w-8"
+        disabled={!canGoFirst}
+        onClick={handleFirst}
+        title="First record (Home)"
+      >
+        <ChevronsLeft className="h-4 w-4" />
+      </Button>
+
+      {/* Prev */}
+      <Button
+        variant="outline"
+        size="icon"
+        className="h-8 w-8"
+        disabled={!canGoPrev}
+        onClick={handlePrev}
+        title="Previous record (←)"
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+
+      {/* Position indicator */}
+      <span className="text-xs text-muted-foreground whitespace-nowrap px-1.5 tabular-nums">
+        {totalRecords > 0 ? `${currentIndex + 1} of ${totalRecords}` : 'No records'}
+      </span>
+
+      {/* Next */}
+      <Button
+        variant="outline"
+        size="icon"
+        className="h-8 w-8"
+        disabled={!canGoNext}
+        onClick={handleNext}
+        title="Next record (→)"
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+
+      {/* Last */}
+      <Button
+        variant="outline"
+        size="icon"
+        className="h-8 w-8"
+        disabled={!canGoLast}
+        onClick={handleLast}
+        title="Last record (End)"
+      >
+        <ChevronsRight className="h-4 w-4" />
+      </Button>
+
+      {/* Search toggle */}
+      {onSearch && (
+        <>
+          <Button
+            variant={isSearchOpen ? 'secondary' : 'ghost'}
+            size="icon"
+            className="h-8 w-8"
+            onClick={handleToggleSearch}
+            title="Search while navigating"
+          >
+            <Search className="h-4 w-4" />
+          </Button>
+
+          {isSearchOpen && (
+            <div className="relative">
+              <Input
+                ref={searchInputRef}
+                type="text"
+                placeholder="Search records…"
+                value={searchQuery}
+                onChange={handleSearchChange}
+                className="h-8 w-48 text-sm"
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};

package/src/RelatedList.tsx

@@ -7,9 +7,11 @@
  */
 
 import * as React from 'react';
-import { Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
+import { Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
 import { SchemaRenderer } from '@object-ui/react';
+import { Plus, ExternalLink } from 'lucide-react';
 import type { DataSource } from '@object-ui/types';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface RelatedListProps {
   title: string;
@@ -20,6 +22,10 @@ export interface RelatedListProps {
   columns?: any[];
   className?: string;
   dataSource?: DataSource;
+  /** Callback when "New" button is clicked */
+  onNew?: () => void;
+  /** Callback when "View All" button is clicked */
+  onViewAll?: () => void;
 }
 
 export const RelatedList: React.FC<RelatedListProps> = ({
@@ -31,14 +37,17 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   columns,
   className,
   dataSource,
+  onNew,
+  onViewAll,
 }) => {
   const [relatedData, setRelatedData] = React.useState(data);
   const [loading, setLoading] = React.useState(false);
+  const { t } = useDetailTranslation();
 
   React.useEffect(() => {
     if (api && !data.length) {
       setLoading(true);
-      if (dataSource) {
+      if (dataSource && typeof dataSource.find === 'function') {
         dataSource.find(api).then((result) => {
           const items = Array.isArray(result)
             ? result
@@ -90,24 +99,44 @@ export const RelatedList: React.FC<RelatedListProps> = ({
     }
   }, [type, relatedData, columns, schema]);
 
+  const recordCountText = relatedData.length === 1
+    ? t('detail.relatedRecordOne', { count: relatedData.length })
+    : t('detail.relatedRecords', { count: relatedData.length });
+
   return (
     <Card className={className}>
       <CardHeader>
         <CardTitle className="flex items-center justify-between">
-          <span>{title}</span>
-          <span className="text-sm font-normal text-muted-foreground">
-            {relatedData.length} record{relatedData.length !== 1 ? 's' : ''}
-          </span>
+          <div className="flex items-center gap-2">
+            <span>{title}</span>
+            <span className="text-sm font-normal text-muted-foreground">
+              {recordCountText}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            {onNew && (
+              <Button variant="ghost" size="sm" onClick={onNew} className="gap-1 h-7 text-xs">
+                <Plus className="h-3.5 w-3.5" />
+                {t('detail.new')}
+              </Button>
+            )}
+            {onViewAll && (
+              <Button variant="ghost" size="sm" onClick={onViewAll} className="gap-1 h-7 text-xs">
+                {t('detail.viewAll')}
+                <ExternalLink className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
         </CardTitle>
       </CardHeader>
       <CardContent>
         {loading ? (
           <div className="flex items-center justify-center py-8 text-muted-foreground">
-            Loading...
+            {t('detail.loading')}
           </div>
         ) : relatedData.length === 0 ? (
           <div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
-            No related records found
+            {t('detail.noRelatedRecords')}
           </div>
         ) : (
           <SchemaRenderer schema={viewSchema} />