fix(search): tighten draft recovery and shared sidebar behavior

Author: waleedlatif1

apps/sim/app/o/[organizationId]/components/search-input-bar.tsx

@@ -81,7 +81,7 @@ export function SearchInputBar({
     <div
       ref={scrollerRef}
       className={cn(
-        'relative min-h-[46px] w-full rounded-[23px] border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
+        'relative min-h-[46px] w-full rounded-full border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
         (hasAttachments || expanded) && 'rounded-2xl',
         floating && 'shadow-ambient'
       )}

apps/sim/app/o/[organizationId]/home/organization-home.tsx

@@ -11,7 +11,10 @@ import { getWorkspaceHostContextContract } from '@/lib/api/contracts/workspaces'
 import { useSession } from '@/lib/auth/auth-client'
 import { getDeploymentShape } from '@/lib/core/config/deployment-shape'
 import { MothershipHandoffStorage } from '@/lib/core/utils/browser-storage'
-import { getMothershipAttachmentPreviewUrl } from '@/lib/mothership/chat/attachment-preview'
+import {
+  getMothershipAttachmentPreviewUrl,
+  getMothershipAttachmentUrl,
+} from '@/lib/mothership/chat/attachment-preview'
 import { createSearchResource } from '@/lib/mothership/resources/search'
 import { Composer } from '@/app/o/[organizationId]/home/components/composer'
 import { GetStarted } from '@/app/o/[organizationId]/home/components/get-started'
@@ -350,7 +353,10 @@ function OrganizationHomeContent({
                   name: file.filename,
                   type: file.media_type,
                   size: file.size,
-                  path: file.path || getMothershipAttachmentPreviewUrl(file) || '',
+                  path:
+                    file.path ||
+                    getMothershipAttachmentPreviewUrl(file) ||
+                    getMothershipAttachmentUrl(file),
                   previewUrl: getMothershipAttachmentPreviewUrl(file),
                   uploading: false,
                 }))

apps/sim/app/o/[organizationId]/search/search.test.tsx

@@ -212,6 +212,52 @@ describe('organization Search query navigation', () => {
     expect(mocks.urlUpdate).not.toHaveBeenCalled()
   })
 
+  it('keeps edits for separate committed queries across storage rehydration', async () => {
+    await render('?q=Orion')
+    await editDraft('Orion follow-up')
+    await render('?q=Vega')
+    await editDraft('Vega follow-up')
+    await act(async () => root.unmount())
+    const saved = localStorage.getItem('mothership-drafts:v1')!
+    useMothershipDraftsStore.setState({ drafts: {} })
+    localStorage.setItem('mothership-drafts:v1', saved)
+    await useMothershipDraftsStore.persist.rehydrate()
+    root = createRoot(container)
+
+    await render('?q=Orion')
+    expect(searchInput().value).toBe('Orion follow-up')
+    await render('?q=Vega')
+    expect(searchInput().value).toBe('Vega follow-up')
+    await render('')
+    expect(searchInput().value).toBe('Vega follow-up')
+  })
+
+  it('submits one query without clearing another query’s latest draft', async () => {
+    await render('?q=Orion')
+    await editDraft('Orion follow-up')
+    await render('?q=Vega')
+    await editDraft('Vega follow-up')
+    await render('?q=Orion')
+    await act(async () =>
+      searchInput().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+    )
+    expectVisibleQuery('Orion follow-up')
+    await render('')
+    expect(searchInput().value).toBe('Vega follow-up')
+    await editDraft('Vega revised')
+    await render('?q=Vega')
+    expect(searchInput().value).toBe('Vega revised')
+    await render('')
+    await act(async () =>
+      searchInput().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+    )
+    expectVisibleQuery('Vega revised')
+    await render('?q=Vega')
+    expectVisibleQuery('Vega')
+    await render('')
+    expect(searchInput().value).toBe('')
+  })
+
   it.each(['Enter', 'button'] as const)(
     'keeps the draft out of Search until %s commits it and restores input focus afterward',
     async (submit) => {

apps/sim/app/o/[organizationId]/search/search.tsx

@@ -34,16 +34,24 @@ interface SearchFieldProps {
 function SearchField({ userId, initialValue, onSubmit }: SearchFieldProps) {
   const inputRef = useRef<HTMLTextAreaElement>(null)
   const { organization } = useOrganizationContext()
-  const draftKey = `${userId}:organization:${organization.id}:search`
+  const latestDraftKey = `${userId}:organization:${organization.id}:search`
+  const latestDraft = useMothershipDraftsStore((state) => state.drafts[latestDraftKey])
+  const ownerQuery = initialValue || latestDraft?.searchQuery || ''
+  const draftKey = `${latestDraftKey}:query:${encodeURIComponent(ownerQuery)}`
   const draft = useMothershipDraftsStore((state) => state.drafts[draftKey])
   const value =
-    draft && (!initialValue || draft.searchQuery === initialValue) ? draft.text : initialValue
+    draft?.text ?? (latestDraft?.searchQuery === ownerQuery ? latestDraft.text : initialValue)
   const setValue = (text: string) => {
-    useMothershipDraftsStore.getState().setDraft(draftKey, { text, searchQuery: initialValue })
+    const { setDraft } = useMothershipDraftsStore.getState()
+    const payload = { text, searchQuery: ownerQuery }
+    setDraft(draftKey, payload)
+    setDraft(latestDraftKey, payload)
   }
   const submit = () => {
     if (!value.trim()) return
-    useMothershipDraftsStore.getState().clearDraft(draftKey)
+    const { clearDraft } = useMothershipDraftsStore.getState()
+    clearDraft(draftKey)
+    if (latestDraft?.searchQuery === ownerQuery) clearDraft(latestDraftKey)
     onSubmit(value)
   }
   const voice = useVoiceInput({

apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/use-sidebar-peek.test.tsx

@@ -45,7 +45,7 @@ function stubRect(
 }
 
 interface Harness {
-  state: () => { isPeekActive: boolean; isPeekOpen: boolean }
+  state: () => { isPeekActive: boolean }
   card: () => HTMLElement
   trigger: () => HTMLElement
   triggerEnter: () => void
@@ -66,13 +66,13 @@ function renderPeek(initialEnabled: boolean): Harness {
   document.body.appendChild(container)
   const root: Root = createRoot(container)
 
-  let latest = { isPeekActive: false, isPeekOpen: false }
+  let latest = { isPeekActive: false }
   let onTriggerEnter = () => {}
   let onTriggerLeave = () => {}
 
   function Probe({ enabled, dismissed }: { enabled: boolean; dismissed: boolean }) {
     const peek = useSidebarPeek(enabled, dismissed)
-    latest = { isPeekActive: peek.isPeekActive, isPeekOpen: peek.isPeekOpen }
+    latest = { isPeekActive: peek.isPeekActive }
     onTriggerEnter = peek.onTriggerEnter
     onTriggerLeave = peek.onTriggerLeave
     return (
@@ -180,7 +180,6 @@ describe('useSidebarPeek', () => {
       vi.advanceTimersByTime(1)
     })
     expect(active.state().isPeekActive).toBe(true)
-    expect(active.state().isPeekOpen).toBe(true)
   })
 
   it('does not open when the pointer leaves before the dwell elapses', () => {
@@ -216,7 +215,7 @@ describe('useSidebarPeek', () => {
       vi.advanceTimersByTime(CLOSE_DELAY_MS * 3)
     })
 
-    expect(active.state().isPeekOpen).toBe(true)
+    expect(active.state().isPeekActive).toBe(true)
   })
 
   it('does not force layout while the pointer moves across sidebar content', () => {
@@ -232,7 +231,7 @@ describe('useSidebarPeek', () => {
 
     expect(cardMeasure).not.toHaveBeenCalled()
     expect(triggerMeasure).not.toHaveBeenCalled()
-    expect(active.state().isPeekOpen).toBe(true)
+    expect(active.state().isPeekActive).toBe(true)
   })
 
   it('stays open while the pointer is still over the toggle that opened it', () => {
@@ -244,7 +243,7 @@ describe('useSidebarPeek', () => {
       vi.advanceTimersByTime(CLOSE_DELAY_MS * 3)
     })
 
-    expect(active.state().isPeekOpen).toBe(true)
+    expect(active.state().isPeekActive).toBe(true)
   })
 
   it('stays open while the pointer is over a portalled popper', async () => {
@@ -258,20 +257,19 @@ describe('useSidebarPeek', () => {
       vi.advanceTimersByTime(CLOSE_DELAY_MS * 3)
     })
 
-    expect(active.state().isPeekOpen).toBe(true)
+    expect(active.state().isPeekActive).toBe(true)
   })
 
   it('retracts after the grace period once the pointer moves to content', () => {
     active = renderPeek(true)
     openPeek(active)
 
     movePointerTo(POINT.onContent)
-    expect(active.state().isPeekOpen).toBe(true)
+    expect(active.state().isPeekActive).toBe(true)
 
     act(() => {
       vi.advanceTimersByTime(CLOSE_DELAY_MS)
     })
-    expect(active.state().isPeekOpen).toBe(false)
     expect(active.state().isPeekActive).toBe(false)
   })
 
@@ -284,7 +282,7 @@ describe('useSidebarPeek', () => {
       vi.advanceTimersByTime(CLOSE_DELAY_MS * 2)
     })
 
-    expect(active.state().isPeekOpen).toBe(true)
+    expect(active.state().isPeekActive).toBe(true)
   })
 
   it('cancels a pending retraction when the pointer returns', () => {
@@ -300,7 +298,7 @@ describe('useSidebarPeek', () => {
       vi.advanceTimersByTime(CLOSE_DELAY_MS * 2)
     })
 
-    expect(active.state().isPeekOpen).toBe(true)
+    expect(active.state().isPeekActive).toBe(true)
   })
 
   it('does not open on hover while a modal is already open', () => {
@@ -337,9 +335,9 @@ describe('useSidebarPeek', () => {
     expect(active.state().isPeekActive).toBe(false)
 
     act(() => active?.triggerEnter())
-    expect(active.state().isPeekOpen).toBe(false)
+    expect(active.state().isPeekActive).toBe(false)
     act(() => vi.advanceTimersByTime(OPEN_DELAY_MS))
-    expect(active.state().isPeekOpen).toBe(true)
+    expect(active.state().isPeekActive).toBe(true)
   })
 
   it('retracts when a modal opens, even with the pointer inside', () => {
@@ -349,7 +347,7 @@ describe('useSidebarPeek', () => {
 
     active.setDismissed(true)
 
-    expect(active.state().isPeekOpen).toBe(false)
+    expect(active.state().isPeekActive).toBe(false)
   })
 
   it('keeps the peek open while the pointer is over a non-modal popper', async () => {
@@ -362,7 +360,7 @@ describe('useSidebarPeek', () => {
       vi.advanceTimersByTime(CLOSE_DELAY_MS * 2)
     })
 
-    expect(active.state().isPeekOpen).toBe(true)
+    expect(active.state().isPeekActive).toBe(true)
   })
 
   /**
@@ -385,7 +383,7 @@ describe('useSidebarPeek', () => {
       vi.advanceTimersByTime(CLOSE_DELAY_MS)
     })
 
-    expect(active.state().isPeekOpen).toBe(false)
+    expect(active.state().isPeekActive).toBe(false)
   })
 
   it('leaves Escape to an open popper rather than retracting', async () => {
@@ -402,7 +400,7 @@ describe('useSidebarPeek', () => {
       document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
     })
 
-    expect(active.state().isPeekOpen).toBe(true)
+    expect(active.state().isPeekActive).toBe(true)
   })
 
   it('retracts on Escape when a popper is only animating closed', async () => {
@@ -417,7 +415,7 @@ describe('useSidebarPeek', () => {
       document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
     })
 
-    expect(active.state().isPeekOpen).toBe(false)
+    expect(active.state().isPeekActive).toBe(false)
   })
 
   it('retracts on Escape', () => {
@@ -428,7 +426,7 @@ describe('useSidebarPeek', () => {
       document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
     })
 
-    expect(active.state().isPeekOpen).toBe(false)
+    expect(active.state().isPeekActive).toBe(false)
   })
 
   it('drops the peek immediately when it stops being enabled', () => {
@@ -437,7 +435,6 @@ describe('useSidebarPeek', () => {
 
     active.setEnabled(false)
 
-    expect(active.state().isPeekOpen).toBe(false)
     expect(active.state().isPeekActive).toBe(false)
   })
 
@@ -454,6 +451,5 @@ describe('useSidebarPeek', () => {
     })
 
     expect(active.state().isPeekActive).toBe(true)
-    expect(active.state().isPeekOpen).toBe(true)
   })
 })

apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/use-sidebar-peek.ts

@@ -68,8 +68,6 @@ function containsPoint(element: Element | null, x: number, y: number, pad: numbe
 export interface SidebarPeekResult {
   /** Card is mounted as a floating overlay — drives positioning, chrome, and the expanded width. */
   isPeekActive: boolean
-  /** Whether the floating card is visible. */
-  isPeekOpen: boolean
   /** Attach to the floating card so the pointer hit-test can recognise it. */
   cardRef: React.RefObject<HTMLDivElement | null>
   /**
@@ -212,7 +210,6 @@ export function useSidebarPeek(enabled: boolean, dismissed = false): SidebarPeek
 
   return {
     isPeekActive: isPeekVisible,
-    isPeekOpen: isPeekVisible,
     cardRef,
     triggerRef,
     onTriggerEnter,

apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx

@@ -9,6 +9,8 @@ import { getDesktopBridge } from '@/lib/desktop'
 import { SidebarChromeProvider } from '@/app/workspace/[workspaceId]/components/workspace-chrome/sidebar-chrome-context'
 import { useSidebarPeek } from '@/app/workspace/[workspaceId]/components/workspace-chrome/use-sidebar-peek'
 import { SidebarTooltip } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip'
+import { SIDEBAR_NO_MOTION_CLASS } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
+import { useSidebarWidth } from '@/hooks/use-sidebar-width'
 import { useFullscreenOriginStore } from '@/stores/fullscreen-origin'
 import { useSearchModalStore } from '@/stores/modals/search/store'
 import { useSidebarStore } from '@/stores/sidebar/store'
@@ -33,12 +35,10 @@ const FULLSCREEN_SUFFIXES = ['/upgrade'] as const
  * still bounds itself; see the `[data-peek]` rule in `globals.css`.
  *
  * `w-auto` shrink-wraps the inner shell, which `[data-peek]` has already put at the
- * expanded width. It must not be a length: `width` cannot interpolate to or from
- * `auto`, so entering and leaving the peek snap instead of animating — otherwise the
- * card widens as it appears and leaves a shrinking ghost on retract.
+ * expanded width.
  */
 const PEEK_CARD_CHROME =
-  'absolute top-[var(--desktop-title-bar-height)] left-2 z-[var(--z-modal)] flex max-h-[calc(100%-var(--desktop-title-bar-height)-8px)] w-auto flex-col origin-top-left rounded-lg border border-[var(--border)]'
+  'absolute top-[var(--desktop-title-bar-height)] left-2 z-[var(--z-modal)] flex max-h-[calc(100%-var(--desktop-title-bar-height)-8px)] w-auto flex-col rounded-lg border border-[var(--border)]'
 
 /**
  * The divider between the rail and the content pane, dropped when there is no rail
@@ -204,10 +204,7 @@ export function WorkspaceChrome({
     isSearchModalOpen
   )
 
-  // Hydrate the persisted width before paint (collapse comes from the cookie/prop).
-  useLayoutEffect(() => {
-    void useSidebarStore.persist.rehydrate()
-  }, [])
+  useSidebarWidth()
 
   // Remember the last non-fullscreen page so a fullscreen route's Back control
   // can return there, deterministically and for any trigger.
@@ -277,24 +274,6 @@ export function WorkspaceChrome({
     }
   }, [])
 
-  // Re-clamp the width when the window shrinks below what the persisted width
-  // allows, so the sidebar can never grow wider than the viewport permits.
-  useEffect(() => {
-    let rafId: number | null = null
-    const onResize = () => {
-      if (rafId !== null) return
-      rafId = requestAnimationFrame(() => {
-        rafId = null
-        syncSidebarWidth()
-      })
-    }
-    window.addEventListener('resize', onResize)
-    return () => {
-      if (rafId !== null) cancelAnimationFrame(rafId)
-      window.removeEventListener('resize', onResize)
-    }
-  }, [syncSidebarWidth])
-
   return (
     <div
       className='desktop-workspace-window-frame relative flex min-h-0 flex-1'
@@ -310,7 +289,8 @@ export function WorkspaceChrome({
       <div
         ref={cardRef}
         className={cn(
-          'sidebar-shell-outer shrink-0 overflow-hidden [&_*]:animate-none! [&_*]:transition-none!',
+          'sidebar-shell-outer shrink-0 overflow-hidden',
+          SIDEBAR_NO_MOTION_CLASS,
           isPeekActive ? PEEK_CARD_CHROME : isFullscreen ? 'w-0' : 'w-[var(--sidebar-width)]'
         )}
         data-collapsed={isCollapsed || undefined}