cleanup, best practices

Author: waleedlatif1

apps/sim/app/chat/components/message/components/markdown-renderer.tsx

@@ -115,7 +115,7 @@ const COMPONENTS = {
   ),
 
   blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
-    <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 font-sans text-[var(--text-primary)] italic [&>p]:my-2 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0'>
+    <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 font-sans text-[var(--text-primary)] italic [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&>p]:my-2'>
       {children}
     </blockquote>
   ),

apps/sim/app/workspace/[workspaceId]/files/components/action-bar/action-bar.tsx

@@ -3,13 +3,15 @@
 import { domAnimation, LazyMotion, m } from 'framer-motion'
 import { Button, Download, Tooltip, Trash2 } from '@/components/emcn'
 import { Folder } from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
 
 interface FilesActionBarProps {
   selectedCount: number
   onDownload?: () => void
   onMove?: () => void
   onDelete?: () => void
   isLoading?: boolean
+  className?: string
 }
 
 export function FilesActionBar({
@@ -18,6 +20,7 @@ export function FilesActionBar({
   onMove,
   onDelete,
   isLoading = false,
+  className,
 }: FilesActionBarProps) {
   if (selectedCount === 0) return null
 
@@ -28,7 +31,7 @@ export function FilesActionBar({
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: 10 }}
         transition={{ duration: 0.2 }}
-        className='-translate-x-1/2 fixed bottom-6 left-1/2 z-50 transform'
+        className={cn('-translate-x-1/2 fixed bottom-6 left-1/2 z-50 transform', className)}
       >
         <div className='flex items-center gap-2 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5'>
           <span className='px-1 text-[var(--text-secondary)] text-small'>

apps/sim/app/workspace/[workspaceId]/files/components/delete-confirm-modal/delete-confirm-modal.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { memo } from 'react'
+import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@/components/emcn'
+
+interface DeleteConfirmModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  fileName?: string
+  fileCount: number
+  folderCount: number
+  onDelete: () => void
+  isPending: boolean
+}
+
+export const DeleteConfirmModal = memo(function DeleteConfirmModal({
+  open,
+  onOpenChange,
+  fileName,
+  fileCount,
+  folderCount,
+  onDelete,
+  isPending,
+}: DeleteConfirmModalProps) {
+  const totalCount = fileCount + folderCount
+  const hasFolders = folderCount > 0
+  const title = totalCount > 1 ? 'Delete Items' : hasFolders ? 'Delete Folder' : 'Delete File'
+  const consequence = hasFolders
+    ? totalCount > 1
+      ? 'This will also delete files and folders inside any selected folders.'
+      : 'This will also delete files and folders inside it.'
+    : 'You can restore it from Recently Deleted in Settings.'
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent size='sm'>
+        <ModalHeader>{title}</ModalHeader>
+        <ModalBody>
+          <p className='text-[var(--text-secondary)]'>
+            Are you sure you want to delete{' '}
+            <span className='font-medium text-[var(--text-primary)]'>{fileName}</span>?{' '}
+            {consequence}
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant='default' onClick={() => onOpenChange(false)} disabled={isPending}>
+            Cancel
+          </Button>
+          <Button variant='destructive' onClick={onDelete} disabled={isPending}>
+            {isPending ? 'Deleting...' : 'Delete'}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+})

apps/sim/app/workspace/[workspaceId]/files/components/delete-confirm-modal/index.ts

@@ -0,0 +1 @@
+export { DeleteConfirmModal } from './delete-confirm-modal'

apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/file-row-context-menu.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { memo } from 'react'
+import {
+  Download,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Eye,
+  Pencil,
+  Trash2,
+} from '@/components/emcn'
+
+interface FileRowContextMenuProps {
+  isOpen: boolean
+  position: { x: number; y: number }
+  onClose: () => void
+  onOpen: () => void
+  onDownload?: () => void
+  onRename: () => void
+  onDelete: () => void
+  canEdit: boolean
+}
+
+export const FileRowContextMenu = memo(function FileRowContextMenu({
+  isOpen,
+  position,
+  onClose,
+  onOpen,
+  onDownload,
+  onRename,
+  onDelete,
+  canEdit,
+}: FileRowContextMenuProps) {
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={(open) => !open && onClose()} modal={false}>
+      <DropdownMenuTrigger asChild>
+        <div
+          style={{
+            position: 'fixed',
+            left: `${position.x}px`,
+            top: `${position.y}px`,
+            width: '1px',
+            height: '1px',
+            pointerEvents: 'none',
+          }}
+          tabIndex={-1}
+          aria-hidden
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align='start'
+        side='bottom'
+        sideOffset={4}
+        onCloseAutoFocus={(e) => e.preventDefault()}
+      >
+        <DropdownMenuItem onSelect={onOpen}>
+          <Eye />
+          Open
+        </DropdownMenuItem>
+        {onDownload && (
+          <DropdownMenuItem onSelect={onDownload}>
+            <Download />
+            Download
+          </DropdownMenuItem>
+        )}
+        {canEdit && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onSelect={onRename}>
+              <Pencil />
+              Rename
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={onDelete}>
+              <Trash2 />
+              Delete
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/index.ts

@@ -0,0 +1 @@
+export { FileRowContextMenu } from './file-row-context-menu'

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx

@@ -263,7 +263,7 @@ function CalloutBlock({ type, children }: { type: string; children?: React.React
   const config = CALLOUT_CONFIG[type]
   if (!config) {
     return (
-      <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p]:my-2 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0'>
+      <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&>p]:my-2'>
         {children}
       </blockquote>
     )
@@ -605,7 +605,7 @@ const STATIC_MARKDOWN_COMPONENTS = {
       return <CalloutBlock type={calloutType}>{children}</CalloutBlock>
     }
     return (
-      <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p]:my-2 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0'>
+      <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&>p]:my-2'>
         {children}
       </blockquote>
     )