improvement(ui/ux) by emir-karabeg · Pull Request #831 · simstudioai/sim

emir-karabeg · 2025-07-31T08:32:31Z

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context.

Fixes # (issue)

Type of change

Please delete options that are not relevant.

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation update
Security enhancement
Performance improvement
Code refactoring (no functional changes)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration.

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have added tests that prove my fix is effective or that my feature works
All tests pass locally and in CI (bun run test)
My changes generate no new warnings
Any dependent changes have been merged and published in downstream modules
I have updated version numbers as needed (if needed)
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Security Considerations:

My changes do not introduce any new security vulnerabilities
I have considered the security implications of my changes

Additional Information:

Any additional information, configuration or data that might be necessary to reproduce the issue or use the feature.

vercel · 2025-07-31T08:32:35Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 5, 2025 3:35am
sim	❌ Failed (Inspect)			Aug 5, 2025 3:35am

greptile-apps

Greptile Summary

This PR implements a comprehensive UI/UX improvement initiative across the SimStudio AI application, focusing on visual consistency, modern design patterns, and enhanced user interactions. The changes standardize the design system by implementing consistent border radius values (moving from various sizes like 14px to a standardized 8px/10px), updating color schemes from card-based tokens (bg-card, text-card-foreground) to semantic background tokens (bg-background, text-foreground), and introducing the Geist Sans font family for improved typography.

Key architectural changes include replacing the react-syntax-highlighter library with a lighter Prism.js implementation for better performance, migrating from dropdown-based context menus to inline action buttons for more immediate user interactions, and enhancing modal components with backdrop blur effects and improved interaction handling. The changes also streamline component interfaces by removing complex inline editing from headers and consolidating workspace management functionality into dedicated components.

The PR touches core UI components including dialogs, sheets, alert dialogs, toolbars, sidebars, and various workspace management components. All styling updates maintain existing functionality while providing a more cohesive visual experience. The changes follow established patterns from the codebase's component library structure and integrate well with the existing Next.js app router architecture and ReactFlow-based workflow system.

PR Description Notes:

The PR description template has not been filled out - all checkboxes remain unchecked and no description, testing information, or additional context has been provided.

Confidence score: 4/5

This PR appears safe to merge with comprehensive UI/UX improvements that maintain existing functionality while enhancing visual consistency.
The score reflects some complexity in modal interaction handling and the Prism.js migration that could benefit from thorough testing, though no breaking changes are evident.
Files that need more attention: apps/sim/components/ui/dialog.tsx, apps/sim/components/ui/alert-dialog.tsx, and apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/professional-message/professional-message.tsx due to complex interaction logic and security considerations with dangerouslySetInnerHTML.

_{20 files reviewed, 11 comments}

_{Edit Code Review Bot Settings | Greptile}

greptile-apps · 2025-07-31T08:33:01Z

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/toolbar/toolbar.tsx


      {/* Content */}
-      <ScrollArea className='flex-1 px-2' hideScrollbar={true}>
+      <ScrollArea className='flex-1 px-2 pb-[0.26px]' hideScrollbar={true}>


style: The specific pb-[0.26px] value is unusual - typically padding uses whole pixel values or design system units. Consider using a standard spacing value like pb-1 (4px) or explaining why this precise fractional pixel is needed.

greptile-apps · 2025-07-31T08:33:10Z

