Skip to content

Commit 98e48fe

Browse files
emir-karabegemir-karabeg
committed
feat(panel): tab system
1 parent fdb747c commit 98e48fe

11 files changed

Lines changed: 109 additions & 24 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/copilot.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
'use client'
2+
3+
import { History, Plus } from 'lucide-react'
4+
import { Button } from '@/components/emcn'
5+
6+
/**
7+
* Copilot panel component.
8+
* Provides AI-powered assistance and suggestions for workflow development.
9+
*
10+
* @returns Copilot panel content
11+
*/
12+
export function Copilot() {
13+
return (
14+
<div className='flex h-full flex-col bg-[#232323] dark:bg-[#232323]'>
15+
{/* Header */}
16+
<div className='flex items-center justify-between rounded-[4px] bg-[#2A2A2A] px-[12px] py-[8px] dark:bg-[#2A2A2A]'>
17+
<h2 className='font-medium text-[#FFFFFF] text-[14px] dark:text-[#FFFFFF]'>Copilot</h2>
18+
<div className='flex items-center gap-[8px]'>
19+
<Button variant='ghost' className='p-0'>
20+
<Plus className='h-[14px] w-[14px]' />
21+
</Button>
22+
<Button variant='ghost' className='p-0'>
23+
<History className='h-[14px] w-[14px]' />
24+
</Button>
25+
</div>
26+
</div>
27+
</div>
28+
)
29+
}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/design/design.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
'use client'
2+
3+
/**
4+
* Design panel component.
5+
* Provides design configuration and customization options for the workflow.
6+
*
7+
* @returns Design panel content
8+
*/
9+
export function Design() {
10+
return (
11+
<div className='flex h-full flex-col'>
12+
<></>
13+
</div>
14+
)
15+
}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { Copilot } from './copilot/copilot'
2+
export { Design } from './design/design'

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/panel-new.tsx‎

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
'use client'
22

33
import { useRef } from 'react'
4-
import { Button } from '@/components/emcn'
5-
import { BubbleChatPreview, MoreHorizontal, Play, Rocket } from '@/components/emcn/icons'
4+
import { BubbleChatPreview, Button, MoreHorizontal, Play, Rocket } from '@/components/emcn'
5+
import { usePanelStore } from '@/stores/panel-new/store'
6+
import type { PanelTab } from '@/stores/panel-new/types'
7+
import { Copilot, Design } from './components'
68
import { usePanelResize } from './hooks/use-panel-resize'
79

