improvement: home, sidebar

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -9,11 +9,11 @@ import {
   FileViewer,
   type PreviewMode,
 } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
-import { useWorkspacePermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import type { MothershipResource } from '@/app/workspace/[workspaceId]/home/types'
-import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
-import { useUsageLimits } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks'
+import { useWorkspacePermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { Table } from '@/app/workspace/[workspaceId]/tables/[tableId]/components'
+import { useUsageLimits } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks'
+import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
 import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
 import { useCurrentWorkflowExecution } from '@/stores/execution'
@@ -72,10 +72,7 @@ interface EmbeddedWorkflowActionsProps {
   workflowId: string
 }
 
-export function EmbeddedWorkflowActions({
-  workspaceId,
-  workflowId,
-}: EmbeddedWorkflowActionsProps) {
+export function EmbeddedWorkflowActions({ workspaceId, workflowId }: EmbeddedWorkflowActionsProps) {
   const router = useRouter()
   const { navigateToSettings } = useSettingsNavigation()
   const { userPermissions: effectivePermissions } = useWorkspacePermissionsContext()
@@ -88,7 +85,8 @@ export function EmbeddedWorkflowActions({
     setActiveWorkflow(workflowId)
   }, [setActiveWorkflow, workflowId])
 
-  const isRunButtonDisabled = !isExecuting && (!effectivePermissions.canRead && !effectivePermissions.isLoading)
+  const isRunButtonDisabled =
+    !isExecuting && !effectivePermissions.canRead && !effectivePermissions.isLoading
 
   const handleRun = useCallback(async () => {
     if (isExecuting) {

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx

@@ -1,6 +1,12 @@
 'use client'
 
-import { type ElementType, type ReactNode, type RefCallback, type SVGProps, useCallback } from 'react'
+import {
+  type ElementType,
+  type ReactNode,
+  type RefCallback,
+  type SVGProps,
+  useCallback,
+} from 'react'
 import { Button, Tooltip } from '@/components/emcn'
 import { PanelLeft, Table as TableIcon } from '@/components/emcn/icons'
 import { WorkflowIcon } from '@/components/icons'

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

@@ -226,9 +226,8 @@ export function Home({ chatId }: HomeProps = {}) {
 
   if (!hasMessages) {
     return (
-      <div className='h-full overflow-hidden bg-[var(--bg)]'>
-        <div className='flex min-h-full flex-col items-center px-[24px]'>
-          <div className='min-h-[30vh] flex-1' />
+      <div className='h-full overflow-y-auto bg-[var(--bg)]'>
+        <div className='flex min-h-full flex-col items-center justify-center px-[24px] pb-[2vh]'>
           <h1 className='mb-[24px] max-w-[42rem] font-[440] font-season text-[32px] text-[var(--text-primary)] tracking-[-0.02em]'>
             What should we get done
             {session?.user?.name ? `, ${session.user.name.split(' ')[0]}` : ''}?
@@ -240,20 +239,20 @@ export function Home({ chatId }: HomeProps = {}) {
             onStopGeneration={stopGeneration}
             userId={session?.user?.id}
           />
-          <div className='w-full max-w-[42rem] pt-[48px] pb-[32px]'>
-            <TemplatePrompts onSelect={(prompt) => handleSubmit(prompt)} />
-          </div>
+        </div>
+        <div className='-mt-[30vh] mx-auto w-full max-w-[42rem] px-[16px] pb-[32px]'>
+          <TemplatePrompts onSelect={(prompt) => handleSubmit(prompt)} />
         </div>
       </div>
     )
   }
 
   return (
     <div className='relative flex h-full bg-[var(--bg)]'>
-      <div className='relative flex h-full min-w-0 flex-1 flex-col'>
+      <div className='flex h-full min-w-0 flex-1 flex-col'>
         <div
           ref={scrollContainerRef}
-          className='min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-6 pt-4 pb-[98px]'
+          className='min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-6 pt-4 pb-4'
         >
           <div className='mx-auto max-w-[42rem] space-y-6'>
             {messages.map((msg, index) => {
@@ -328,9 +327,8 @@ export function Home({ chatId }: HomeProps = {}) {
           </div>
         </div>
 
-        <div className='pointer-events-none absolute right-0 bottom-0 left-0 z-10 px-[24px] pb-[16px]'>
-          <div className='pointer-events-auto relative mx-auto max-w-[42rem]'>
-            <div className='-top-px -right-px -left-px -bottom-[16px] -z-10 absolute rounded-t-[20px] bg-[var(--bg)]' />
+        <div className='flex-shrink-0 px-[24px] pb-[16px]'>
+          <div className='mx-auto max-w-[42rem]'>
             <UserInput
               onSubmit={handleSubmit}
               isSending={isSending}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -3836,8 +3836,12 @@ const WorkflowContent = React.memo(
                   onNodesChange={onNodesChange}
                   onEdgesChange={onEdgesChange}
                   onConnect={!embedded && effectivePermissions.canEdit ? onConnect : undefined}
-                  onConnectStart={!embedded && effectivePermissions.canEdit ? onConnectStart : undefined}
-                  onConnectEnd={!embedded && effectivePermissions.canEdit ? onConnectEnd : undefined}
+                  onConnectStart={
+                    !embedded && effectivePermissions.canEdit ? onConnectStart : undefined
+                  }
+                  onConnectEnd={
+                    !embedded && effectivePermissions.canEdit ? onConnectEnd : undefined
+                  }
                   nodeTypes={nodeTypes}
                   edgeTypes={edgeTypes}
                   onMouseDown={handleCanvasMouseDown}

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

@@ -331,10 +331,8 @@ export function WorkspaceHeader({
                 type='button'
                 aria-label='Switch workspace'
                 className={cn(
-                  'group flex min-w-0 items-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-5)]',
-                  isCollapsed
-                    ? 'h-[35px] w-[35px] justify-center px-0'
-                    : 'h-[32px] w-full cursor-pointer gap-[8px] pr-[8px] pl-[6.5px]'
+                  'group flex h-[32px] min-w-0 items-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)] pl-[5px] transition-colors hover:bg-[var(--surface-5)]',
+                  isCollapsed ? 'w-[32px]' : 'w-full cursor-pointer gap-[8px] pr-[8px]'
                 )}
                 title={activeWorkspace?.name || 'Loading...'}
                 onContextMenu={(e) => {
@@ -368,7 +366,7 @@ export function WorkspaceHeader({
             <DropdownMenuContent
               align='start'
               side={isCollapsed ? 'right' : 'bottom'}
-              sideOffset={isCollapsed ? 12 : 8}
+              sideOffset={isCollapsed ? 16 : 8}
               style={
                 isCollapsed
                   ? {
@@ -539,10 +537,8 @@ export function WorkspaceHeader({
             type='button'
             aria-label='Switch workspace'
             className={cn(
-              'flex min-w-0 items-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)]',
-              isCollapsed
-                ? 'h-[35px] w-[35px] justify-center px-0'
-                : 'h-[32px] w-full gap-[8px] pr-[8px] pl-[6.5px]'
+              'flex h-[32px] min-w-0 items-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)] pl-[5px]',
+              isCollapsed ? 'w-[32px]' : 'w-full gap-[8px] pr-[8px]'
             )}
             title={activeWorkspace?.name || 'Loading...'}
             disabled