Skip to content

Commit 82f541e

Browse files
emir-karabegemir-karabeg
committed
improvement: ui
1 parent 1339915 commit 82f541e

12 files changed

Lines changed: 114 additions & 87 deletions

File tree

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ bun-debug.log*
2626
**/standalone/
2727
sim-standalone.tar.gz
2828

29+
# redis
30+
dump.rdb
31+
2932
# misc
3033
.DS_Store
3134
*.pem

‎apps/sim/app/_styles/globals.css‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
:root,
8787
.light {
8888
--bg: #fefefe; /* main canvas - neutral near-white */
89-
--surface-1: #fefefe; /* sidebar, panels */
89+
--surface-1: #f9f9f9; /* sidebar, panels */
9090
--surface-2: #ffffff; /* blocks, cards, modals - pure white */
9191
--surface-3: #f7f7f7; /* popovers, headers */
9292
--surface-4: #f5f5f5; /* buttons base */
@@ -95,14 +95,15 @@
9595
--border-1: #e0e0e0; /* stronger border */
9696
--surface-6: #e5e5e5; /* popovers, elevated surfaces */
9797
--surface-7: #d9d9d9;
98+
--surface-active: #eeeeee; /* hover/active state */
9899

99100
--workflow-edge: #e0e0e0; /* workflow handles/edges - matches border-1 */
100101

101102
/* Text - neutral */
102-
--text-primary: #2d2d2d;
103-
--text-secondary: #4e4e4e;
103+
--text-primary: #1a1a1a;
104+
--text-secondary: #525252;
104105
--text-tertiary: #5c5c5c;
105-
--text-muted: #737373;
106+
--text-muted: #707070;
106107
--text-subtle: #8c8c8c;
107108
--text-inverse: #ffffff;
108109
--text-muted-inverse: #a0a0a0;
@@ -212,6 +213,7 @@
212213
--border-1: #3d3d3d;
213214
--surface-6: #454545;
214215
--surface-7: #505050;
216+
--surface-active: #303030; /* hover/active state */
215217

216218
--workflow-edge: #454545; /* workflow handles/edges - same as surface-6 in dark */
217219

@@ -241,7 +243,7 @@
241243
--white: #ffffff;
242244

243245
/* Font weights - standard weights for dark mode */
244-
--font-weight-base: 440;
246+
--font-weight-base: 450;
245247
--font-weight-medium: 480;
246248
--font-weight-semibold: 550;
247249

‎apps/sim/app/api/mothership/chat/route.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,19 @@ export async function POST(req: NextRequest) {
113113
}
114114

115115
if (actualChatId) {
116+
const userMsg = {
117+
id: userMessageId,
118+
role: 'user' as const,
119+
content: message,
120+
timestamp: new Date().toISOString(),
121+
}
122+
116123
await db
117124
.update(copilotChats)
118-
.set({ conversationId: userMessageId })
125+
.set({
126+
messages: [...conversationHistory, userMsg],
127+
conversationId: userMessageId,
128+
})
119129
.where(eq(copilotChats.id, actualChatId))
120130
}
121131

‎apps/sim/app/workspace/[workspaceId]/home/home.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export function Home({ chatId, streamId }: HomeProps = {}) {
5757

5858
if (!hasMessages) {
5959
return (
60-
<div className='flex h-full flex-col items-center justify-center bg-[#FCFCFC] px-[24px] dark:bg-[var(--surface-1)]'>
60+
<div className='flex h-full flex-col items-center justify-center bg-[#FCFCFC] px-[24px] dark:bg-[var(--surface-2)]'>
6161
<h1 className='mb-[24px] font-[450] font-season text-[32px] text-[var(--text-primary)] tracking-[-0.02em]'>
6262
What do you want to do?
6363
</h1>
@@ -73,7 +73,7 @@ export function Home({ chatId, streamId }: HomeProps = {}) {
7373
}
7474

7575
return (
76-
<div className='flex h-full bg-[#FCFCFC] dark:bg-[var(--surface-1)]'>
76+
<div className='flex h-full bg-[#FCFCFC] dark:bg-[var(--surface-2)]'>
7777
<div className='flex h-full min-w-0 flex-1 flex-col'>
7878
<div className='min-h-0 flex-1 overflow-y-auto px-[16px] py-[16px]'>
7979
<div className='mx-auto max-w-[768px] space-y-[16px]'>

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -386,7 +386,7 @@ export function SearchModal({
386386
backgroundClip: 'padding-box',
387387
}}
388388
/>
389-
<span className='truncate font-medium text-[var(--text-tertiary)] group-aria-selected:text-[var(--text-primary)]'>
389+
<span className='truncate font-base text-[var(--text-tertiary)] group-aria-selected:text-[var(--text-primary)]'>
390390
{workflow.name}
391391
{workflow.isCurrent && ' (current)'}
392392
</span>
@@ -407,7 +407,7 @@ export function SearchModal({
407407
<div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
408408
<Blimp className='h-[14px] w-[14px] text-[var(--text-tertiary)] group-aria-selected:text-[var(--text-primary)]' />
409409
</div>
410-
<span className='truncate font-medium text-[var(--text-tertiary)] group-aria-selected:text-[var(--text-primary)]'>
410+
<span className='truncate font-base text-[var(--text-tertiary)] group-aria-selected:text-[var(--text-primary)]'>
411411
{task.name}
412412
</span>
413413
</Command.Item>
@@ -441,7 +441,7 @@ export function SearchModal({
441441
onSelect={() => handleWorkspaceSelect(workspace)}
442442
className='group flex h-[28px] w-full cursor-pointer items-center gap-[8px] rounded-[6px] px-[10px] text-left text-[15px] aria-selected:bg-[var(--border)] aria-selected:shadow-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50'
443443
>
444-
<span className='truncate font-medium text-[var(--text-tertiary)] group-aria-selected:text-[var(--text-primary)]'>
444+
<span className='truncate font-base text-[var(--text-tertiary)] group-aria-selected:text-[var(--text-primary)]'>
445445
{workspace.name}
446446
{workspace.isCurrent && ' (current)'}
447447
</span>
@@ -481,11 +481,11 @@ export function SearchModal({
481481
<div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
482482
<Icon className='h-[14px] w-[14px] text-[var(--text-tertiary)] group-aria-selected:text-[var(--text-primary)]' />
483483
</div>
484-
<span className='truncate font-medium text-[var(--text-tertiary)] group-aria-selected:text-[var(--text-primary)]'>
484+
<span className='truncate font-base text-[var(--text-tertiary)] group-aria-selected:text-[var(--text-primary)]'>
485485
{page.name}
486486
</span>
487487
{page.shortcut && (
488-
<span className='ml-auto flex-shrink-0 font-medium text-[13px] text-[var(--text-subtle)]'>
488+
<span className='ml-auto flex-shrink-0 font-base text-[13px] text-[var(--text-subtle)]'>
489489
{page.shortcut}
490490
</span>
491491
)}
@@ -503,7 +503,7 @@ export function SearchModal({
503503
}
504504

505505
const groupHeadingClassName =
506-
'[&_[cmdk-group-heading]]:pt-[2px] [&_[cmdk-group-heading]]:pb-[4px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[13px] [&_[cmdk-group-heading]]:text-[var(--text-subtle)] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wide'
506+
'[&_[cmdk-group-heading]]:pt-[2px] [&_[cmdk-group-heading]]:pb-[4px] [&_[cmdk-group-heading]]:font-base [&_[cmdk-group-heading]]:text-[13px] [&_[cmdk-group-heading]]:text-[var(--text-subtle)] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wide'
507507

508508
interface CommandItemProps {
509509
value: string
@@ -541,7 +541,7 @@ function CommandItem({
541541
)}
542542
/>
543543
</div>
544-
<span className='truncate font-medium text-[var(--text-tertiary)] group-aria-selected:text-[var(--text-primary)]'>
544+
<span className='truncate font-base text-[var(--text-tertiary)] group-aria-selected:text-[var(--text-primary)]'>
545545
{children}
546546
</span>
547547
</Command.Item>

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -468,7 +468,7 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
468468
return (
469469
<div className='flex flex-shrink-0 flex-col border-t px-[13.5px] pt-[8px] pb-[10px]'>
470470
<div className='flex h-[18px] items-center'>
471-
<span className='font-medium text-[12px] text-[var(--text-primary)]'>
471+
<span className='font-base text-[12px] text-[var(--text-primary)]'>
472472
{PLAN_NAMES[planType]}
473473
</span>
474474
</div>
@@ -490,24 +490,24 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
490490
<div className='flex min-w-0 flex-1 items-center gap-[6px]'>
491491
{showPlanText && (
492492
<>
493-
<span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-primary)]'>
493+
<span className='flex-shrink-0 font-base text-[12px] text-[var(--text-primary)]'>
494494
{PLAN_NAMES[planType]}
495495
</span>
496496
<div className='h-[14px] w-[1.5px] flex-shrink-0 bg-[var(--divider)]' />
497497
</>
498498
)}
499499
<div className='flex min-w-0 flex-1 items-center gap-[4px]'>
500500
{statusText.isError ? (
501-
<span className='font-medium text-[12px] text-[var(--text-error)]'>
501+
<span className='font-base text-[12px] text-[var(--text-error)]'>
502502
{statusText.text}
503503
</span>
504504
) : (
505505
<>
506-
<span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
506+
<span className='font-base text-[12px] text-[var(--text-secondary)] tabular-nums'>
507507
${usage.current.toFixed(2)}
508508
</span>
509-
<span className='font-medium text-[12px] text-[var(--text-secondary)]'>/</span>
510-
<span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
509+
<span className='font-base text-[12px] text-[var(--text-secondary)]'>/</span>
510+
<span className='font-base text-[12px] text-[var(--text-secondary)] tabular-nums'>
511511
${usage.limit.toFixed(2)}
512512
</span>
513513
</>

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -445,9 +445,9 @@ export function FolderItem({
445445
aria-expanded={isExpanded}
446446
aria-label={`${folder.name} folder, ${isExpanded ? 'expanded' : 'collapsed'}`}
447447
className={clsx(
448-
'group mx-[2px] flex h-[28px] cursor-pointer items-center gap-[8px] rounded-[8px] px-[8px] text-[14px]',
449-
!isAnyDragActive && 'hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]',
450-
isSelected ? 'bg-[var(--surface-6)] dark:bg-[var(--surface-5)]' : '',
448+
'group mx-[2px] flex h-[30px] cursor-pointer items-center gap-[8px] rounded-[8px] px-[8px] text-[14px]',
449+
!isAnyDragActive && 'hover:bg-[var(--surface-active)]',
450+
isSelected ? 'bg-[var(--surface-active)]' : '',
451451
(isDragging || (isAnyDragActive && isSelected)) && 'opacity-50'
452452
)}
453453
onClick={handleClick}
@@ -460,19 +460,19 @@ export function FolderItem({
460460
>
461461
<ChevronRight
462462
className={clsx(
463-
'h-[14px] w-[14px] flex-shrink-0 text-[var(--text-secondary)] transition-transform duration-100',
463+
'h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
464464
isExpanded && 'rotate-90'
465465
)}
466466
aria-hidden='true'
467467
/>
468468
{isExpanded ? (
469469
<FolderOpen
470-
className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-secondary)]'
470+
className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)]'
471471
aria-hidden='true'
472472
/>
473473
) : (
474474
<Folder
475-
className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-secondary)]'
475+
className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)]'
476476
aria-hidden='true'
477477
/>
478478
)}
@@ -483,7 +483,7 @@ export function FolderItem({
483483
onChange={(e) => setEditValue(e.target.value)}
484484
onKeyDown={handleRenameKeyDown}
485485
onBlur={handleInputBlur}
486-
className='min-w-0 flex-1 border-0 bg-transparent p-0 font-medium text-[14px] text-[var(--text-primary)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
486+
className='min-w-0 flex-1 border-0 bg-transparent p-0 font-base text-[14px] text-[var(--text-primary)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
487487
maxLength={50}
488488
disabled={isRenaming}
489489
onClick={(e) => {
@@ -498,7 +498,7 @@ export function FolderItem({
498498
) : (
499499
<div className='flex min-w-0 flex-1 items-center gap-[8px]'>
500500
<span
501-
className='min-w-0 flex-1 truncate font-medium text-[var(--text-secondary)]'
501+
className='min-w-0 flex-1 truncate font-base text-[var(--text-secondary)]'
502502
onDoubleClick={handleDoubleClick}
503503
>
504504
{folder.name}
@@ -513,7 +513,7 @@ export function FolderItem({
513513
!isAnyDragActive && 'group-hover:opacity-100'
514514
)}
515515
>
516-
<MoreHorizontal className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
516+
<MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-muted)]' />
517517
</button>
518518
</div>
519519
)}

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -360,15 +360,10 @@ export function WorkflowItem({
360360
href={`/workspace/${workspaceId}/w/${workflow.id}`}
361361
data-item-id={workflow.id}
362362
className={clsx(
363-
'group mx-[2px] flex h-[28px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px]',
364-
active && 'bg-[var(--surface-6)] dark:bg-[var(--surface-5)]',
365-
!active &&
366-
!isAnyDragActive &&
367-
'hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]',
368-
isSelected &&
369-
selectedWorkflows.size > 1 &&
370-
!active &&
371-
'bg-[var(--surface-6)] dark:bg-[var(--surface-5)]',
363+
'group mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px]',
364+
active && 'bg-[var(--surface-active)]',
365+
!active && !isAnyDragActive && 'hover:bg-[var(--surface-active)]',
366+
isSelected && selectedWorkflows.size > 1 && !active && 'bg-[var(--surface-active)]',
372367
(isDragging || (isAnyDragActive && isSelected)) && 'opacity-50'
373368
)}
374369
draggable={!isEditing && !dragDisabled}
@@ -378,7 +373,7 @@ export function WorkflowItem({
378373
onContextMenu={handleContextMenu}
379374
>
380375
<div
381-
className='h-[14px] w-[14px] flex-shrink-0 rounded-[4px] border-[2px]'
376+
className='h-[16px] w-[16px] flex-shrink-0 rounded-[4px] border-[2.5px]'
382377
style={{
383378
backgroundColor: workflow.color,
384379
borderColor: `${workflow.color}60`,
@@ -394,7 +389,7 @@ export function WorkflowItem({
394389
onChange={(e) => setEditValue(e.target.value)}
395390
onKeyDown={handleKeyDown}
396391
onBlur={handleInputBlur}
397-
className='w-full min-w-0 border-0 bg-transparent p-0 font-medium text-[14px] text-[var(--text-primary)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
392+
className='w-full min-w-0 border-0 bg-transparent p-0 font-base text-[14px] text-[var(--text-primary)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
398393
maxLength={100}
399394
disabled={isRenaming}
400395
onClick={(e) => {
@@ -409,7 +404,7 @@ export function WorkflowItem({
409404
) : (
410405
<div
411406
className={clsx(
412-
'min-w-0 truncate font-medium',
407+
'min-w-0 truncate font-base',
413408
active ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'
414409
)}
415410
onDoubleClick={handleDoubleClick}
@@ -432,7 +427,7 @@ export function WorkflowItem({
432427
!isAnyDragActive && 'group-hover:opacity-100'
433428
)}
434429
>
435-
<MoreHorizontal className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
430+
<MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-muted)]' />
436431
</button>
437432
</>
438433
)}

0 commit comments

Comments
 (0)