Skip to content

feat(sidebar-controls): added ability to expand on hover #343

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
emir-karabeg merged 1 commit into from
May 10, 2025
Merged

feat(sidebar-controls): added ability to expand on hover #343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 1 addition & 7 deletions apps/sim/app/api/workflows/[id]/status/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
validation.workflow.deployedState as any
)
}

logger.info(`[${requestId}] Retrieved status for workflow: ${id}`, {
isDeployed: validation.workflow.isDeployed,
isPublished: validation.workflow.isPublished,
needsRedeployment,
})


return createSuccessResponse({
isDeployed: validation.workflow.isDeployed,
deployedAt: validation.workflow.deployedAt,
Expand Down
51 changes: 32 additions & 19 deletions apps/sim/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@

/* Custom Animations */
@layer utilities {

/* Animation containment to avoid layout shifts */
.animation-container {
contain: paint layout style;
Expand All @@ -150,9 +151,11 @@
0% {
box-shadow: 0 0 0 0 hsl(var(--border));
}

50% {
box-shadow: 0 0 0 8px hsl(var(--border));
}

100% {
box-shadow: 0 0 0 0 hsl(var(--border));
}
Expand Down Expand Up @@ -195,34 +198,37 @@
0% {
transform: translateX(-100%);
}

100% {
transform: translateX(100%);
}
}

@keyframes orbit {
0% {
transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px))
rotate(calc(var(--angle) * -1deg));
transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg));
}

100% {
transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px))
rotate(calc((var(--angle) * -1deg) - 360deg));
transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg));
}
}

@keyframes marquee {
from {
transform: translateX(0);
}

to {
transform: translateX(calc(-100% - var(--gap)));
}
}

