updates

2026-02-23 11:57:32 +03:00
parent 4522edeea8
commit 8436c49142
50 changed files with 6447 additions and 55 deletions
@@ -0,0 +1,96 @@
+import { Check, Clock, User } from 'lucide-react'
+
+export default function ArtefactVersionTimeline({ versions, activeVersionId, onSelectVersion, artefactType }) {
+  if (!versions || versions.length === 0) {
+    return (
+      <div className="text-center py-4 text-sm text-text-tertiary">
+        No versions found
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      {versions.map((version, idx) => {
+        const isActive = version.Id === activeVersionId
+        const isLatest = idx === versions.length - 1
+
+        return (
+          <button
+            key={version.Id}
+            onClick={() => onSelectVersion(version)}
+            className={`w-full text-left p-3 rounded-lg border transition-colors ${
+              isActive
+                ? 'border-brand-primary bg-brand-primary/5'
+                : 'border-border hover:border-brand-primary/30 bg-surface hover:shadow-sm'
+            }`}
+          >
+            <div className="flex items-start gap-3">
+              {/* Version indicator */}
+              <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold ${
+                isActive 
+                  ? 'bg-brand-primary text-white' 
+                  : 'bg-surface-secondary text-text-secondary'
+              }`}>
+                v{version.version_number}
+              </div>
+
+              {/* Version details */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className={`text-sm font-medium ${isActive ? 'text-brand-primary' : 'text-text-primary'}`}>
+                    Version {version.version_number}
+                  </span>
+                  {isLatest && (
+                    <span className="text-xs px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded-full font-medium">
+                      Latest
+                    </span>
+                  )}
+                </div>
+
+                {version.notes && (
+                  <p className="text-xs text-text-secondary line-clamp-2 mb-2">
+                    {version.notes}
+                  </p>
+                )}
+
+                <div className="flex items-center gap-3 text-xs text-text-tertiary">
+                  {version.creator_name && (
+                    <div className="flex items-center gap-1">
+                      <User className="w-3 h-3" />
+                      <span>{version.creator_name}</span>
+                    </div>
+                  )}
+                  {version.created_at && (
+                    <div className="flex items-center gap-1">
+                      <Clock className="w-3 h-3" />
+                      <span>{new Date(version.created_at).toLocaleDateString()}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Active indicator */}
+              {isActive && (
+                <div className="flex-shrink-0">
+                  <Check className="w-5 h-5 text-brand-primary" />
+                </div>
+              )}
+            </div>
+
+            {/* Thumbnail for image artefacts */}
+            {artefactType === 'design' && version.thumbnail && (
+              <div className="mt-2 ml-11">
+                <img
+                  src={version.thumbnail}
+                  alt={`Version ${version.version_number}`}
+                  className="w-full h-20 object-cover rounded border border-border"
+                />
+              </div>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}