chordia-ui 3.2.6 → 3.2.8

package/src/components/navigation/Sidebar.jsx

@@ -116,23 +116,22 @@ export default function Sidebar({
         flexShrink: 0,
       }}
     >
-      {/* Header slot */}
-      {header && !collapsed && (
-        <div style={{ padding: "16px 16px 8px", flexShrink: 0, width: "100%" }}>
-          {header}
-        </div>
-      )}
-
-      {/* Collapse toggle */}
+      {/* Header + Collapse toggle in one row */}
       <div
         style={{
           display: "flex",
-          justifyContent: collapsed ? "center" : "flex-end",
-          padding: collapsed ? "12px 0" : "8px 0 0",
+          alignItems: "center",
+          justifyContent: collapsed ? "center" : "space-between",
+          padding: collapsed ? "12px 0" : "12px 0 0",
           flexShrink: 0,
           width: "100%",
         }}
       >
+        {header && !collapsed && (
+          <div style={{ flexShrink: 0 }}>
+            {header}
+          </div>
+        )}
         <button
           onClick={toggleCollapse}
           title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
@@ -148,6 +147,7 @@ export default function Sidebar({
             color: "rgba(255, 255, 255, 0.5)",
             cursor: "pointer",
             transition: "background 0.15s ease, color 0.15s ease",
+            flexShrink: 0,
           }}
           onMouseEnter={(e) => {
             e.currentTarget.style.background = "rgba(255, 255, 255, 0.08)";
@@ -250,9 +250,12 @@ function SidebarItem({ item, active, onNavigate, collapsed }) {
         borderBottom: "none",
         borderLeft: "none",
         background: active ? "var(--Background-MonoPressed, #323232)" : "transparent",
-        color: active ? "#00A66E" : "var(--Content-TertiaryInverse, #B2AEA8)",
-        fontWeight: active ? 550 : 400,
-        fontSize: "var(--text-sm)",
+        color: active ? "var(--Brand-400, #33B88B)" : "var(--Content-TertiaryInverse, #B2AEA8)",
+        fontWeight: 500,
+        fontSize: "12px",
+        fontStyle: "normal",
+        lineHeight: "120%",
+        textTransform: "uppercase",
         fontFamily: "var(--font-sans)",
         cursor: "pointer",
         textAlign: "left",
@@ -262,7 +265,7 @@ function SidebarItem({ item, active, onNavigate, collapsed }) {
       onMouseEnter={(e) => {
         if (!active) {
           e.currentTarget.style.background = "var(--Background-MonoPressed, #323232)";
-          e.currentTarget.style.color = "#00A66E";
+          e.currentTarget.style.color = "var(--Brand-400, #33B88B)";
         }
       }}
       onMouseLeave={(e) => {
@@ -317,7 +320,7 @@ function SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapse
           borderRadius: "4px",
           border: "none",
           background: hasActiveChild ? "var(--Background-MonoPressed, #323232)" : "transparent",
-          color: hasActiveChild ? "#00A66E" : "var(--Content-TertiaryInverse, #B2AEA8)",
+          color: hasActiveChild ? "var(--Brand-400, #33B88B)" : "var(--Content-TertiaryInverse, #B2AEA8)",
           cursor: "pointer",
           marginBottom: 2,
           transition: "background 0.15s ease",
@@ -325,7 +328,7 @@ function SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapse
         onMouseEnter={(e) => {
           if (!hasActiveChild) {
             e.currentTarget.style.background = "var(--Background-MonoPressed, #323232)";
-            e.currentTarget.style.color = "#00A66E";
+            e.currentTarget.style.color = "var(--Brand-400, #33B88B)";
           }
         }}
         onMouseLeave={(e) => {
@@ -357,9 +360,12 @@ function SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapse
           borderRadius: "4px",
           border: "none",
           background: "transparent",
-          color: hasActiveChild ? "#00A66E" : "var(--Content-TertiaryInverse, #B2AEA8)",
-          fontWeight: hasActiveChild ? 550 : 400,
-          fontSize: "var(--text-sm)",
+          color: hasActiveChild ? "var(--Brand-400, #33B88B)" : "var(--Content-TertiaryInverse, #B2AEA8)",
+          fontWeight: 700,
+          fontSize: "12px",
+          fontStyle: "normal",
+          lineHeight: "120%",
+          textTransform: "uppercase",
           fontFamily: "var(--font-sans)",
           cursor: "pointer",
           textAlign: "left",
@@ -367,12 +373,12 @@ function SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapse
         }}
         onMouseEnter={(e) => {
           e.currentTarget.style.background = "var(--Background-MonoPressed, #323232)";
-          e.currentTarget.style.color = "#00A66E";
+          e.currentTarget.style.color = "var(--Brand-400, #33B88B)";
         }}
         onMouseLeave={(e) => {
           e.currentTarget.style.background = "transparent";
           if (!hasActiveChild) e.currentTarget.style.color = "var(--Content-TertiaryInverse, #B2AEA8)";
-          else e.currentTarget.style.color = "#00A66E";
+          else e.currentTarget.style.color = "var(--Brand-400, #33B88B)";
         }}
       >
         <Icon

package/src/components/onboarding/UploadInteraction.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef } from 'react';
-import { CloudUpload } from 'lucide-react';
+import { CloudUpload, X } from 'lucide-react';
 
 const FF = 'var(--font-sans)';
 
@@ -107,9 +107,17 @@ const dropzoneHintStyle = {
 
 // ─── Component ───
 
-const UploadInteraction = ({ onFileSelect }) => {
+const UploadInteraction = ({
+  onFileSelect,
+  showUploadQueuedMessage = false,
+  uploadSummary = { successCount: 0, failedCount: 0, primaryFailureReason: '' },
+}) => {
   const [dragOver, setDragOver] = useState(false);
+  const [isStatusDismissed, setIsStatusDismissed] = useState(false);
   const fileInputRef = useRef(null);
+  const successCount = uploadSummary?.successCount || 0;
+  const failedCount = uploadSummary?.failedCount || 0;
+  const primaryFailureReason = uploadSummary?.primaryFailureReason || '';
 
   const handleDragOver = (e) => {
     e.preventDefault();
@@ -123,6 +131,7 @@ const UploadInteraction = ({ onFileSelect }) => {
   const handleDrop = (e) => {
     e.preventDefault();
     setDragOver(false);
+    setIsStatusDismissed(false);
     const files = e.dataTransfer?.files;
     if (files?.length) {
       onFileSelect?.(files);
@@ -136,6 +145,7 @@ const UploadInteraction = ({ onFileSelect }) => {
   const handleFileChange = (e) => {
     const files = e.target.files;
     if (files?.length) {
+      setIsStatusDismissed(false);
       onFileSelect?.(files);
     }
     e.target.value = '';
@@ -179,6 +189,49 @@ const UploadInteraction = ({ onFileSelect }) => {
         </button>
         <p style={dropzoneHintStyle}>Supports: MP3, WAV, WMA, MP4, and WEBM</p>
       </div>
+
+      {showUploadQueuedMessage && !isStatusDismissed && (
+        <div 
+        style={{
+          marginTop: 16,
+          borderRadius: 10,
+          border: '1px solid var(--border)',
+          background: 'var(--grey-light)',
+          padding: 'var(--spacing-2) var(--spacing-3)',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+            <p style={{ fontSize: 15, fontWeight: 600, fontFamily: FF, color: 'var(--grey-strong)' }}>Upload status</p>
+            <button
+              type="button"
+              style={{ 
+                display: 'flex',
+                alignItems: 'center', justifyContent: 'center', width: 20, height: 20, borderRadius: 10, background: 'var(--grey-light)', cursor: 'pointer',
+                border: 'none',
+                outline: 'none',
+                padding: 0,
+                margin: 0,
+              }}
+              onClick={() => setIsStatusDismissed(true)}
+            >
+              <X size={14} color="var(--grey-strong)" />
+            </button>
+          </div>
+          <p style={{ fontSize: 13, fontWeight: 400, fontFamily: FF, color: 'var(--grey-strong)', marginTop: 8 }}>
+            {failedCount > 0 && successCount > 0
+              ? `${successCount} file${successCount > 1 ? 's are' : ' is'} successfully uploaded and ${failedCount} file${failedCount > 1 ? 's are' : ' is'} failed.`
+              : failedCount > 0
+                ? `${failedCount} file${failedCount > 1 ? 's' : ''} failed to upload.`
+                : successCount > 1
+                  ? `${successCount} files are queued for evaluation.`
+                  : 'Your file is queued for evaluation.'}
+          </p>
+          <p className="mt-1 text-xs text-gray-600">
+            {failedCount > 0
+              ? `Failed because ${primaryFailureReason || 'of a validation issue'}.`
+              : 'You can continue using the app while upload runs in the background. Results will appear in the project history once ready.'}
+          </p>
+        </div>
+      )}
     </div>
   );
 };

package/src/tokens/colors.css

@@ -194,6 +194,7 @@
     --grey-absent: #D9D9D9;
     --grey-muted: #BDBDBD;
     --grey-strong: var(--color-text);
+    --grey-light: #e9e8e8a1;
 
     /* ============================================
        FOCUS / WARM SURFACES