@keyframes marquee-vertical {
from {
transform: translateY(0);
}

to {
transform: translateY(calc(-100% - var(--gap)));
}
Expand All @@ -234,30 +240,27 @@

.streaming-effect::after {
content: '';
@apply pointer-events-none absolute top-0 left-0 h-full w-full;
background: linear-gradient(
90deg,
rgba(128, 128, 128, 0) 0%,
rgba(128, 128, 128, 0.1) 50%,
rgba(128, 128, 128, 0) 100%
);
@apply pointer-events-none absolute left-0 top-0 h-full w-full;
background: linear-gradient(90deg,
rgba(128, 128, 128, 0) 0%,
rgba(128, 128, 128, 0.1) 50%,
rgba(128, 128, 128, 0) 100%);
animation: code-shimmer 1.5s infinite;
z-index: 10;
}

.dark .streaming-effect::after {
background: linear-gradient(
90deg,
rgba(180, 180, 180, 0) 0%,
rgba(180, 180, 180, 0.1) 50%,
rgba(180, 180, 180, 0) 100%
);
background: linear-gradient(90deg,
rgba(180, 180, 180, 0) 0%,
rgba(180, 180, 180, 0.1) 50%,
rgba(180, 180, 180, 0) 100%);
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
Expand All @@ -270,8 +273,10 @@

/* Dark mode error badge styling */
.dark .error-badge {
background-color: hsl(0, 70%, 20%) !important; /* Darker red background for dark mode */
color: hsl(0, 0%, 100%) !important; /* Pure white text for better contrast */
background-color: hsl(0, 70%, 20%) !important;
/* Darker red background for dark mode */
color: hsl(0, 0%, 100%) !important;
/* Pure white text for better contrast */
}

/* Input Overrides */
Expand All @@ -293,10 +298,12 @@ input[type='search']::-ms-clear {

/* Code Prompt Bar Placeholder Animation */
@keyframes placeholder-pulse {

0%,
100% {
opacity: 0.5;
}

50% {
opacity: 0.8;
}
Expand All @@ -319,3 +326,9 @@ input[type='search']::-ms-clear {
.font-geist-mono {
font-family: var(--font-geist-mono);
}

/* Sidebar overlay styles */
.main-content-overlay {
z-index: 40;
/* Higher z-index to appear above content */
}
1 change: 0 additions & 1 deletion apps/sim/app/w/[id]/components/control-bar/control-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ const RUN_COUNT_OPTIONS = [1, 5, 10, 25, 50, 100]
export function ControlBar() {
const router = useRouter()
const { data: session } = useSession()
const { isCollapsed: isSidebarCollapsed } = useSidebarStore()

// Store hooks
const {
Expand Down
20 changes: 13 additions & 7 deletions apps/sim/app/w/[id]/components/toolbar/toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,13 @@ import { ToolbarTabs } from './components/toolbar-tabs/toolbar-tabs'
export function Toolbar() {
const [activeTab, setActiveTab] = useState<BlockCategory>('blocks')
const [searchQuery, setSearchQuery] = useState('')
const [isCollapsed, setIsCollapsed] = useState(false)
const { isCollapsed: isSidebarCollapsed } = useSidebarStore()
const { mode, isExpanded } = useSidebarStore()
// In hover mode, act as if sidebar is always collapsed for layout purposes
const isSidebarCollapsed =
mode === 'expanded' ? !isExpanded : mode === 'collapsed' || mode === 'hover'

// State to track if toolbar is open - independent of sidebar state
const [isToolbarOpen, setIsToolbarOpen] = useState(true)

const blocks = useMemo(() => {
const filteredBlocks = !searchQuery.trim() ? getBlocksByCategory(activeTab) : getAllBlocks()
Expand All @@ -31,13 +36,14 @@ export function Toolbar() {
})
}, [searchQuery, activeTab])

if (isCollapsed) {
// Show toolbar button when it's closed, regardless of sidebar state
if (!isToolbarOpen) {
return (
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => setIsCollapsed(false)}
className={`fixed transition-left duration-200 ${isSidebarCollapsed ? 'left-20' : 'left-64'} bottom-[18px] z-10 flex h-9 w-9 items-center justify-center rounded-lg bg-background text-muted-foreground hover:text-foreground hover:bg-accent border`}
onClick={() => setIsToolbarOpen(true)}
className={`fixed transition-all duration-200 ${isSidebarCollapsed ? 'left-20' : 'left-64'} bottom-[18px] z-10 flex h-9 w-9 items-center justify-center rounded-lg bg-background text-muted-foreground hover:text-foreground hover:bg-accent border`}
>
<PanelRight className="h-5 w-5" />
<span className="sr-only">Open Toolbar</span>
Expand All @@ -50,7 +56,7 @@ export function Toolbar() {

return (
<div
className={`fixed transition-left duration-200 ${isSidebarCollapsed ? 'left-14' : 'left-60'} top-16 z-10 h-[calc(100vh-4rem)] w-60 border-r bg-background sm:block`}
className={`fixed transition-all duration-200 ${isSidebarCollapsed ? 'left-14' : 'left-60'} top-16 z-10 h-[calc(100vh-4rem)] w-60 border-r bg-background sm:block`}
>
<div className="flex flex-col h-full">
<div className="px-4 pt-4 pb-1 sticky top-0 bg-background z-20">
Expand Down Expand Up @@ -89,7 +95,7 @@ export function Toolbar() {
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => setIsCollapsed(true)}
onClick={() => setIsToolbarOpen(false)}
className="absolute right-4 bottom-[18px] flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent"
>
<PanelLeftClose className="h-5 w-5" />
Expand Down
7 changes: 5 additions & 2 deletions apps/sim/app/w/[id]/workflow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,10 @@ function WorkflowContent() {
// State
const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null)
const [isInitialized, setIsInitialized] = useState(false)
const { isCollapsed: isSidebarCollapsed } = useSidebarStore()
const { mode, isExpanded } = useSidebarStore()
// In hover mode, act as if sidebar is always collapsed for layout purposes
const isSidebarCollapsed =
mode === 'expanded' ? !isExpanded : mode === 'collapsed' || mode === 'hover'

// Hooks
const params = useParams()
Expand Down Expand Up @@ -478,8 +481,8 @@ function WorkflowContent() {
<div className="flex flex-col h-screen w-full overflow-hidden">
<div className={`transition-all duration-200 ${isSidebarCollapsed ? 'ml-14' : 'ml-60'}`}>
<ControlBar />
<Toolbar />
</div>
<Toolbar />
<div
className={`flex-1 relative w-full h-full transition-all duration-200 ${isSidebarCollapsed ? 'pl-14' : 'pl-60'}`}
>
Expand Down
102 changes: 102 additions & 0 deletions apps/sim/app/w/components/sidebar/components/sidebar-control/sidebar-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
'use client'

import { useState } from 'react'
import { PanelRight } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { cn } from '@/lib/utils'
import { SidebarMode, useSidebarStore } from '@/stores/sidebar/store'

// This component ONLY controls sidebar state, not toolbar state
export function SidebarControl() {
const { mode, setMode, toggleExpanded, isExpanded } = useSidebarStore()
const [open, setOpen] = useState(false)

const handleModeChange = (value: SidebarMode) => {
// When selecting expanded mode, ensure it's expanded
if (value === 'expanded' && !isExpanded) {
toggleExpanded()
}

// Set the new mode
setMode(value)
setOpen(false)
}

return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="ghost"
size="icon"
className="flex h-8 w-8 p-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/50 cursor-pointer"
>
<PanelRight className="h-[18px] w-[18px] text-muted-foreground" />
<span className="sr-only text-sm">Sidebar control</span>
</Button>
</PopoverTrigger>
<PopoverContent
className="w-44 p-0 shadow-md border overflow-hidden rounded-lg bg-background"
side="top"
align="start"
sideOffset={5}
>
<div className="border-b py-[10px] px-4">
<h4 className="text-xs font-[480] text-muted-foreground">Sidebar control</h4>
</div>
<div className="px-2 pt-1 pb-2">
<div className="flex flex-col gap-[1px]">
<button
className={cn(
'w-full text-left py-1.5 px-2 text-xs rounded hover:bg-accent/50 text-muted-foreground font-medium'
)}
onClick={() => handleModeChange('expanded')}
>
<span className="flex items-center">
<span
className={cn(
'h-1 w-1 rounded-full mr-1.5',
mode === 'expanded' ? 'bg-muted-foreground' : 'bg-transparent'
)}
></span>
Expanded
</span>
</button>
<button
className={cn(
'w-full text-left py-1.5 px-2 text-xs rounded hover:bg-accent/50 text-muted-foreground font-medium'
)}
onClick={() => handleModeChange('collapsed')}
>
<span className="flex items-center">
<span
className={cn(
'h-1 w-1 rounded-full mr-1.5',
mode === 'collapsed' ? 'bg-muted-foreground' : 'bg-transparent'
)}
></span>
Collapsed
</span>
</button>
<button
className={cn(
'w-full text-left py-1.5 px-2 text-xs rounded hover:bg-accent/50 text-muted-foreground font-medium'
)}
onClick={() => handleModeChange('hover')}
>
<span className="flex items-center">
<span
className={cn(
'h-1 w-1 rounded-full mr-1.5',
mode === 'hover' ? 'bg-muted-foreground' : 'bg-transparent'
)}
></span>
Expand on hover
</span>
</button>
</div>
</div>
</PopoverContent>
</Popover>
)
}
Loading