Add search functionality to Library (#85)

Issue #68 

Adds a search feature to the library page that allows users to find
sessions by title, description, instructor name, or category.

The search box appears in the navigation bar on desktop and as a
full-screen dialog on mobile. As users type, sessions are filtered in
real-time and displayed in a grid layout. When the search is active, the
featured carousel and other library sections are hidden to focus on
results.

### Video demo links
- [Desktop](https://cap.link/xme9607m1rwnd2h)
- [Mobile](https://cap.link/2s6dv5gp9jyr3e9)

### Screenshots

**Desktop – light mode**
<img width="3468" height="2298"
src="https://github.com/user-attachments/assets/2ccf2f37-87c6-4e2c-9c39-9fbe4f1d1df6"
/>

**Desktop – dark mode**
<img width="3468" height="2298"
src="https://github.com/user-attachments/assets/68419c27-4e70-495e-ae39-b91d7b7c8334"
/>

**Mobile – collapsed search box (default)**
<img width="380"
src="https://github.com/user-attachments/assets/d5af6a96-0f06-4d6e-83c3-35027d90b061"
/>

**Mobile – expanded search box**
<img width="380"
src="https://github.com/user-attachments/assets/37363af5-43a9-43c3-9bc1-824a76ef4023"
/>

### Changes
- Created reusable `Input` and `MaskedIcon` UI components
- Built `SearchBox` and `SearchResultsGrid` components for search
functionality
- Updated library controller to provide search icon asset
- Added search container to navigation bar via React portal
- Implemented mobile-responsive search dialog with keyboard navigation
- Added accessibility features including ARIA labels and screen reader
announcements
- Search filters across session title, description, creator, and
categories using multi-token matching

---
AI disclaimer: This PR was implemented with AI assistance (Claude Sonnet
4.5, gpt-5-codex, gpt-5-high) for code generation. All code was
self-reviewed and directed throughout the development process.

Author: gianfrancopiana

app/controllers/library_controller.rb

@@ -47,6 +47,7 @@ def index
         assets: {
           downloadIcon: view_context.asset_path("download.svg"),
           backIcon: view_context.asset_path("arrow-left.svg"),
+          searchIcon: view_context.asset_path("search.svg"),
         },
         featuredHeroImages: featured_hero_images,
         initialThumbnails: initial_thumbnails,
@@ -138,7 +139,8 @@ def library_nav_markup
         view_context.tag.span(class: "btn btn--reversed btn--faux room--current") do
           view_context.tag.h1("Library", class: "room__contents txt-medium overflow-ellipsis")
         end,
-        view_context.link_back
+        view_context.link_back,
+        view_context.tag.div("", id: "library-search-root", class: "flex w-full")
       ].compact
     ).to_s
   end

app/frontend/components/ui/input.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+import { MaskedIcon } from "./masked-icon"
+
+interface InputProps extends React.ComponentProps<"input"> {
+  icon?: ReactNode | string
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, icon, ...props }, ref) => {
+    const renderIcon = () => {
+      if (!icon) return null
+      if (typeof icon === "string") {
+        return <MaskedIcon src={icon} />
+      }
+      return icon
+    }
+
+    return (
+      <div className="relative flex w-full items-center pt-[1px]">
+        {icon ? (
+          <span className="text-muted-foreground pointer-events-none absolute left-3 inline-flex size-4 items-center justify-center">
+            {renderIcon()}
+          </span>
+        ) : null}
+        <input
+          ref={ref}
+          type={type}
+          data-slot="input"
+          className={cn(
+            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-background dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md px-3 py-1 text-base shadow-[0_0_0_1px_var(--control-border)] transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+            "focus:[box-shadow:0_0_0_1px_var(--color-selected-dark),0_0_0_var(--hover-size)_var(--color-selected-dark)!important] focus:[filter:var(--hover-filter)] focus:[--hover-color:var(--color-selected-dark)] focus-visible:ring-0",
+            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+            icon ? "pl-10" : undefined,
+            className,
+          )}
+          {...props}
+        />
+      </div>
+    )
+  },
+)
+
+Input.displayName = "Input"
+
+export { Input }

app/frontend/components/ui/masked-icon.tsx

@@ -0,0 +1,35 @@
+import { forwardRef } from "react"
+import { cn } from "@/lib/utils"
+
+interface MaskedIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+  src?: string
+  sizeClassName?: string
+}
+
+export const MaskedIcon = forwardRef<HTMLSpanElement, MaskedIconProps>(
+  ({ src, sizeClassName = "size-4", className, ...rest }, ref) => {
+    if (!src) return null
+
+    return (
+      <span
+        ref={ref}
+        aria-hidden
+        className={cn(sizeClassName, className)}
+        style={{
+          WebkitMaskImage: `url(${src})`,
+          maskImage: `url(${src})`,
+          WebkitMaskRepeat: "no-repeat",
+          maskRepeat: "no-repeat",
+          WebkitMaskSize: "contain",
+          maskSize: "contain",
+          WebkitMaskPosition: "center",
+          maskPosition: "center",
+          backgroundColor: "currentColor",
+        }}
+        {...rest}
+      />
+    )
+  },
+)
+
+MaskedIcon.displayName = "MaskedIcon"

