Skip to content

Commit 73c52a6

Browse files
Sg312Sg312
committed
Unify resource panel collapse controls
1 parent 1e2d8d3 commit 73c52a6

4 files changed

Lines changed: 26 additions & 91 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@ export const RESOURCE_HEADER_CLASSES = {
1212
controls: 'h-[var(--resource-header-controls-height)]',
1313
contentTop: 'top-[8.5px]',
1414
startPadding: 'pl-[var(--resource-header-end-inset)]',
15-
endPadding: 'pr-[var(--resource-header-end-inset)]',
16-
fixedEndPadding: 'pr-[var(--resource-header-fixed-reserve)]',
15+
endPadding: 'pr-[var(--resource-header-fixed-reserve)]',
1716
endPosition: 'right-[var(--resource-header-end-inset)]',
1817
adjacentEndPosition: 'right-[var(--resource-header-fixed-reserve)]',
1918
emptyAddOffset: '-translate-x-1.5',

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

Lines changed: 7 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
useState,
1212
} from 'react'
1313
import { Button, cn, Tooltip } from '@sim/emcn'
14-
import { Columns3, Eye, PanelLeft, Pencil } from '@sim/emcn/icons'
14+
import { Columns3, Eye, Pencil } from '@sim/emcn/icons'
1515
import { sendBrowserPanelAction } from '@/lib/browser-agent/transport'
1616
import { SIM_RESOURCE_DRAG_TYPE, SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
1717
import { isEphemeralResource } from '@/lib/copilot/resources/types'
@@ -282,7 +282,6 @@ interface ResourceTabsProps {
282282
chatId?: string
283283
resources: MothershipResource[]
284284
activeId: string | null
285-
useFixedResourceToggle: boolean
286285
previewMode?: PreviewMode
287286
onCyclePreviewMode?: () => void
288287
actions?: ReactNode
@@ -296,7 +295,6 @@ export function ResourceTabs({
296295
chatId,
297296
resources,
298297
activeId,
299-
useFixedResourceToggle,
300298
previewMode,
301299
onCyclePreviewMode,
302300
actions,
@@ -310,7 +308,6 @@ export function ResourceTabs({
310308
addResource: onAddResource,
311309
removeResource: onRemoveResource,
312310
reorderResources: onReorderResources,
313-
collapseResource,
314311
} = useMothershipResources()
315312
const scrollNodeRef = useRef<HTMLDivElement>(null)
316313

@@ -618,29 +615,10 @@ export function ResourceTabs({
618615
'flex shrink-0 items-center border-[var(--border)] border-b',
619616
RESOURCE_HEADER_CLASSES.bar,
620617
RESOURCE_HEADER_CLASSES.startPadding,
621-
useFixedResourceToggle
622-
? RESOURCE_HEADER_CLASSES.fixedEndPadding
623-
: RESOURCE_HEADER_CLASSES.endPadding,
618+
RESOURCE_HEADER_CLASSES.endPadding,
624619
RESOURCE_TAB_GAP_CLASS
625620
)}
626621
>
627-
{!useFixedResourceToggle && (
628-
<Tooltip.Root>
629-
<Tooltip.Trigger asChild>
630-
<Button
631-
variant='subtle'
632-
onClick={collapseResource}
633-
className={RESOURCE_TAB_ICON_BUTTON_CLASS}
634-
aria-label='Collapse resource view'
635-
>
636-
<PanelLeft className={cn(RESOURCE_TAB_ICON_CLASS, '-scale-x-100')} />
637-
</Button>
638-
</Tooltip.Trigger>
639-
<Tooltip.Content side='bottom'>
640-
<p>Collapse</p>
641-
</Tooltip.Content>
642-
</Tooltip.Root>
643-
)}
644622
<div className={cn('flex min-w-0 flex-1 items-center', RESOURCE_TAB_GAP_CLASS)}>
645623
<div
646624
ref={scrollNodeRef}
@@ -697,15 +675,11 @@ export function ResourceTabs({
697675
{/* Offered before the chat exists too: a resource opened while composing
698676
the first prompt is context for that prompt, and gating on a chat id
699677
meant the panel could be opened but not filled. */}
700-
{useFixedResourceToggle ? (
701-
<div
702-
className={cn('flex', resources.length === 0 && RESOURCE_HEADER_CLASSES.emptyAddOffset)}
703-
>
704-
{addResourceDropdown}
705-
</div>
706-
) : (
707-
addResourceDropdown
708-
)}
678+
<div
679+
className={cn('flex', resources.length === 0 && RESOURCE_HEADER_CLASSES.emptyAddOffset)}
680+
>
681+
{addResourceDropdown}
682+
</div>
709683
</div>
710684
{(actions || (previewMode && onCyclePreviewMode)) && (
711685
<div className={cn('ml-auto flex shrink-0 items-center', RESOURCE_TAB_GAP_CLASS)}>

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ interface MothershipViewProps {
6565
resources: MothershipResource[]
6666
activeResourceId: string | null
6767
isCollapsed: boolean
68-
useFixedResourceToggle: boolean
6968
className?: string
7069
previewSession?: FilePreviewSession | null
7170
isAgentResponding?: boolean
@@ -83,7 +82,6 @@ export const MothershipView = memo(
8382
resources,
8483
activeResourceId,
8584
isCollapsed,
86-
useFixedResourceToggle,
8785
className,
8886
previewSession,
8987
isAgentResponding,
@@ -186,7 +184,6 @@ export const MothershipView = memo(
186184
chatId={chatId}
187185
resources={resources}
188186
activeId={active?.id ?? null}
189-
useFixedResourceToggle={useFixedResourceToggle}
190187
actions={
191188
active ? <ResourceActions workspaceId={workspaceId} resource={active} /> : null
192189
}

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

Lines changed: 18 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
useMemo,
1111
useRef,
1212
useState,
13-
useSyncExternalStore,
1413
} from 'react'
1514
import { Button, cn, toast } from '@sim/emcn'
1615
import { PanelLeft } from '@sim/emcn/icons'
@@ -27,7 +26,6 @@ import {
2726
LandingWorkflowSeedStorage,
2827
MothershipHandoffStorage,
2928
} from '@/lib/core/utils/browser-storage'
30-
import { isDesktopApp } from '@/lib/desktop'
3129
import {
3230
addMothershipContexts,
3331
MOTHERSHIP_SEND_MESSAGE_EVENT,
@@ -65,8 +63,6 @@ import type {
6563
} from './types'
6664

6765
const logger = createLogger('Home')
68-
const subscribeToDesktopApp = () => () => {}
69-
const getServerDesktopAppSnapshot = () => false
7066

7167
/**
7268
* The resource preview panel pulls in the file-viewer stack (rich-markdown
@@ -89,11 +85,6 @@ interface HomeProps {
8985

9086
export function Home({ chatId, userName, userId, tableViewsEnabled }: HomeProps) {
9187
useOAuthReturnRouter()
92-
const isDesktop = useSyncExternalStore(
93-
subscribeToDesktopApp,
94-
isDesktopApp,
95-
getServerDesktopAppSnapshot
96-
)
9788
const { workspaceId } = useParams<{ workspaceId: string }>()
9889
const router = useRouter()
9990
const queryClient = useQueryClient()
@@ -513,9 +504,7 @@ export function Home({ chatId, userName, userId, tableViewsEnabled }: HomeProps)
513504
className={cn(
514505
'absolute z-10',
515506
RESOURCE_HEADER_CLASSES.contentTop,
516-
isDesktop || isResourceCollapsed
517-
? RESOURCE_HEADER_CLASSES.adjacentEndPosition
518-
: RESOURCE_HEADER_CLASSES.endPosition
507+
RESOURCE_HEADER_CLASSES.adjacentEndPosition
519508
)}
520509
>
521510
<CreditsChip />
@@ -610,7 +599,6 @@ export function Home({ chatId, userName, userId, tableViewsEnabled }: HomeProps)
610599
resources={resources}
611600
activeResourceId={activeResourceId}
612601
isCollapsed={isResourceCollapsed}
613-
useFixedResourceToggle={isDesktop}
614602
previewSession={previewSession}
615603
isAgentResponding={isSending}
616604
genericResourceData={genericResourceData ?? undefined}
@@ -620,47 +608,24 @@ export function Home({ chatId, userName, userId, tableViewsEnabled }: HomeProps)
620608
</Suspense>
621609
</MothershipResourcesProvider>
622610

623-
{isDesktop ? (
624-
<div
625-
className={cn(
626-
'absolute top-0 z-30 flex items-center',
627-
RESOURCE_HEADER_CLASSES.controls,
628-
RESOURCE_HEADER_CLASSES.endPosition
629-
)}
611+
<div
612+
className={cn(
613+
'absolute top-0 z-30 flex items-center',
614+
RESOURCE_HEADER_CLASSES.controls,
615+
RESOURCE_HEADER_CLASSES.endPosition
616+
)}
617+
>
618+
<Button
619+
variant='ghost'
620+
size={null}
621+
type='button'
622+
onClick={isResourceCollapsed ? () => setIsResourceCollapsed(false) : collapseResource}
623+
className='size-[30px] rounded-[8px] hover-hover:bg-[var(--surface-active)]'
624+
aria-label={isResourceCollapsed ? 'Expand resource view' : 'Collapse resource view'}
630625
>
631-
<Button
632-
variant='ghost'
633-
size={null}
634-
type='button'
635-
onClick={isResourceCollapsed ? () => setIsResourceCollapsed(false) : collapseResource}
636-
className='size-[30px] rounded-[8px] hover-hover:bg-[var(--surface-active)]'
637-
aria-label={isResourceCollapsed ? 'Expand resource view' : 'Collapse resource view'}
638-
>
639-
<PanelLeft className='-scale-x-100 size-[16px] text-[var(--text-icon)]' />
640-
</Button>
641-
</div>
642-
) : (
643-
isResourceCollapsed && (
644-
<div
645-
className={cn(
646-
'absolute',
647-
RESOURCE_HEADER_CLASSES.contentTop,
648-
RESOURCE_HEADER_CLASSES.endPosition
649-
)}
650-
>
651-
<Button
652-
variant='ghost'
653-
size={null}
654-
type='button'
655-
onClick={() => setIsResourceCollapsed(false)}
656-
className='size-[30px] rounded-[8px] hover-hover:bg-[var(--surface-active)]'
657-
aria-label='Expand resource view'
658-
>
659-
<PanelLeft className='size-[16px] text-[var(--text-icon)]' />
660-
</Button>
661-
</div>
662-
)
663-
)}
626+
<PanelLeft className='-scale-x-100 size-[16px] text-[var(--text-icon)]' />
627+
</Button>
628+
</div>
664629
</div>
665630
)
666631
}

0 commit comments

Comments
 (0)