Skip to content

Commit d8b3a9a

Browse files
waleedlatif1waleedlatif1
authored
fix(ui): fix the UI for folder deletion, huggingface icon, workflow block icon, standardized alert dialog (#498)
* fixed folder delete UI * fixed UI for workflow block, huggingface, & added alert dialog for deleting folders * consistently style all alert dialogs
1 parent 0fd6e71 commit d8b3a9a

9 files changed

Lines changed: 219 additions & 74 deletions

File tree

‎apps/sim/app/w/[id]/components/notifications/notifications.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,10 @@ function DeleteApiConfirmation({
134134
</AlertDialogHeader>
135135
<AlertDialogFooter>
136136
<AlertDialogCancel>Cancel</AlertDialogCancel>
137-
<AlertDialogAction onClick={onConfirm} className='bg-red-600 hover:bg-red-700'>
137+
<AlertDialogAction
138+
onClick={onConfirm}
139+
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
140+
>
138141
Delete
139142
</AlertDialogAction>
140143
</AlertDialogFooter>

‎apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/schedule/components/schedule-modal.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -648,7 +648,10 @@ export function ScheduleModal({
648648
<AlertDialogCancel onClick={() => setShowDeleteConfirm(false)}>
649649
Cancel
650650
</AlertDialogCancel>
651-
<AlertDialogAction onClick={handleDelete} className='bg-red-600 hover:bg-red-700'>
651+
<AlertDialogAction
652+
onClick={handleDelete}
653+
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
654+
>
652655
{isDeleting ? 'Deleting...' : 'Delete Schedule'}
653656
</AlertDialogAction>
654657
</AlertDialogFooter>

‎apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/components/ui/confirmation.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@ export function DeleteConfirmDialog({
3333
</AlertDialogHeader>
3434
<AlertDialogFooter>
3535
<AlertDialogCancel>Cancel</AlertDialogCancel>
36-
<AlertDialogAction onClick={onConfirm} className='bg-red-600 hover:bg-red-700'>
36+
<AlertDialogAction
37+
onClick={onConfirm}
38+
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
39+
>
3740
{isDeleting ? 'Deleting...' : 'Delete'}
3841
</AlertDialogAction>
3942
</AlertDialogFooter>
@@ -66,7 +69,10 @@ export function UnsavedChangesDialog({
6669
</AlertDialogHeader>
6770
<AlertDialogFooter>
6871
<AlertDialogCancel onClick={onCancel}>Cancel</AlertDialogCancel>
69-
<AlertDialogAction onClick={onConfirm} className='bg-red-600 hover:bg-red-700'>
72+
<AlertDialogAction
73+
onClick={onConfirm}
74+
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
75+
>
7076
Discard changes
7177
</AlertDialogAction>
7278
</AlertDialogFooter>

‎apps/sim/app/w/components/sidebar/components/folder-tree/components/folder-item.tsx‎

Lines changed: 129 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
11
'use client'
22

3-
import { useCallback, useEffect, useRef } from 'react'
3+
import { useCallback, useEffect, useRef, useState } from 'react'
44
import clsx from 'clsx'
55
import { ChevronDown, ChevronRight, Folder, FolderOpen } from 'lucide-react'
6+
import {
7+
AlertDialog,
8+
AlertDialogAction,
9+
AlertDialogCancel,
10+
AlertDialogContent,
11+
AlertDialogDescription,
12+
AlertDialogFooter,
13+
AlertDialogHeader,
14+
AlertDialogTitle,
15+
} from '@/components/ui/alert-dialog'
616
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
717
import { type FolderTreeNode, useFolderStore } from '@/stores/folders/store'
818
import { FolderContextMenu } from '../../folder-context-menu/folder-context-menu'
@@ -27,6 +37,8 @@ export function FolderItem({
2737
onDrop,
2838
}: FolderItemProps) {
2939
const { expandedFolders, toggleExpanded, updateFolderAPI, deleteFolder } = useFolderStore()
40+
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
41+
const [isDeleting, setIsDeleting] = useState(false)
3042

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

7183
const handleDelete = async (folderId: string) => {
72-
if (
73-
confirm(
74-
`Are you sure you want to delete "${folder.name}"? Child folders and workflows will be moved to the parent folder.`
75-
)
76-
) {
77-
try {
78-
await deleteFolder(folderId)
79-
} catch (error) {
80-
console.error('Failed to delete folder:', error)
81-
}
84+
setShowDeleteDialog(true)
85+
}
86+
87+
const confirmDelete = async () => {
88+
setIsDeleting(true)
89+
try {
90+
await deleteFolder(folder.id)
91+
setShowDeleteDialog(false)
92+
} catch (error) {
93+
console.error('Failed to delete folder:', error)
94+
} finally {
95+
setIsDeleting(false)
8296
}
8397
}
8498

8599
if (isCollapsed) {
86100
return (
87-
<Tooltip>
88-
<TooltipTrigger asChild>
89-
<div
90-
className='group mx-auto flex h-8 w-8 cursor-pointer items-center justify-center'
91-
onDragOver={onDragOver}
92-
onDragLeave={onDragLeave}
93-
onDrop={onDrop}
94-
onClick={handleToggleExpanded}
95-
>
101+
<>
102+
<Tooltip>
103+
<TooltipTrigger asChild>
96104
<div
97-
className={clsx(
98-
'flex h-4 w-4 items-center justify-center rounded transition-colors hover:bg-accent/50',
99-
dragOver ? 'ring-2 ring-blue-500' : ''
100-
)}
105+
className='group mx-auto flex h-8 w-8 cursor-pointer items-center justify-center'
106+
onDragOver={onDragOver}
107+
onDragLeave={onDragLeave}
108+
onDrop={onDrop}
109+
onClick={handleToggleExpanded}
101110
>
102-
{isExpanded ? (
103-
<FolderOpen className='h-3 w-3 text-foreground/70 dark:text-foreground/60' />
104-
) : (
105-
<Folder className='h-3 w-3 text-foreground/70 dark:text-foreground/60' />
106-
)}
111+
<div
112+
className={clsx(
113+
'flex h-4 w-4 items-center justify-center rounded transition-colors hover:bg-accent/50',
114+
dragOver ? 'ring-2 ring-blue-500' : ''
115+
)}
116+
>
117+
{isExpanded ? (
118+
<FolderOpen className='h-3 w-3 text-foreground/70 dark:text-foreground/60' />
119+
) : (
120+
<Folder className='h-3 w-3 text-foreground/70 dark:text-foreground/60' />
121+
)}
122+
</div>
107123
</div>
108-
</div>
109-
</TooltipTrigger>
110-
<TooltipContent side='right'>
111-
<p>{folder.name}</p>
112-
</TooltipContent>
113-
</Tooltip>
124+
</TooltipTrigger>
125+
<TooltipContent side='right'>
126+
<p>{folder.name}</p>
127+
</TooltipContent>
128+
</Tooltip>
129+
130+
{/* Delete Confirmation Dialog */}
131+
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
132+
<AlertDialogContent>
133+
<AlertDialogHeader>
134+
<AlertDialogTitle>Are you sure you want to delete "{folder.name}"?</AlertDialogTitle>
135+
<AlertDialogDescription>
136+
Child folders and workflows will be moved to the parent folder.
137+
</AlertDialogDescription>
138+
</AlertDialogHeader>
139+
<AlertDialogFooter>
140+
<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
141+
<AlertDialogAction
142+
onClick={confirmDelete}
143+
disabled={isDeleting}
144+
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
145+
>
146+
{isDeleting ? 'Deleting...' : 'Delete'}
147+
</AlertDialogAction>
148+
</AlertDialogFooter>
149+
</AlertDialogContent>
150+
</AlertDialog>
151+
</>
114152
)
115153
}
116154

117155
return (
118-
<div className='group' onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
119-
<div
120-
className='flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent/50'
121-
onClick={handleToggleExpanded}
122-
>
123-
<div className='mr-1 flex h-4 w-4 items-center justify-center'>
124-
{isExpanded ? <ChevronDown className='h-3 w-3' /> : <ChevronRight className='h-3 w-3' />}
125-
</div>
156+
<>
157+
<div className='group' onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
158+
<div
159+
className='flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent/50'
160+
onClick={handleToggleExpanded}
161+
>
162+
<div className='mr-1 flex h-4 w-4 items-center justify-center'>
163+
{isExpanded ? (
164+
<ChevronDown className='h-3 w-3' />
165+
) : (
166+
<ChevronRight className='h-3 w-3' />
167+
)}
168+
</div>
126169

127-
<div className='mr-2 flex h-4 w-4 flex-shrink-0 items-center justify-center'>
128-
{isExpanded ? (
129-
<FolderOpen className='h-4 w-4 text-foreground/70 dark:text-foreground/60' />
130-
) : (
131-
<Folder className='h-4 w-4 text-foreground/70 dark:text-foreground/60' />
132-
)}
133-
</div>
170+
<div className='mr-2 flex h-4 w-4 flex-shrink-0 items-center justify-center'>
171+
{isExpanded ? (
172+
<FolderOpen className='h-4 w-4 text-foreground/70 dark:text-foreground/60' />
173+
) : (
174+
<Folder className='h-4 w-4 text-foreground/70 dark:text-foreground/60' />
175+
)}
176+
</div>
177+
178+
<span className='flex-1 cursor-default select-none truncate text-muted-foreground'>
179+
{folder.name}
180+
</span>
134181

135-
<span className='flex-1 cursor-default select-none truncate text-muted-foreground'>
136-
{folder.name}
137-
</span>
138-
139-
<div className='flex items-center justify-center' onClick={(e) => e.stopPropagation()}>
140-
<FolderContextMenu
141-
folderId={folder.id}
142-
folderName={folder.name}
143-
onCreateWorkflow={onCreateWorkflow}
144-
onRename={handleRename}
145-
onDelete={handleDelete}
146-
/>
182+
<div className='flex items-center justify-center' onClick={(e) => e.stopPropagation()}>
183+
<FolderContextMenu
184+
folderId={folder.id}
185+
folderName={folder.name}
186+
onCreateWorkflow={onCreateWorkflow}
187+
onRename={handleRename}
188+
onDelete={handleDelete}
189+
/>
190+
</div>
147191
</div>
148192
</div>
149-
</div>
193+
194+
{/* Delete Confirmation Dialog */}
195+
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
196+
<AlertDialogContent>
197+
<AlertDialogHeader>
198+
<AlertDialogTitle>Are you sure you want to delete "{folder.name}"?</AlertDialogTitle>
199+
<AlertDialogDescription>
200+
Child folders and workflows will be moved to the parent folder.
201+
</AlertDialogDescription>
202+
</AlertDialogHeader>
203+
<AlertDialogFooter>
204+
<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
205+
<AlertDialogAction
206+
onClick={confirmDelete}
207+
disabled={isDeleting}
208+
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
209+
>
210+
{isDeleting ? 'Deleting...' : 'Delete'}
211+
</AlertDialogAction>
212+
</AlertDialogFooter>
213+
</AlertDialogContent>
214+
</AlertDialog>
215+
</>
150216
)
151217
}

‎apps/sim/app/w/components/sidebar/components/settings-modal/components/general/general.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ export function General() {
265265
<AlertDialogCancel>Cancel</AlertDialogCancel>
266266
<AlertDialogAction
267267
onClick={handleResetData}
268-
className='bg-red-600 hover:bg-red-700'
268+
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
269269
>
270270
Reset Data
271271
</AlertDialogAction>

‎apps/sim/app/w/knowledge/[id]/base.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -941,7 +941,7 @@ export function KnowledgeBase({
941941
<AlertDialogAction
942942
onClick={handleDeleteKnowledgeBase}
943943
disabled={isDeleting}
944-
className='bg-red-600 hover:bg-red-700'
944+
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
945945
>
946946
{isDeleting ? 'Deleting...' : 'Delete Knowledge Base'}
947947
</AlertDialogAction>

‎apps/sim/blocks/blocks/huggingface.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const HuggingFaceBlock: BlockConfig<HuggingFaceChatResponse> = {
1010
'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.',
1111
docsLink: 'https://docs.simstudio.ai/tools/huggingface',
1212
category: 'tools',
13-
bgColor: '#181C1E',
13+
bgColor: '#0B0F19',
1414
icon: HuggingFaceIcon,
1515
subBlocks: [
1616
{

‎apps/sim/blocks/blocks/workflow.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ComponentIcon } from '@/components/icons'
1+
import { WorkflowIcon } from '@/components/icons'
22
import { createLogger } from '@/lib/logs/console-logger'
33
import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
44
import type { ToolResponse } from '@/tools/types'
@@ -39,10 +39,10 @@ const getAvailableWorkflows = (): Array<{ label: string; id: string }> => {
3939
export const WorkflowBlock: BlockConfig = {
4040
type: 'workflow',
4141
name: 'Workflow',
42-
description: 'Execute another workflow as a block',
42+
description: 'Execute another workflow',
4343
category: 'blocks',
44-
bgColor: '#6366f1',
45-
icon: ComponentIcon,
44+
bgColor: '#705335',
45+
icon: WorkflowIcon,
4646
subBlocks: [
4747
{
4848
id: 'workflowId',

‎apps/sim/components/icons.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,73 @@ export function WorkIcon(props: SVGProps<SVGSVGElement>) {
214214
)
215215
}
216216

217+
export function WorkflowIcon(props: SVGProps<SVGSVGElement>) {
218+
return (
219+
<svg
220+
{...props}
221+
width='30'
222+
height='30'
223+
viewBox='0 0 24 24'
224+
fill='none'
225+
xmlns='http://www.w3.org/2000/svg'
226+
>
227+
<circle
228+
className='a'
229+
cx='12'
230+
cy='6'
231+
r='3'
232+
stroke='currentColor'
233+
strokeWidth='1.5'
234+
strokeLinecap='round'
235+
strokeLinejoin='round'
236+
/>
237+
<rect
238+
className='a'
239+
height='5'
240+
rx='2'
241+
width='8'
242+
x='2'
243+
y='16'
244+
stroke='currentColor'
245+
strokeWidth='1.5'
246+
strokeLinecap='round'
247+
strokeLinejoin='round'
248+
/>
249+
<rect
250+
className='a'
251+
height='5'
252+
rx='2'
253+
width='8'
254+
x='14'
255+
y='16'
256+
stroke='currentColor'
257+
strokeWidth='1.5'
258+
strokeLinecap='round'
259+
strokeLinejoin='round'
260+
/>
261+
<path
262+
className='a'
263+
d='M6,16V14a2,2,0,0,1,2-2h8a2,2,0,0,1,2,2v2'
264+
stroke='currentColor'
265+
strokeWidth='1.5'
266+
strokeLinecap='round'
267+
strokeLinejoin='round'
268+
/>
269+
<line
270+
className='a'
271+
x1='12'
272+
x2='12'
273+
y1='9'
274+
y2='12'
275+
stroke='currentColor'
276+
strokeWidth='1.5'
277+
strokeLinecap='round'
278+
strokeLinejoin='round'
279+
/>
280+
</svg>
281+
)
282+
}
283+
217284
export function WarnIcon(props: SVGProps<SVGSVGElement>) {
218285
return (
219286
<svg

0 commit comments

Comments
 (0)