Skip to content

fix(ui): fix the UI for folder deletion, huggingface icon, workflow block icon, standardized alert dialog #498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 3 commits into from
Jun 15, 2025
Merged

fix(ui): fix the UI for folder deletion, huggingface icon, workflow block icon, standardized alert dialog #498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8063d8c
fixed folder delete UI
waleedlatif1 Jun 15, 2025
d048baf
fixed UI for workflow block, huggingface, & added alert dialog for de…
waleedlatif1 Jun 15, 2025
62b4692
consistently style all alert dialogs
waleedlatif1 Jun 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion apps/sim/app/w/[id]/components/notifications/notifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,10 @@ function DeleteApiConfirmation({
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={onConfirm} className='bg-red-600 hover:bg-red-700'>
<AlertDialogAction
onClick={onConfirm}
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
>
Delete
</AlertDialogAction>
</AlertDialogFooter>
Expand Down
5 changes: 4 additions & 1 deletion ...nts/workflow-block/components/sub-block/components/schedule/components/schedule-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -648,7 +648,10 @@ export function ScheduleModal({
<AlertDialogCancel onClick={() => setShowDeleteConfirm(false)}>
Cancel
</AlertDialogCancel>
<AlertDialogAction onClick={handleDelete} className='bg-red-600 hover:bg-red-700'>
<AlertDialogAction
onClick={handleDelete}
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
>
{isDeleting ? 'Deleting...' : 'Delete Schedule'}
</AlertDialogAction>
</AlertDialogFooter>
Expand Down
10 changes: 8 additions & 2 deletions ...nts/workflow-block/components/sub-block/components/webhook/components/ui/confirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,10 @@ export function DeleteConfirmDialog({
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={onConfirm} className='bg-red-600 hover:bg-red-700'>
<AlertDialogAction
onClick={onConfirm}
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
>
{isDeleting ? 'Deleting...' : 'Delete'}
</AlertDialogAction>
</AlertDialogFooter>
Expand Down Expand Up @@ -66,7 +69,10 @@ export function UnsavedChangesDialog({
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel onClick={onCancel}>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={onConfirm} className='bg-red-600 hover:bg-red-700'>
<AlertDialogAction
onClick={onConfirm}
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
>
Discard changes
</AlertDialogAction>
</AlertDialogFooter>
Expand Down
192 changes: 129 additions & 63 deletions apps/sim/app/w/components/sidebar/components/folder-tree/components/folder-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
'use client'

import { useCallback, useEffect, useRef } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import clsx from 'clsx'
import { ChevronDown, ChevronRight, Folder, FolderOpen } from 'lucide-react'
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { type FolderTreeNode, useFolderStore } from '@/stores/folders/store'
import { FolderContextMenu } from '../../folder-context-menu/folder-context-menu'
Expand All @@ -27,6 +37,8 @@ export function FolderItem({
onDrop,
}: FolderItemProps) {
const { expandedFolders, toggleExpanded, updateFolderAPI, deleteFolder } = useFolderStore()
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
const [isDeleting, setIsDeleting] = useState(false)

const isExpanded = expandedFolders.has(folder.id)
const updateTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
Expand Down Expand Up @@ -69,83 +81,137 @@ export function FolderItem({
}

const handleDelete = async (folderId: string) => {
if (
confirm(
`Are you sure you want to delete "${folder.name}"? Child folders and workflows will be moved to the parent folder.`
)
) {
try {
await deleteFolder(folderId)
} catch (error) {
console.error('Failed to delete folder:', error)
}
setShowDeleteDialog(true)
}

const confirmDelete = async () => {
setIsDeleting(true)
try {
await deleteFolder(folder.id)
setShowDeleteDialog(false)
} catch (error) {
console.error('Failed to delete folder:', error)
} finally {
setIsDeleting(false)
}
}

if (isCollapsed) {
return (
<Tooltip>
<TooltipTrigger asChild>
<div
className='group mx-auto flex h-8 w-8 cursor-pointer items-center justify-center'
onDragOver={onDragOver}
onDragLeave={onDragLeave}
onDrop={onDrop}
onClick={handleToggleExpanded}
>
<>
<Tooltip>
<TooltipTrigger asChild>
<div
className={clsx(
'flex h-4 w-4 items-center justify-center rounded transition-colors hover:bg-accent/50',
dragOver ? 'ring-2 ring-blue-500' : ''
)}
className='group mx-auto flex h-8 w-8 cursor-pointer items-center justify-center'
onDragOver={onDragOver}
onDragLeave={onDragLeave}
onDrop={onDrop}
onClick={handleToggleExpanded}
>
{isExpanded ? (
<FolderOpen className='h-3 w-3 text-foreground/70 dark:text-foreground/60' />
) : (
<Folder className='h-3 w-3 text-foreground/70 dark:text-foreground/60' />
)}
<div
className={clsx(
'flex h-4 w-4 items-center justify-center rounded transition-colors hover:bg-accent/50',
dragOver ? 'ring-2 ring-blue-500' : ''
)}
>
{isExpanded ? (
<FolderOpen className='h-3 w-3 text-foreground/70 dark:text-foreground/60' />
) : (
<Folder className='h-3 w-3 text-foreground/70 dark:text-foreground/60' />
)}
</div>
</div>
</div>
</TooltipTrigger>
<TooltipContent side='right'>
<p>{folder.name}</p>
</TooltipContent>
</Tooltip>
</TooltipTrigger>
<TooltipContent side='right'>
<p>{folder.name}</p>
</TooltipContent>
</Tooltip>

{/* Delete Confirmation Dialog */}
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure you want to delete "{folder.name}"?</AlertDialogTitle>
<AlertDialogDescription>
Child folders and workflows will be moved to the parent folder.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={confirmDelete}
disabled={isDeleting}
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
>
{isDeleting ? 'Deleting...' : 'Delete'}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
)
}

return (
<div className='group' onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
<div
className='flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent/50'
onClick={handleToggleExpanded}
>
<div className='mr-1 flex h-4 w-4 items-center justify-center'>
{isExpanded ? <ChevronDown className='h-3 w-3' /> : <ChevronRight className='h-3 w-3' />}
</div>
<>
<div className='group' onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
<div
className='flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent/50'
onClick={handleToggleExpanded}
>
<div className='mr-1 flex h-4 w-4 items-center justify-center'>
{isExpanded ? (
<ChevronDown className='h-3 w-3' />
) : (
<ChevronRight className='h-3 w-3' />
)}
</div>

<div className='mr-2 flex h-4 w-4 flex-shrink-0 items-center justify-center'>
{isExpanded ? (
<FolderOpen className='h-4 w-4 text-foreground/70 dark:text-foreground/60' />
) : (
<Folder className='h-4 w-4 text-foreground/70 dark:text-foreground/60' />
)}
</div>
<div className='mr-2 flex h-4 w-4 flex-shrink-0 items-center justify-center'>
{isExpanded ? (
<FolderOpen className='h-4 w-4 text-foreground/70 dark:text-foreground/60' />
) : (
<Folder className='h-4 w-4 text-foreground/70 dark:text-foreground/60' />
)}
</div>

<span className='flex-1 cursor-default select-none truncate text-muted-foreground'>
{folder.name}
</span>

<span className='flex-1 cursor-default select-none truncate text-muted-foreground'>
{folder.name}
</span>

<div className='flex items-center justify-center' onClick={(e) => e.stopPropagation()}>
<FolderContextMenu
folderId={folder.id}
folderName={folder.name}
onCreateWorkflow={onCreateWorkflow}
onRename={handleRename}
onDelete={handleDelete}
/>
<div className='flex items-center justify-center' onClick={(e) => e.stopPropagation()}>
<FolderContextMenu
folderId={folder.id}
folderName={folder.name}
onCreateWorkflow={onCreateWorkflow}
onRename={handleRename}
onDelete={handleDelete}
/>
</div>
</div>
</div>
</div>

{/* Delete Confirmation Dialog */}
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure you want to delete "{folder.name}"?</AlertDialogTitle>
<AlertDialogDescription>
Child folders and workflows will be moved to the parent folder.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={confirmDelete}
disabled={isDeleting}
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
>
{isDeleting ? 'Deleting...' : 'Delete'}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
)
}
2 changes: 1 addition & 1 deletion apps/sim/app/w/components/sidebar/components/settings-modal/components/general/general.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ export function General() {
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={handleResetData}
className='bg-red-600 hover:bg-red-700'
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
>
Reset Data
</AlertDialogAction>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/w/knowledge/[id]/base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -941,7 +941,7 @@ export function KnowledgeBase({
<AlertDialogAction
onClick={handleDeleteKnowledgeBase}
disabled={isDeleting}
className='bg-red-600 hover:bg-red-700'
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
>
{isDeleting ? 'Deleting...' : 'Delete Knowledge Base'}
</AlertDialogAction>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/blocks/blocks/huggingface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const HuggingFaceBlock: BlockConfig<HuggingFaceChatResponse> = {
'Generate completions using Hugging Face Inference API with access to various open-source models. Leverage cutting-edge AI models for chat completions, content generation, and AI-powered conversations with customizable parameters.',
docsLink: 'https://docs.simstudio.ai/tools/huggingface',
category: 'tools',
bgColor: '#181C1E',
bgColor: '#0B0F19',
icon: HuggingFaceIcon,
subBlocks: [
{
Expand Down
8 changes: 4 additions & 4 deletions apps/sim/blocks/blocks/workflow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ComponentIcon } from '@/components/icons'
import { WorkflowIcon } from '@/components/icons'
import { createLogger } from '@/lib/logs/console-logger'
import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
import type { ToolResponse } from '@/tools/types'
Expand Down Expand Up @@ -39,10 +39,10 @@ const getAvailableWorkflows = (): Array<{ label: string; id: string }> => {
export const WorkflowBlock: BlockConfig = {
type: 'workflow',
name: 'Workflow',
description: 'Execute another workflow as a block',
description: 'Execute another workflow',
category: 'blocks',
bgColor: '#6366f1',
icon: ComponentIcon,
bgColor: '#705335',
icon: WorkflowIcon,
subBlocks: [
{
id: 'workflowId',
Expand Down
67 changes: 67 additions & 0 deletions apps/sim/components/icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,73 @@ export function WorkIcon(props: SVGProps<SVGSVGElement>) {
)
}

export function WorkflowIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg
{...props}
width='30'
height='30'
viewBox='0 0 24 24'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<circle
className='a'
cx='12'
cy='6'
r='3'
stroke='currentColor'
strokeWidth='1.5'
strokeLinecap='round'
strokeLinejoin='round'
/>
<rect
className='a'
height='5'
rx='2'
width='8'
x='2'
y='16'
stroke='currentColor'
strokeWidth='1.5'
strokeLinecap='round'
strokeLinejoin='round'
/>
<rect
className='a'
height='5'
rx='2'
width='8'
x='14'
y='16'
stroke='currentColor'
strokeWidth='1.5'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
className='a'
d='M6,16V14a2,2,0,0,1,2-2h8a2,2,0,0,1,2,2v2'
stroke='currentColor'
strokeWidth='1.5'
strokeLinecap='round'
strokeLinejoin='round'
/>
<line
className='a'
x1='12'
x2='12'
y1='9'
y2='12'
stroke='currentColor'
strokeWidth='1.5'
strokeLinecap='round'
strokeLinejoin='round'
/>
</svg>
)
}

export function WarnIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg
Expand Down