...w/components/sidebar/components/toolbar/components/toolbar-loop-block/toolbar-loop-block.tsx

      onClick={handleClick}
      className={cn(
-        'group flex items-center gap-3 rounded-lg p-2 transition-colors',
+        'group flex h-8 items-center gap-[10px] rounded-[8px] p-2 transition-colors',


logic: Height changed from h-9 (used in main ToolbarBlock) to h-8 - this creates inconsistency rather than fixing it

greptile-apps · 2025-07-31T08:33:10Z

apps/sim/components/ui/alert-dialog.tsx

+          {children}
+          {!hideCloseButton && (
+            <AlertDialogPrimitive.Cancel
+              className='absolute top-4 right-4 h-4 w-4 border-0 bg-transparent p-0 text-muted-foreground transition-colors hover:bg-transparent hover:bg-transparent hover:text-foreground focus:outline-none disabled:pointer-events-none'


style: duplicate hover:bg-transparent declaration in className

Suggested change

className='absolute top-4 right-4 h-4 w-4 border-0 bg-transparent p-0 text-muted-foreground transition-colors hover:bg-transparent hover:bg-transparent hover:text-foreground focus:outline-none disabled:pointer-events-none'

className='absolute top-4 right-4 h-4 w-4 border-0 bg-transparent p-0 text-muted-foreground transition-colors hover:bg-transparent hover:text-foreground focus:outline-none disabled:pointer-events-none'

greptile-apps · 2025-07-31T08:33:10Z

apps/sim/components/ui/alert-dialog.tsx

  <AlertDialogPrimitive.Description
    ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('font-[360] text-sm', className)}


style: unusual font weight value font-[360] - verify this is supported across browsers and design system

greptile-apps · 2025-07-31T08:33:13Z

...space/[workspaceId]/w/components/sidebar/components/folder-tree/components/workflow-item.tsx

+              <Button
+                variant='ghost'
+                size='icon'
+                className='h-4 w-4 p-0 opacity-0 transition-opacity hover:bg-transparent hover:opacity-100 focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0'


style: Button size mismatch: using size='icon' (h-10 w-10) but overriding with h-4 w-4 in className. Consider creating a custom size variant instead of overriding default behavior.

greptile-apps · 2025-07-31T08:33:19Z

apps/sim/components/ui/dialog.tsx

+            disabled={!isInteractionReady}
+            tabIndex={-1}


logic: tabIndex={-1} removes the close button from keyboard navigation, which breaks accessibility for keyboard users

greptile-apps · 2025-07-31T08:33:21Z

...orkspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx

+          {!isWorkspaceSelectorVisible ? (
+            <ChevronUp className='h-4 w-4' />
+          ) : (
+            <ChevronDown className='h-4 w-4' />
+          )}


logic: Chevron direction logic appears inverted - shows ChevronUp when selector is NOT visible, which seems counterintuitive

Suggested change

{!isWorkspaceSelectorVisible ? (

<ChevronUp className='h-4 w-4' />

) : (

<ChevronDown className='h-4 w-4' />

)}

{isWorkspaceSelectorVisible ? (

<ChevronUp className='h-4 w-4' />

) : (

<ChevronDown className='h-4 w-4' />

)}

greptile-apps · 2025-07-31T08:33:21Z

...components/panel/components/copilot/components/professional-message/professional-message.tsx

+if (typeof document !== 'undefined') {
+  const styleId = 'professional-message-prism-dark-mode'
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style')
+    style.id = styleId
+    style.textContent = `
+      .dark .token.comment,
+      .dark .token.prolog,
+      .dark .token.doctype,
+      .dark .token.cdata {
+        color: #6a9955;
+      }
+      .dark .token.punctuation {
+        color: #d4d4d4;
+      }
+      .dark .token.property,
+      .dark .token.tag,
+      .dark .token.boolean,
+      .dark .token.number,
+      .dark .token.constant,
+      .dark .token.symbol,
+      .dark .token.deleted {
+        color: #b5cea8;
+      }
+      .dark .token.selector,
+      .dark .token.attr-name,
+      .dark .token.string,
+      .dark .token.char,
+      .dark .token.builtin,
+      .dark .token.inserted {
+        color: #ce9178;
+      }
+      .dark .token.operator,
+      .dark .token.entity,
+      .dark .token.url,
+      .dark .language-css .token.string,
+      .dark .style .token.string {
+        color: #d4d4d4;
+      }
+      .dark .token.atrule,
+      .dark .token.attr-value,
+      .dark .token.keyword {
+        color: #569cd6;
+      }
+      .dark .token.function,
+      .dark .token.class-name {
+        color: #dcdcaa;
+      }
+      .dark .token.regex,
+      .dark .token.important,
+      .dark .token.variable {
+        color: #d16969;
+      }
+    `
+    document.head.appendChild(style)
+  }
+}


logic: Direct DOM manipulation in component module can cause SSR hydration mismatches and styling issues

greptile-apps · 2025-07-31T08:33:24Z

...pace/[workspaceId]/w/components/sidebar/components/workspace-selector/workspace-selector.tsx

+                            <Input
+                              value={deleteConfirmationName}
+                              onChange={(e) => setDeleteConfirmationName(e.target.value)}
+                              placeholder='Placeholder'


style: Placeholder text should be more descriptive, like 'Enter workspace name' instead of 'Placeholder'

Suggested change

placeholder='Placeholder'

placeholder='Enter workspace name'

greptile-apps · 2025-07-31T08:33:33Z

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

  WORKFLOW_SELECTOR: 212, // h-[212px]
  NAVIGATION: 48, // h-12 buttons
-  WORKSPACE_SELECTOR: 183, // accurate height: p-2(16) + h-[116px](116) + mt-2(8) + border-t(1) + pt-2(8) + h-8(32) = 181px
+  WORKSPACE_SELECTOR: 171, // optimized height: p-2(16) + h-[104px](104) + mt-2(8) + border-t(1) + pt-2(8) + h-8(32) = 169px


logic: Height calculation comment shows 169px but constant is set to 171px - verify which is correct

Suggested change

WORKSPACE_SELECTOR: 171, // optimized height: p-2(16) + h-[104px](104) + mt-2(8) + border-t(1) + pt-2(8) + h-8(32) = 169px

WORKSPACE_SELECTOR: 169, // optimized height: p-2(16) + h-[104px](104) + mt-2(8) + border-t(1) + pt-2(8) + h-8(32) = 169px

* complete: workspace header, workspace selector * finished search modal * completed workflow selector * finished invite modal * finished help modal

emir-karabeg changed the base branch from main to staging July 31, 2025 08:32

greptile-apps bot reviewed Jul 31, 2025

View reviewed changes

vercel bot deployed to Preview – sim July 31, 2025 08:36 View deployment

complete: workspace header, workspace selector

6c0e7b5

emir-karabeg force-pushed the improvement/ui-ux branch from 2449212 to 73b4e37 Compare July 31, 2025 15:33

vercel bot deployed to Preview – docs July 31, 2025 15:35 View deployment

vercel bot had a problem deploying to Preview – sim July 31, 2025 15:38 Failure

vercel bot temporarily deployed to Preview – docs July 31, 2025 15:43 Inactive

vercel bot deployed to Preview – sim July 31, 2025 15:47 View deployment

emir-karabeg force-pushed the improvement/ui-ux branch from bed6c00 to 502cc1f Compare July 31, 2025 20:53

vercel bot temporarily deployed to Preview – docs July 31, 2025 20:53 Inactive

vercel bot deployed to Preview – sim July 31, 2025 20:57 View deployment

finished search modal

fa10cc4

emir-karabeg force-pushed the improvement/ui-ux branch from 502cc1f to fa10cc4 Compare July 31, 2025 21:26

vercel bot temporarily deployed to Preview – docs July 31, 2025 21:26 Inactive

vercel bot deployed to Preview – sim July 31, 2025 21:30 View deployment

completed workflow selector

e9eb7a6

vercel bot temporarily deployed to Preview – docs August 2, 2025 03:36 Inactive

vercel bot deployed to Preview – sim August 2, 2025 03:39 View deployment

emir-karabeg added 2 commits August 2, 2025 18:32

finished invite modal

bb90af2

finished help modal

e503e9b

vercel bot temporarily deployed to Preview – docs August 3, 2025 02:38 Inactive

vercel bot deployed to Preview – sim August 3, 2025 02:42 View deployment

vercel bot temporarily deployed to Preview – docs August 5, 2025 03:26 Inactive

emir-karabeg force-pushed the improvement/ui-ux branch from 2b4e615 to e503e9b Compare August 5, 2025 03:28

Merge branch 'staging' into improvement/ui-ux

59afcf5

waleedlatif1 merged commit 063734f into staging Aug 5, 2025
1 of 4 checks passed

vercel bot deployed to Preview – docs August 5, 2025 03:33 View deployment

vercel bot had a problem deploying to Preview – sim August 5, 2025 03:35 Failure

waleedlatif1 mentioned this pull request Aug 5, 2025

v0.3.19: copilot, bug fixes, outlook trigger, hunterio #876

Merged

waleedlatif1 deleted the improvement/ui-ux branch August 6, 2025 00:22

waleedlatif1 pushed a commit that referenced this pull request Aug 6, 2025

improvement(ui/ux) (#831)

d5b01ef

* complete: workspace header, workspace selector * finished search modal * completed workflow selector * finished invite modal * finished help modal

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

improvement(ui/ux)#831

improvement(ui/ux)#831
waleedlatif1 merged 6 commits intostagingfrom
improvement/ui-ux

emir-karabeg commented Jul 31, 2025

Uh oh!

vercel bot commented Jul 31, 2025 •

edited

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Jul 31, 2025

Uh oh!

greptile-apps bot Jul 31, 2025

Uh oh!

greptile-apps bot Jul 31, 2025

Uh oh!

greptile-apps bot Jul 31, 2025

Uh oh!

greptile-apps bot Jul 31, 2025

Uh oh!

greptile-apps bot Jul 31, 2025

Uh oh!

greptile-apps bot Jul 31, 2025

Uh oh!

greptile-apps bot Jul 31, 2025

Uh oh!

greptile-apps bot Jul 31, 2025

Uh oh!

greptile-apps bot Jul 31, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	className='absolute top-4 right-4 h-4 w-4 border-0 bg-transparent p-0 text-muted-foreground transition-colors hover:bg-transparent hover:bg-transparent hover:text-foreground focus:outline-none disabled:pointer-events-none'
	className='absolute top-4 right-4 h-4 w-4 border-0 bg-transparent p-0 text-muted-foreground transition-colors hover:bg-transparent hover:text-foreground focus:outline-none disabled:pointer-events-none'

	WORKSPACE_SELECTOR: 171, // optimized height: p-2(16) + h-[104px](104) + mt-2(8) + border-t(1) + pt-2(8) + h-8(32) = 169px
	WORKSPACE_SELECTOR: 169, // optimized height: p-2(16) + h-[104px](104) + mt-2(8) + border-t(1) + pt-2(8) + h-8(32) = 169px

Conversation

emir-karabeg commented Jul 31, 2025

Description

Type of change

How Has This Been Tested?

Checklist:

Security Considerations:

Additional Information:

Uh oh!

vercel bot commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Greptile Summary

Confidence score: 4/5

Uh oh!

greptile-apps bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Jul 31, 2025 •

edited

Loading