Move search bar state to persistent atom nanostore in scripts/stores, hide nav item links on desktop and wordmarks on mobile when search bar open to create space in UI

Author: webstackdev

_TODO.md

@@ -106,7 +106,6 @@ Maybe change the "ready..." in the hero to "get in touch..."
 
 ## Search Box
 
-1. Need to make sure we have an action to update the search index on content changes
 2. Need to get the "x" back to clear search terms
 3. Maybe need a 1px border
 4. Hide the nav link items on desktop and the company name is hidden on mobile when the search box is out
@@ -115,6 +114,8 @@ Maybe change the "ready..." in the hero to "get in touch..."
 7. Need to improve quality of search results in drop down box - maybe some description text for each item
 8. Style drop down box of search results from search box
 
+Title box - need to squish to 75% and have it absolute in place as you scroll down, go back to 100% when you scroll back up
+
 ## Image generation models
 
 - dall-e (OpenAI)

src/components/Brand/index.astro

@@ -10,7 +10,7 @@ import styles from './index.module.css'
 
 <a
   class:list={[
-    "flex items-stretch relative focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-visible:after:opacity-100 focus-visible:after:[inset:-6px] focus-visible:after:border-spotlight",
+    "flex items-stretch relative focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-visible:after:opacity-100 focus-visible:after:-inset-1.5 focus-visible:after:border-spotlight",
     styles.brandLink,
   ]}
   href="/"
@@ -20,7 +20,7 @@ import styles from './index.module.css'
   <span class="brand-logo">
     <Logo class="h-(--header-icon-size) w-(--header-icon-size) relative z-(--z-content-overlay)" />
   </span>
-  <span class="flex flex-col justify-between items-center ml-2 sm:ml-3">
+  <span class="flex flex-col justify-between items-center ml-2 sm:ml-3 group-data-[header-search-open=true]:hidden lg:group-data-[header-search-open=true]:flex">
     <span class="brand-wordmark-webstack">
       <WordmarkWebstack class="h-[calc(var(--header-icon-size)/2-0.3em)]" />
     </span>

src/components/Header/index.astro

@@ -60,7 +60,8 @@ const { path } = Astro.props
 {/* Header for all pages */}
 <header
   id="header"
-  class="flex flex-row items-center justify-between py-2 lg:py-3 relative"
+  data-header-search-open="false"
+  class="group flex flex-row items-center justify-between py-2 lg:py-3 relative"
   role="banner"
 >
   {/*- Element for animated background behind mobile navigation menu -*/}

src/components/Navigation/Menu.astro

@@ -37,6 +37,7 @@ const activeMenuItem = (url: string) => {
               'main-nav-item',
               styles.mainNavItem,
               'lg:relative',
+              'group-data-[header-search-open=true]:lg:hidden',
               ...activeMenuItem(navItem.url),
             ]}
             style={`--nav-item-delay: ${delaySeconds}s`}
@@ -50,7 +51,7 @@ const activeMenuItem = (url: string) => {
                 'lg:text-primary-offset lg:underline lg:decoration-dotted lg:decoration-2 lg:decoration-primary-offset lg:underline-offset-8',
                 'lg:hover:text-primary lg:hover:decoration-transparent',
                 'lg:focus-visible:text-primary lg:focus-visible:decoration-primary',
-                'lg:focus-visible:outline lg:focus-visible:outline-2 lg:focus-visible:outline-spotlight lg:focus-visible:outline-offset-4',
+                'lg:focus-visible:outline-2 lg:focus-visible:outline-spotlight lg:focus-visible:outline-offset-4',
                 styles.mainNavLink,
               ]}
             >

src/components/Search/SearchBar/client/index.ts

@@ -7,6 +7,12 @@ import { handleScriptError } from '@components/scripts/errors/handler'
 import { addScriptBreadcrumb } from '@components/scripts/errors'
 import { getSearchBarElements, getSearchBarOptionalElements } from './selectors'
 import type { SearchHit } from '@actions/search/@types'
