Merge branch 'main' into feat/public-completed-document-access

apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx

@@ -9,6 +9,7 @@ type EnvelopeItemSelectorProps = {
   secondaryText: React.ReactNode;
   isSelected: boolean;
   buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
+  actionSlot?: React.ReactNode;
 };
 
 export const EnvelopeItemSelector = ({
@@ -17,11 +18,12 @@ export const EnvelopeItemSelector = ({
   secondaryText,
   isSelected,
   buttonProps,
+  actionSlot,
 }: EnvelopeItemSelectorProps) => {
   return (
     <button
       title={typeof primaryText === 'string' ? primaryText : undefined}
-      className={`flex h-fit max-w-72 flex-shrink-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
+      className={`group flex h-fit max-w-72 flex-shrink-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
         isSelected
           ? 'border-green-200 bg-green-50 text-green-900 dark:border-green-400/30 dark:bg-green-400/10 dark:text-green-400'
           : 'border-border bg-muted/50 hover:bg-muted/70'
@@ -39,11 +41,13 @@ export const EnvelopeItemSelector = ({
         <div className="truncate text-sm font-medium">{primaryText}</div>
         <div className="text-xs text-gray-500">{secondaryText}</div>
       </div>
-      <div
-        className={cn('h-2 w-2 flex-shrink-0 rounded-full', {
-          'bg-green-500': isSelected,
-        })}
-      ></div>
+      {actionSlot ?? (
+        <div
+          className={cn('h-2 w-2 flex-shrink-0 rounded-full', {
+            'bg-green-500': isSelected,
+          })}
+        />
+      )}
     </button>
   );
 };
@@ -52,12 +56,14 @@ type EnvelopeRendererFileSelectorProps = {
   fields: { envelopeItemId: string }[];
   className?: string;
   secondaryOverride?: React.ReactNode;
+  renderItemAction?: (item: { id: string; title: string }) => React.ReactNode;
 };
 
 export const EnvelopeRendererFileSelector = ({
   fields,
   className,
   secondaryOverride,
+  renderItemAction,
 }: EnvelopeRendererFileSelectorProps) => {
   const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
 
@@ -66,7 +72,12 @@ export const EnvelopeRendererFileSelector = ({
   }
 
   return (
-    <div className={cn('flex h-fit flex-shrink-0 space-x-2 overflow-x-auto p-4', className)}>
+    <div
+      className={cn(
+        'scrollbar-hidden flex h-fit flex-shrink-0 space-x-2 overflow-x-auto p-4',
+        className,
+      )}
+    >
       {envelopeItems.map((doc, i) => (
         <EnvelopeItemSelector
           key={doc.id}
@@ -85,6 +96,7 @@ export const EnvelopeRendererFileSelector = ({
           buttonProps={{
             onClick: () => setCurrentEnvelopeItem(doc.id),
           }}
+          actionSlot={renderItemAction?.(doc)}
         />
       ))}
     </div>