Extract vendor page subcomponents; structured Directus errors

Split the 316-line vendors index into VendorToolbar, VendorGrid,
VendorList, and PerPageSelector under components/vendors/. Page now
owns only search-param state and query orchestration.

Replace generic Error throws in lib/directus.ts with a DirectusError
class carrying status, statusText, collection, url, and parsed body.
Surface useLocalStorage read/write failures via console.warn instead
of swallowing them.

frontend/src/components/vendors/per-page-selector.tsx

@@ -0,0 +1,37 @@
+import { Button } from '~/components/ui/button'
+import { cn } from '~/lib/utils'
+
+type Props = {
+  value: number
+  options?: readonly number[]
+  onChange: (value: number) => void
+}
+
+const DEFAULT_OPTIONS = [12, 24, 48] as const
+
+export function PerPageSelector({ value, options = DEFAULT_OPTIONS, onChange }: Props) {
+  return (
+    <div className="mt-5 flex items-center justify-center gap-2">
+      <span className="text-sm">Results per page:</span>
+      <div className="inline-flex rounded-md border">
+        {options.map((n, i) => (
+          <Button
+            key={n}
+            variant={value === n ? 'secondary' : 'ghost'}
+            size="sm"
+            disabled={value === n}
+            onClick={() => onChange(n)}
+            className={cn(
+              'rounded-none',
+              i === 0 && 'rounded-l-md',
+              i === options.length - 1 && 'rounded-r-md',
+              i > 0 && 'border-l',
+            )}
+          >
+            {n}
+          </Button>
+        ))}
+      </div>
+    </div>
+  )
+}

frontend/src/components/vendors/types.ts

@@ -0,0 +1,8 @@
+export type VendorLayout = 'GRID' | 'LIST'
+
+export function truncateDescription(desc: string | null | undefined): string {
+  if (!desc) return ''
+  const head = desc.substring(0, 80)
+  const end = head.lastIndexOf(' ')
+  return desc.substring(0, end > 0 ? end : head.length) + ' …'
+}

frontend/src/components/vendors/vendor-grid.tsx

@@ -0,0 +1,53 @@
+import { Link } from '@tanstack/react-router'
+
+import { Card, CardContent } from '~/components/ui/card'
+import { Skeleton } from '~/components/ui/skeleton'
+import { assetUrl } from '~/lib/directus'
+import type { VendorListItem } from '~/lib/types'
+
+import { truncateDescription } from './types'
+
+type Props = {
+  vendors: VendorListItem[]
+  isLoading: boolean
+  perPage: number
+}
+
+export function VendorGrid({ vendors, isLoading, perPage }: Props) {
+  return (
+    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      {isLoading
+        ? Array.from({ length: perPage }).map((_, k) => (
+            <Card key={k}>
+              <Skeleton className="h-40 rounded-none" />
+              <CardContent className="pt-4">
+                <Skeleton className="mb-2 h-6" />
+                <Skeleton className="mb-1 h-4" />
+                <Skeleton className="h-4" />
+              </CardContent>
+            </Card>
+          ))
+        : vendors.map((v) => (
+            <Card key={v.id} className="group relative hover:border-primary/40">
+              <img
+                src={assetUrl(v.logo, 'logo-card')}
+                alt={v.name}
+                width={250}
+                height={150}
+                className="h-40 w-full rounded-t-lg bg-white object-contain"
+              />
+              <CardContent className="pt-4">
+                <Link
+                  to="/vendors/$slug"
+                  params={{ slug: v.slug }}
+                  className="mb-2 block text-base font-extrabold after:absolute after:inset-0"
+                >
+                  {v.name}
+                </Link>
+                <p className="text-sm text-muted-foreground">{truncateDescription(v.description)}</p>
+              </CardContent>
+            </Card>
+          ))}
+    </div>
+  )
+}

frontend/src/components/vendors/vendor-list.tsx