app/frontend/pages/library/components/featured-carousel/featured-carousel.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useState } from "react"
+import type { HTMLAttributes } from "react"
 import { router } from "@inertiajs/react"
 
 import {
@@ -11,6 +12,7 @@ import {
 } from "@/components/ui/carousel"
 
 import type { LibrarySessionPayload } from "../../types"
+import { cn } from "@/lib/utils"
 import {
   useSlides,
   useCarouselState,
@@ -21,14 +23,16 @@ import { Slide } from "./slide"
 import { NavButtons } from "./nav-buttons"
 import { Indicators } from "./indicators"
 
-export interface FeaturedCarouselProps {
+export interface FeaturedCarouselProps extends HTMLAttributes<HTMLElement> {
   sessions: LibrarySessionPayload[]
   heroImagesById?: Record<string, string>
 }
 
 export function FeaturedCarousel({
   sessions,
   heroImagesById,
+  className,
+  ...sectionProps
 }: FeaturedCarouselProps) {
   const [api, setApi] = useState<CarouselApi>()
 
@@ -80,7 +84,11 @@ export function FeaturedCarousel({
       onBlur={onRegionBlur}
       onMouseEnter={() => autoplay.pause()}
       onMouseLeave={() => autoplay.resume()}
-      className="relative mx-auto w-full max-w-7xl px-8 pt-8 select-none focus-visible:ring-2 focus-visible:ring-[#00ADEF] focus-visible:ring-offset-2 focus-visible:outline-none sm:px-12 md:px-16 lg:px-20 lg:pt-4 xl:pt-0 dark:focus-visible:ring-[#00ADEF]"
+      className={cn(
+        "relative mx-auto w-full max-w-7xl px-8 pt-8 select-none focus-visible:ring-2 focus-visible:ring-[#00ADEF] focus-visible:ring-offset-2 focus-visible:outline-none sm:px-12 md:px-16 lg:px-20 lg:pt-4 xl:pt-0 dark:focus-visible:ring-[#00ADEF]",
+        className,
+      )}
+      {...sectionProps}
     >
       <div className="relative">
         <Carousel

app/frontend/pages/library/components/search/index.ts

@@ -0,0 +1,4 @@
+export { SearchBox } from "./search_box"
+export type { SearchBoxProps } from "./search_box"
+export { SearchResultsGrid } from "./search_results_grid"
+export type { SearchResultsGridProps } from "./search_results_grid"

app/frontend/pages/library/components/search/search_box.tsx

@@ -0,0 +1,67 @@
+import { forwardRef, type ChangeEvent, type FormEvent } from "react"
+
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+
+export interface SearchBoxProps {
+  iconSrc?: string
+  value: string
+  onChange: (value: string) => void
+  onSubmit?: (value: string) => void
+  containerClassName?: string
+  inputId?: string
+  autoFocus?: boolean
+}
+
+export const SearchBox = forwardRef<HTMLInputElement, SearchBoxProps>(
+  function SearchBox(
+    {
+      iconSrc,
+      value,
+      onChange,
+      onSubmit,
+      containerClassName,
+      inputId,
+      autoFocus,
+    },
+    ref,
+  ) {
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+      onChange(event.target.value)
+    }
+
+    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+      onSubmit?.(value)
+    }
+
+    return (
+      <form
+        role="search"
+        className={cn(
+          "relative mr-13 ml-auto flex w-full max-w-xs lg:mr-18",
+          containerClassName,
+        )}
+        onSubmit={handleSubmit}
+      >
+        <div className="w-full">
+          <label className="sr-only" htmlFor={inputId ?? "library-search"}>
+            Search library
+          </label>
+          <Input
+            id={inputId ?? "library-search"}
+            type="search"
+            icon={iconSrc}
+            placeholder="Search sessions, instructors, topics"
+            aria-label="Search library"
+            autoComplete="off"
+            value={value}
+            onChange={handleChange}
+            ref={ref}
+            autoFocus={autoFocus}
+          />
+        </div>
+      </form>
+    )
+  },
+)

app/frontend/pages/library/components/search/search_results_grid.tsx

@@ -0,0 +1,68 @@
+import VideoCard from "../video_card"
+import type { LibrarySessionPayload, VimeoThumbnailPayload } from "../../types"
+
+export interface SearchResultsGridProps {
+  sessions: LibrarySessionPayload[]
+  thumbnails?: Record<string, VimeoThumbnailPayload>
+  backIcon?: string
+}
+
+export function SearchResultsGrid({
+  sessions,
+  thumbnails,
+  backIcon,
+}: SearchResultsGridProps) {
+  const resultsCount = sessions.length
+
+  if (resultsCount === 0) {
+    return (
+      <>
+        <div
+          className="sr-only"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          No sessions found. Try a different search.
+        </div>
+        <div className="text-muted-foreground mx-auto max-w-6xl px-6 pt-4 text-center text-base">
+          No sessions found. Try a different search.
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <div
+        className="sr-only"
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        {resultsCount === 1
+          ? "1 session found"
+          : `${resultsCount} sessions found`}
+      </div>
+      <div className="mx-auto w-full max-w-7xl px-6 pt-4">
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {sessions.map((session) => (
+            <div
+              key={session.id}
+              className="flex"
+              style={{ "--shelf-card-w": "100%" } as React.CSSProperties}
+            >
+              <VideoCard
+                session={session}
+                backIcon={backIcon}
+                thumbnail={thumbnails?.[session.vimeoId]}
+                showProgress={false}
+                persistPreview={false}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}