+import {
+  closeHeaderSearch,
+  getHeaderSearchExpanded,
+  openHeaderSearch,
+  subscribeHeaderSearchExpanded,
+} from '@components/scripts/store'
 
 export class SearchBarElement extends LitElement {
   static registeredName = 'search-bar'
@@ -21,6 +27,7 @@ export class SearchBarElement extends LitElement {
   private isExpanded = true
 
   private isOutsideListenersAttached = false
+  private unsubscribeHeaderSearchExpanded: (() => void) | null = null
 
   private debounceHandle: ReturnType<typeof setTimeout> | null = null
   private latestRequestId = 0
@@ -32,6 +39,7 @@ export class SearchBarElement extends LitElement {
   override connectedCallback(): void {
     super.connectedCallback()
     this.cacheElements()
+    this.initHeaderExpandedState()
     this.attachListeners()
   }
 
@@ -41,6 +49,11 @@ export class SearchBarElement extends LitElement {
       this.debounceHandle = null
     }
 
+    if (this.unsubscribeHeaderSearchExpanded) {
+      this.unsubscribeHeaderSearchExpanded()
+      this.unsubscribeHeaderSearchExpanded = null
+    }
+
     this.detachOutsideListeners()
 
     super.disconnectedCallback()
@@ -57,7 +70,43 @@ export class SearchBarElement extends LitElement {
 
     this.toggleBtn = toggleBtn
     this.panel = panel
-    this.isExpanded = this.getIsExpandedFromDom()
+    this.isExpanded = this.toggleBtn ? getHeaderSearchExpanded() : this.getIsExpandedFromDom()
+  }
+
+  private initHeaderExpandedState(): void {
+    if (!this.toggleBtn) {
+      return
+    }
+
+    const query = this.getQuery()
+    const storeExpanded = getHeaderSearchExpanded()
+
+    // If the input is pre-populated, force-open so the user can see/edit it.
+    const desiredExpanded = query.length > 0 ? true : storeExpanded
+
+    if (desiredExpanded && !storeExpanded) {
+      openHeaderSearch()
+    }
+
+    if (!desiredExpanded && storeExpanded) {
+      closeHeaderSearch()
+    }
+
+    this.setExpandedState(desiredExpanded, { updateStore: false })
+
+    if (!this.unsubscribeHeaderSearchExpanded) {
+      this.unsubscribeHeaderSearchExpanded = subscribeHeaderSearchExpanded(nextExpanded => {
+        if (!this.toggleBtn) {
+          return
+        }
+
+        if (nextExpanded === this.isExpanded) {
+          return
+        }
+
+        this.setExpandedState(nextExpanded, { updateStore: false })
+      })
+    }
   }
 
   private getIsExpandedFromDom(): boolean {
@@ -101,9 +150,17 @@ export class SearchBarElement extends LitElement {
     }
   }
 
-  private setExpandedState(isExpanded: boolean): void {
+  private setExpandedState(isExpanded: boolean, { updateStore = true }: { updateStore?: boolean } = {}): void {
     this.isExpanded = isExpanded
 
+    if (updateStore && this.toggleBtn) {
+      if (isExpanded) {
+        openHeaderSearch()
+      } else {
+        closeHeaderSearch()
+      }
+    }
+
     if (this.toggleBtn) {
       this.toggleBtn.setAttribute('aria-expanded', isExpanded ? 'true' : 'false')
       this.toggleBtn.setAttribute('data-state', isExpanded ? 'open' : 'closed')

src/components/scripts/bootstrap/index.ts

@@ -8,6 +8,7 @@ import {
   initAnimationLifecycle,
   initConsentFromCookies,
   initConsentSideEffects,
+  initHeaderSearchSideEffects,
   exposeStoreActionsForTesting,
 } from '@components/scripts/store'
 import { SentryBootstrap } from '@components/scripts/sentry/client'
@@ -57,6 +58,10 @@ export class AppBootstrap {
       addScriptBreadcrumb({ scriptName: 'AppBootstrap', operation: 'initConsentSideEffects' })
       initConsentSideEffects()
 
+      // 3b. Setup header search UI side effects
+      addScriptBreadcrumb({ scriptName: 'AppBootstrap', operation: 'initHeaderSearchSideEffects' })
+      initHeaderSearchSideEffects()
+
       // 4. Expose limited store actions for Playwright-driven E2E tests
       exposeStoreActionsForTesting()
     } catch (error: unknown) {

src/components/scripts/store/__tests__/search.spec.ts

@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+/**
+ * Unit tests for header search state management
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { handleScriptError } from '@components/scripts/errors/handler'
+import {
+  __resetHeaderSearchForTests,
+  closeHeaderSearch,
+  getHeaderSearchExpanded,
+  initHeaderSearchSideEffects,
+  openHeaderSearch,
+  setHeaderSearchExpanded,
+  toggleHeaderSearch,
+  $headerSearchExpanded,
+} from '@components/scripts/store/search'
+
+vi.mock('@components/scripts/errors/handler', () => ({
+  handleScriptError: vi.fn(),
+}))
+
+describe('Header search store', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    document.body.innerHTML = ''
+    __resetHeaderSearchForTests()
+    vi.clearAllMocks()
+  })
+
+  it('defaults to collapsed', () => {
+    expect(getHeaderSearchExpanded()).toBe(false)
+  })
+
+  it('can open/close/toggle', () => {
+    openHeaderSearch()
+    expect(getHeaderSearchExpanded()).toBe(true)
+
+    closeHeaderSearch()
+    expect(getHeaderSearchExpanded()).toBe(false)
+
+    toggleHeaderSearch()
+    expect(getHeaderSearchExpanded()).toBe(true)
+  })
+
+  it('persists expanded state to localStorage', () => {
+    setHeaderSearchExpanded(true)
+    expect($headerSearchExpanded.get()).toBe(true)
+
+    // persistentAtom stores JSON strings for this store
+    expect(localStorage.getItem('headerSearchExpanded')).toBe('true')
+  })
+
+  it('updates #header data attribute via side effects', () => {
+    const header = document.createElement('header')
+    header.id = 'header'
+    document.body.appendChild(header)
+
+    initHeaderSearchSideEffects()
+    expect(header.getAttribute('data-header-search-open')).toBe('false')
+
+    openHeaderSearch()
+    expect(header.getAttribute('data-header-search-open')).toBe('true')
+
+    closeHeaderSearch()
+    expect(header.getAttribute('data-header-search-open')).toBe('false')
+  })
+
+  it('reports errors when side effects initialization fails', () => {
+    const error = new Error('listener failure')
+    const listenSpy = vi.spyOn($headerSearchExpanded, 'listen').mockImplementation(() => {
+      throw error
+    })
+
+    initHeaderSearchSideEffects()
+
+    expect(handleScriptError).toHaveBeenCalledWith(error, {
+      scriptName: 'search',
+      operation: 'initHeaderSearchSideEffects',
+    })
+
+    listenSpy.mockRestore()
+  })
+})

src/components/scripts/store/index.ts

@@ -106,6 +106,19 @@ export {
   type EmbedCacheState,
 } from './socialEmbeds'
 
+// Re-export header search state
+export {
+  $headerSearchExpanded, // only allowed to use in tests
+  __resetHeaderSearchForTests,
+  closeHeaderSearch,
+  getHeaderSearchExpanded,
+  initHeaderSearchSideEffects,
+  openHeaderSearch,
+  setHeaderSearchExpanded,
+  subscribeHeaderSearchExpanded,
+  toggleHeaderSearch,
+} from './search'
+
 /**
  * Expose a limited set of store actions during Playwright runs so E2E tests
  * can seed state without relying on private internals or DOM-only flows.