@@ -0,0 +1,57 @@
+import { Link } from '@tanstack/react-router'
+
+import { Skeleton } from '~/components/ui/skeleton'
+import { assetUrl } from '~/lib/directus'
+import type { VendorListItem } from '~/lib/types'
+
+import { truncateDescription } from './types'
+
+type Props = {
+  vendors: VendorListItem[]
+  isLoading: boolean
+  perPage: number
+}
+
+export function VendorList({ vendors, isLoading, perPage }: Props) {
+  return (
+    <div className="overflow-hidden rounded-md border">
+      <table className="w-full caption-bottom text-sm">
+        <tbody>
+          {isLoading
+            ? Array.from({ length: perPage }).map((_, k) => (
+                <tr key={k} className="border-b">
+                  <td className="w-[10%] p-3">
+                    <Skeleton className="h-12 w-12" />
+                  </td>
+                  <td className="w-[30%] p-3">
+                    <Skeleton className="h-6" />
+                  </td>
+                  <td className="w-[60%] p-3">
+                    <Skeleton className="h-6" />
+                  </td>
+                </tr>
+              ))
+            : vendors.map((v) => (
+                <tr key={v.id} className="border-b last:border-0 hover:bg-accent/50">
+                  <td className="w-[10%] p-3 align-middle">
+                    <img
+                      src={assetUrl(v.logo, 'logo-card')}
+                      alt={v.name}
+                      className="h-12 w-12 rounded-md bg-white object-contain"
+                    />
+                  </td>
+                  <td className="w-[30%] p-3 align-middle font-medium">
+                    <Link to="/vendors/$slug" params={{ slug: v.slug }} className="hover:underline">
+                      {v.name}
+                    </Link>
+                  </td>
+                  <td className="w-[60%] p-3 align-middle text-muted-foreground">
+                    {truncateDescription(v.description)}
+                  </td>
+                </tr>
+              ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

frontend/src/components/vendors/vendor-toolbar.tsx

@@ -0,0 +1,113 @@
+import { Check, Filter, FilterX, LayoutGrid, List, Loader2, Search, X } from 'lucide-react'
+
+import { Button } from '~/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu'
+import { Input } from '~/components/ui/input'
+import type { Category } from '~/lib/types'
+
+import type { VendorLayout } from './types'
+
+type Props = {
+  searchInput: string
+  onSearchInput: (value: string) => void
+  onSearchClear: () => void
+  isFetching: boolean
+  categories: Category[]
+  category: string
+  onCategoryChange: (slug: string | undefined) => void
+  layout: VendorLayout
+  onLayoutChange: (layout: VendorLayout) => void
+}
+
+export function VendorToolbar({
+  searchInput,
+  onSearchInput,
+  onSearchClear,
+  isFetching,
+  categories,
+  category,
+  onCategoryChange,
+  layout,
+  onLayoutChange,
+}: Props) {
+  return (
+    <div className="mb-5 flex flex-col items-stretch gap-4 md:flex-row md:items-center md:justify-between">
+      <h1 className="text-2xl font-bold">Vendors</h1>
+      <div className="flex h-9 items-center justify-center">
+        {isFetching && <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />}
+      </div>
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="relative">
+          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            className="pl-9 pr-9"
+            placeholder="Search vendors"
+            value={searchInput}
+            onChange={(e) => onSearchInput(e.target.value.toLowerCase())}
+          />
+          {searchInput && (
+            <button
+              type="button"
+              aria-label="Clear search"
+              onClick={onSearchClear}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="icon" aria-label="Filter by category">
+              {category ? <FilterX /> : <Filter />}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {categories.map((cat) => (
+              <DropdownMenuItem
+                key={cat.slug}
+                disabled={category === cat.slug}
+                onSelect={() => onCategoryChange(cat.slug)}
+              >
+                {category === cat.slug && <Check className="h-4 w-4" />}
+                {cat.name}
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onSelect={() => onCategoryChange(undefined)}>Clear</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <div className="inline-flex rounded-md border">
+          <Button
+            variant={layout === 'GRID' ? 'secondary' : 'ghost'}
+            size="icon"
+            className="rounded-r-none"
+            onClick={() => onLayoutChange('GRID')}
+            aria-label="Grid layout"
+            disabled={layout === 'GRID'}
+          >
+            <LayoutGrid />
+          </Button>
+          <Button
+            variant={layout === 'LIST' ? 'secondary' : 'ghost'}
+            size="icon"
+            className="rounded-l-none border-l"
+            onClick={() => onLayoutChange('LIST')}
+            aria-label="List layout"
+            disabled={layout === 'LIST'}
+          >
+            <List />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/hooks/use-local-storage.ts

@@ -6,7 +6,8 @@ export function useLocalStorage<T>(key: string, initialValue: T): [T, (v: T) =>
     try {
       const raw = window.localStorage.getItem(key)
       return raw != null ? (JSON.parse(raw) as T) : initialValue
-    } catch {
+    } catch (err) {
+      console.warn(`useLocalStorage: failed to read "${key}"`, err)
       return initialValue
     }
   })
@@ -14,8 +15,8 @@ export function useLocalStorage<T>(key: string, initialValue: T): [T, (v: T) =>
   useEffect(() => {
     try {
       window.localStorage.setItem(key, JSON.stringify(value))
-    } catch {
+    } catch (err) {
-      /* storage unavailable */
+      console.warn(`useLocalStorage: failed to write "${key}"`, err)
     }
   }, [key, value])
 

frontend/src/lib/directus.ts

@@ -20,6 +20,30 @@ export type DirectusQuery = {
   meta?: string[]
 }
 
+export class DirectusError extends Error {
+  readonly status: number
+  readonly statusText: string
+  readonly collection: string
+  readonly url: string
+  readonly body: unknown
+
+  constructor(args: {
+    status: number
+    statusText: string
+    collection: string
+    url: string
+    body: unknown
+  }) {
+    super(`Directus ${args.status} ${args.statusText} on /items/${args.collection}`)
+    this.name = 'DirectusError'
+    this.status = args.status
+    this.statusText = args.statusText
+    this.collection = args.collection
+    this.url = args.url
+    this.body = args.body
+  }
+}
+
 function buildUrl(collection: string, q: DirectusQuery = {}): string {
   const url = new URL(`${DIRECTUS_URL}/items/${collection}`)
   for (const field of q.fields ?? []) url.searchParams.append('fields[]', field)
@@ -31,13 +55,32 @@ function buildUrl(collection: string, q: DirectusQuery = {}): string {
   return url.toString()
 }
 
+async function fetchOrThrow(collection: string, url: string): Promise<unknown> {
+  const res = await fetch(url)
+  if (!res.ok) {
+    const body = await res.text().catch(() => '')
+    let parsed: unknown = body
+    try {
+      parsed = body ? JSON.parse(body) : ''
+    } catch {
+      // body wasn't JSON; keep raw text
+    }
+    throw new DirectusError({
+      status: res.status,
+      statusText: res.statusText,
+      collection,
+      url,
+      body: parsed,
+    })
+  }
+  return res.json()
+}
+
 export async function directusList<T>(
   collection: string,
   q: DirectusQuery = {},
 ): Promise<DirectusListResponse<T>> {
-  const res = await fetch(buildUrl(collection, q))
+  return (await fetchOrThrow(collection, buildUrl(collection, q))) as DirectusListResponse<T>
-  if (!res.ok) throw new Error(`Directus error ${res.status} on /items/${collection}`)
-  return (await res.json()) as DirectusListResponse<T>
 }
 
 export async function directusOne<T>(collection: string, q: DirectusQuery = {}): Promise<T | undefined> {
@@ -46,11 +89,7 @@ export async function directusOne<T>(collection: string, q: DirectusQuery = {}):
 }
 
 export async function directusSingleton<T>(collection: string, q: DirectusQuery = {}): Promise<T> {
-  const url = new URL(`${DIRECTUS_URL}/items/${collection}`)
+  const { data } = (await fetchOrThrow(collection, buildUrl(collection, q))) as DirectusItemResponse<T>
-  for (const field of q.fields ?? []) url.searchParams.append('fields[]', field)
-  const res = await fetch(url.toString())
-  if (!res.ok) throw new Error(`Directus error ${res.status} on /items/${collection}`)
-  const { data } = (await res.json()) as DirectusItemResponse<T>
   return data
 }
 

frontend/src/routes/vendors/index.tsx

@@ -1,28 +1,20 @@
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
-import { createFileRoute, Link } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
-import { Check, Filter, FilterX, LayoutGrid, List, Loader2, Search, SmilePlus, X } from 'lucide-react'
+import { SmilePlus } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 
 import { Pagination } from '~/components/pagination'
 import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert'
-import { Button } from '~/components/ui/button'
+import { PerPageSelector } from '~/components/vendors/per-page-selector'
-import { Card, CardContent } from '~/components/ui/card'
+import type { VendorLayout } from '~/components/vendors/types'
-import {
+import { VendorGrid } from '~/components/vendors/vendor-grid'
-  DropdownMenu,
+import { VendorList } from '~/components/vendors/vendor-list'
-  DropdownMenuContent,
+import { VendorToolbar } from '~/components/vendors/vendor-toolbar'
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '~/components/ui/dropdown-menu'
-import { Input } from '~/components/ui/input'
-import { Skeleton } from '~/components/ui/skeleton'
 
 import { useDebouncedCallback } from '~/hooks/use-debounced-callback'
 import { useLocalStorage } from '~/hooks/use-local-storage'
-import { assetUrl } from '~/lib/directus'
 import { categoriesQuery, vendorsListQuery } from '~/lib/queries'
-import { cn } from '~/lib/utils'
 
 type Search = {
   page?: number
@@ -43,15 +35,6 @@ export const Route = createFileRoute('/vendors/')({
   component: VendorsPage,
 })
 
-type Layout = 'GRID' | 'LIST'
-
-function truncateDescription(desc: string | null | undefined): string {
-  if (!desc) return ''
-  const head = desc.substring(0, 80)
-  const end = head.lastIndexOf(' ')
-  return desc.substring(0, end > 0 ? end : head.length) + ' …'
-}
-
 function VendorsPage() {
   const { page = 1, q = '', category = '' } = Route.useSearch()
   const navigate = Route.useNavigate()
@@ -59,7 +42,7 @@ function VendorsPage() {
   const { data: categories } = useSuspenseQuery(categoriesQuery)
 
   const [perPage, setPerPage] = useLocalStorage<number>('perPage', 12)
-  const [layout, setLayout] = useLocalStorage<Layout>('layout', 'GRID')
+  const [layout, setLayout] = useLocalStorage<VendorLayout>('layout', 'GRID')
 
   const [searchInput, setSearchInput] = useState(q)
   useEffect(() => {
@@ -86,6 +69,7 @@ function VendorsPage() {
     }
   }, [response, page, lastPage, navigate])
 
+  const isLoading = isFetching && !response
   const isEmpty = !isFetching && filterCount === 0
 
   return (
@@ -94,91 +78,25 @@ function VendorsPage() {
         <title>Vendors</title>
       </Helmet>
 
-      <div className="mb-5 flex flex-col items-stretch gap-4 md:flex-row md:items-center md:justify-between">
+      <VendorToolbar
-        <h1 className="text-2xl font-bold">Vendors</h1>
+        searchInput={searchInput}
-        <div className="flex h-9 items-center justify-center">
+        onSearchInput={(v) => {
-          {isFetching && <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />}
-        </div>
-        <div className="flex flex-wrap items-center gap-3">
-          <div className="relative">
-            <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              className="pl-9 pr-9"
-              placeholder="Search vendors"
-              value={searchInput}
-              onChange={(e) => {
-                const v = e.target.value.toLowerCase()
           setSearchInput(v)
           pushSearch(v)
         }}
-            />
+        onSearchClear={() => {
-            {searchInput && (
-              <button
-                type="button"
-                aria-label="Clear search"
-                onClick={() => {
           setSearchInput('')
           pushSearch('')
         }}
-                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+        isFetching={isFetching}
-              >
+        categories={categories}
-                <X className="h-4 w-4" />
+        category={category}
-              </button>
+        onCategoryChange={(slug) =>
-            )}
+          navigate({ search: (s) => ({ ...s, category: slug, page: undefined }) })
-          </div>
-
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="icon" aria-label="Filter by category">
-                {category ? <FilterX /> : <Filter />}
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {categories.map((cat) => (
-                <DropdownMenuItem
-                  key={cat.slug}
-                  disabled={category === cat.slug}
-                  onSelect={() =>
-                    navigate({ search: (s) => ({ ...s, category: cat.slug, page: undefined }) })
         }
-                >
+        layout={layout}
-                  {category === cat.slug && <Check className="h-4 w-4" />}
+        onLayoutChange={setLayout}
-                  {cat.name}
+      />
-                </DropdownMenuItem>
-              ))}
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onSelect={() => navigate({ search: (s) => ({ ...s, category: undefined, page: undefined }) })}
-              >
-                Clear
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          <div className="inline-flex rounded-md border">
-            <Button
-              variant={layout === 'GRID' ? 'secondary' : 'ghost'}
-              size="icon"
-              className="rounded-r-none"
-              onClick={() => setLayout('GRID')}
-              aria-label="Grid layout"
-              disabled={layout === 'GRID'}
-            >
-              <LayoutGrid />
-            </Button>
-            <Button
-              variant={layout === 'LIST' ? 'secondary' : 'ghost'}
-              size="icon"
-              className="rounded-l-none border-l"
-              onClick={() => setLayout('LIST')}
-              aria-label="List layout"
-              disabled={layout === 'LIST'}
-            >
-              <List />
-            </Button>
-          </div>
-        </div>
-      </div>
 
       {error && (
         <Alert variant="destructive" className="my-3">
@@ -187,84 +105,13 @@ function VendorsPage() {
       )}
 
       {layout === 'GRID' ? (
-        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        <VendorGrid vendors={vendors} isLoading={isLoading} perPage={perPage} />
-          {isFetching && !response
-            ? Array.from({ length: perPage }).map((_, k) => (
-                <Card key={k}>
-                  <Skeleton className="h-40 rounded-none" />
-                  <CardContent className="pt-4">
-                    <Skeleton className="mb-2 h-6" />
-                    <Skeleton className="mb-1 h-4" />
-                    <Skeleton className="h-4" />
-                  </CardContent>
-                </Card>
-              ))
-            : vendors.map((v) => (
-                <Card key={v.id} className="group relative hover:border-primary/40">
-                  <img
-                    src={assetUrl(v.logo, 'logo-card')}
-                    alt={v.name}
-                    width={250}
-                    height={150}
-                    className="h-40 w-full rounded-t-lg bg-white object-contain"
-                  />
-                  <CardContent className="pt-4">
-                    <Link
-                      to="/vendors/$slug"
-                      params={{ slug: v.slug }}
-                      className="mb-2 block text-base font-extrabold after:absolute after:inset-0"
-                    >
-                      {v.name}
-                    </Link>
-                    <p className="text-sm text-muted-foreground">{truncateDescription(v.description)}</p>
-                  </CardContent>
-                </Card>
-              ))}
-        </div>
       ) : (
-        <div className="overflow-hidden rounded-md border">
+        <VendorList vendors={vendors} isLoading={isLoading} perPage={perPage} />
-          <table className="w-full caption-bottom text-sm">
-            <tbody>
-              {isFetching && !response
-                ? Array.from({ length: perPage }).map((_, k) => (
-                    <tr key={k} className="border-b">
-                      <td className="w-[10%] p-3">
-                        <Skeleton className="h-12 w-12" />
-                      </td>
-                      <td className="w-[30%] p-3">
-                        <Skeleton className="h-6" />
-                      </td>
-                      <td className="w-[60%] p-3">
-                        <Skeleton className="h-6" />
-                      </td>
-                    </tr>
-                  ))
-                : vendors.map((v) => (
-                    <tr key={v.id} className="border-b last:border-0 hover:bg-accent/50">
-                      <td className="w-[10%] p-3 align-middle">
-                        <img
-                          src={assetUrl(v.logo, 'logo-card')}
-                          alt={v.name}
-                          className="h-12 w-12 rounded-md bg-white object-contain"
-                        />
-                      </td>
-                      <td className="w-[30%] p-3 align-middle font-medium">
-                        <Link to="/vendors/$slug" params={{ slug: v.slug }} className="hover:underline">
-                          {v.name}
-                        </Link>
-                      </td>
-                      <td className="w-[60%] p-3 align-middle text-muted-foreground">
-                        {truncateDescription(v.description)}
-                      </td>
-                    </tr>
-                  ))}
-            </tbody>
-          </table>
-        </div>
       )}
 
       {isEmpty && (
-        <Alert variant="info" className={cn('my-3 rounded-md py-10')}>
+        <Alert variant="info" className="my-3 rounded-md py-10">
           <div className="flex flex-col items-center gap-2 text-center">
             <SmilePlus className="h-8 w-8" />
             <AlertTitle className="mt-4 text-lg">No results found.</AlertTitle>
@@ -287,28 +134,7 @@ function VendorsPage() {
               page: p,
             })}
           />
-          <div className="mt-5 flex items-center justify-center gap-2">
+          <PerPageSelector value={perPage} onChange={setPerPage} />
-            <span className="text-sm">Results per page:</span>
-            <div className="inline-flex rounded-md border">
-              {[12, 24, 48].map((n, i) => (
-                <Button
-                  key={n}
-                  variant={perPage === n ? 'secondary' : 'ghost'}
-                  size="sm"
-                  disabled={perPage === n}
-                  onClick={() => setPerPage(n)}
-                  className={cn(
-                    'rounded-none',
-                    i === 0 && 'rounded-l-md',
-                    i === 2 && 'rounded-r-md',
-                    i > 0 && 'border-l',
-                  )}
-                >
-                  {n}
-                </Button>
-              ))}
-            </div>
-          </div>
         </>
       )}
     </section>