810
/**
9-
* Panel component with resizable width that persists across page refreshes.
11+
* Panel component with resizable width and tab navigation that persists across page refreshes.
1012
*
1113
* Uses a CSS-based approach to prevent hydration mismatches:
1214
* 1. Width is controlled by CSS variable (--panel-width)
@@ -19,10 +21,32 @@ import { usePanelResize } from './hooks/use-panel-resize'
1921
*/
2022
export function Panel() {
2123
const panelRef = useRef<HTMLElement>(null)
24+
const { activeTab, setActiveTab } = usePanelStore()
2225

2326
// Panel resize hook
2427
const { handleMouseDown } = usePanelResize()
2528

29+
/**
30+
* Renders the active tab content based on the current selection
31+
*/
32+
const renderTabContent = () => {
33+
switch (activeTab) {
34+
case 'copilot':
35+
return <Copilot />
36+
case 'design':
37+
return <Design />
38+
default:
39+
return <Copilot />
40+
}
41+
}
42+
43+
/**
44+
* Handles tab click events
45+
*/
46+
const handleTabClick = (tab: PanelTab) => {
47+
setActiveTab(tab)
48+
}
49+
2650
return (
2751
<>
2852
<aside
@@ -42,7 +66,7 @@ export function Panel() {
4266
</Button>
4367
</div>
4468
<div className='flex gap-[4px]'>
45-
<Button className='h-[32px] gap-[8px] px-[10px]'>
69+
<Button className='h-[32px] gap-[8px] px-[10px]' variant='active'>
4670
<Rocket className='h-[13px] w-[13px]' />
4771
Deploy
4872
</Button>
@@ -55,16 +79,24 @@ export function Panel() {
5579

5680
{/* Tabs */}
5781
<div className='flex flex-shrink-0 items-center gap-[4px] px-[8px] pt-[14px]'>
58-
<Button className='h-[30px] gap-[8px] px-[10px]' variant='ghost'>
59-
Design
60-
</Button>
61-
<Button className='h-[30px] gap-[8px] px-[10px]' variant='active'>
82+
<Button
83+
className='px-[8px] py-[5px] text-[12.5px] hover:bg-[#353535] hover:text-[#E6E6E6] dark:hover:bg-[#353535] dark:hover:text-[#E6E6E6]'
84+
variant={activeTab === 'copilot' ? 'active' : 'ghost'}
85+
onClick={() => handleTabClick('copilot')}
86+
>
6287
Copilot
6388
</Button>
64-
<Button className='h-[30px] gap-[8px] px-[10px]' variant='ghost'>
65-
Variables
89+
<Button
90+
className='px-[8px] py-[5px] text-[12.5px] hover:bg-[#353535] hover:text-[#E6E6E6] dark:hover:bg-[#353535] dark:hover:text-[#E6E6E6]'
91+
variant={activeTab === 'design' ? 'active' : 'ghost'}
92+
onClick={() => handleTabClick('design')}
93+
>
94+
Design
6695
</Button>
6796
</div>
97+
98+
{/* Tab Content */}
99+
<div className='flex-1 pt-[12px]'>{renderTabContent()}</div>
68100
</div>
69101
</aside>
70102

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/blocks/blocks.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useMemo, useRef } from 'react'
44
import clsx from 'clsx'
55
import { ChevronDown } from 'lucide-react'
6-
import { Button } from '@/components/emcn/components/button'
6+
import { Button } from '@/components/emcn'
77
import { getBlocksForSidebar } from '@/lib/workflows/trigger-utils'
88
import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config'
99
import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/triggers/triggers.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useMemo, useRef } from 'react'
44
import clsx from 'clsx'
55
import { ChevronDown } from 'lucide-react'
6-
import { Button } from '@/components/emcn/components/button'
6+
import { Button } from '@/components/emcn'
77
import { getTriggersForSidebar, hasTriggerCapability } from '@/lib/workflows/trigger-utils'
88
import { usePanelResize } from '../../hooks/use-panel-resize'
99
import { useSidebarItemInteractions } from '../../hooks/use-sidebar-item-interactions'

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import { ArrowDown, Plus, Search } from 'lucide-react'
55
import { useParams } from 'next/navigation'
66
import {
77
Badge,
8+
Button,
89
ChevronDown,
10+
FolderPlus,
911
PanelLeft,
1012
Tooltip,
1113
TooltipContent,
1214
TooltipTrigger,
1315
} from '@/components/emcn'
14-
import { Button } from '@/components/emcn/components/button'
15-
import { FolderPlus } from '@/components/emcn/icons'
1616
import { useSession } from '@/lib/auth-client'
1717
import { useFolderStore } from '@/stores/folders/store'
1818
import { Blocks } from './components-new/blocks/blocks'

‎apps/sim/components/emcn/components/button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const buttonVariants = cva(
77
{
88
variants: {
99
variant: {
10-
default: 'bg-[#272727] dark:bg-[#272727]',
10+
default: 'bg-[#272727] dark:bg-[#272727] hover:bg-[#353535] dark:hover:bg-[#353535]',
1111
active: 'bg-[#353535] dark:bg-[#353535] dark:text-[#E6E6E6] text-[#E6E6E6]',
1212
'3d': 'dark:text-[#AEAEAE] border-t border-l border-r dark:border-[#303030] shadow-[0_2px_0_0] dark:shadow-[#303030] hover:shadow-[0_4px_0_0] transition-all hover:-translate-y-0.5 hover:dark:text-[#E6E6E6]',
1313
outline:

‎apps/sim/stores/panel-new/store.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
import { create } from 'zustand'
22
import { persist } from 'zustand/middleware'
3-
4-
/**
5-
* Panel state interface
6-
*/
7-
interface PanelState {
8-
panelWidth: number
9-
setPanelWidth: (width: number) => void
10-
}
3+
import type { PanelState, PanelTab } from './types'
114

125
/**
136
* Panel width constraints
@@ -16,6 +9,11 @@ const DEFAULT_PANEL_WIDTH = 240
169
const MIN_PANEL_WIDTH = 236
1710
const MAX_PANEL_WIDTH = 400
1811

12+
/**
13+
* Default panel tab
14+
*/
15+
const DEFAULT_TAB: PanelTab = 'copilot'
16+
1917
export const usePanelStore = create<PanelState>()(
2018
persist(
2119
(set) => ({
@@ -28,6 +26,8 @@ export const usePanelStore = create<PanelState>()(
2826
document.documentElement.style.setProperty('--panel-width', `${clampedWidth}px`)
2927
}
3028
},
29+
activeTab: DEFAULT_TAB,
30+
setActiveTab: (tab) => set({ activeTab: tab }),
3131
}),
3232
{
3333
name: 'panel-state',

‎apps/sim/stores/panel-new/types.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1+
/**
2+
* Available panel tabs
3+
*/
4+
export type PanelTab = 'copilot' | 'design'
5+
16
/**
27
* Panel state interface
38
*/
49
export interface PanelState {
510
panelWidth: number
611
setPanelWidth: (width: number) => void
12+
activeTab: PanelTab
13+
setActiveTab: (tab: PanelTab) => void
714
}

0 commit comments

Comments
 (0)