Account and saved searches

Account page with a left sidebar and 3-column collections

// app/layout.tsx: <PandaProvider … open={{ account: { mode: "page", href: "/account" } }}>
// app/account/page.tsx (Server Component)
import { PandaAccountRoot, AccountTabs, AccountCollections, AccountCollectionView, AccountSavedSearches, AccountLikes, AccountProfile } from "@pandaidx/widgets/client"

export default async function AccountPage({ searchParams }: { searchParams: Promise<{ tab?: string }> }) {
  const { tab } = await searchParams
  return (
    <main className="mx-auto max-w-7xl px-6 py-16">
      <PandaAccountRoot shell="page" defaultTab={tab} columns={3}>
        <div className="grid gap-10 md:grid-cols-[220px_1fr]">
          <AccountTabs orientation="vertical" />
          <div>
            <AccountCollections />
            <AccountCollectionView />
            <AccountSavedSearches card="row" columns={1} />
            <AccountLikes />
            <AccountProfile />
          </div>
        </div>
      </PandaAccountRoot>
    </main>
  )
}

Full websites area as a page (search, map, sort) with 3 columns

<PandaAccountRoot shell="page" defaultTab={tab} columns={3} />

Saved searches inside Your Collections (one grid)

<PandaAccountRoot shell="page" defaultTab={tab} columns={3} card="compact" mergeSaved />

Sidebar dialog from your own button

<PandaAccountRoot shell="dialog-sidebar" trigger={<button type="button">My account</button>} card="compact" columns={3} />

Inline account menu with icons (account sidebar or mobile menu)

<PandaAccountMenu mode="inline" icons header items={["likes", "collections", "saved", "account", "logout"]} labels={{ likes: "Favorites" }} />

Dropdown with your own icons and order

<PandaAccountMenu trigger={<button type="button">Account</button>}>
  <AccountMenuHeader />
  <AccountMenuItem id="likes" icon={<Star />} label="Favorites" />
  <AccountMenuItem id="collections" icon={<Folder />} />
  <AccountMenuSeparator />
  <AccountMenuItem id="logout" />
</PandaAccountMenu>

Header button with icons and another order

<PandaAuthButton variant="avatar" icons items={["collections", "likes", "saved", "account", "logout"]} />

Two-column profile

<PandaAccountProfile>
  <div className="grid gap-8 md:grid-cols-[160px_1fr]">
    <ProfilePhoto size={128} />
    <div className="grid gap-6"><ProfileFields fields={["name", "phones", "email"]} /><ProfileSave label="Update profile" /></div>
  </div>
</PandaAccountProfile>

Custom collection picker in your own popover

<Popover>
  <PopoverTrigger asChild><button type="button">Save to…</button></PopoverTrigger>
  <PopoverContent className="w-80">
    <CollectionPicker listing={listing} layout="grid" labels={{ title: "Save to a board", create: "New board" }} classNames={{ row: "rounded-none", image: "rounded-none" }} />
  </PopoverContent>
</Popover>

PandaAccountRoot

The visitor account area (collections, saved searches, likes and the visitor's own profile) in its own page (sections in a left sidebar), a dialog-sidebar or the drawer. Without children it is the full websites area (search, sort, map, share, edit/delete) with columns and card; with children you lay out the parts (AccountTabs, AccountCollections, AccountCollectionView, AccountSavedSearches, AccountLikes, AccountProfile). AI-built pages are Server Components: use the serializable props (shell, defaultTab, columns, card); renderCard only from a client component. Signed out: a sign-in prompt. Point PandaProvider open.account at the page so every menu and openDrawer goes there.

Import from @pandaidx/widgets/client · renders inside PandaProvider

PandaAccountMenu

The signed-in visitor's account menu: My Collections, Saved Searches, Likes (opened the PandaProvider open.account way), My Account, Dashboard (site owner only) and Sign Out, translated by the widget dictionary. dropdown behind the avatar (or your trigger), or inline as a list (an account sidebar, a mobile menu, the footer). Reorder with items (serializable), add icons with icons, or compose AccountMenuHeader / AccountMenuItem / AccountMenuSeparator in any order with your own icons and labels. Signed out it renders nothing: pair it with PandaAuthButton (which already shows this menu signed in).

Import from @pandaidx/widgets/client · renders inside PandaProvider

PandaAccountProfile

The visitor's "My Account" on the site: photo (remove, or a photo URL with ProfilePhoto allowUrl), name and phone numbers, email read only, saved with the visitor session (PATCH /v1/account, the websites Edit Profile update: CRM activity and owner notification). Email and password never change here. Signed out it renders nothing. PandaProvider open.account opens it from My Account (dialog, the sidebar dialog's profile section, or ?tab=profile on the account page); the site owner always goes to the dashboard.

Import from @pandaidx/widgets/client · renders inside PandaProvider

CollectionPicker

Add-to-collection picker for your own dialog, popover, sheet or page: the visitor's collections with a check on the ones holding the listing (click adds / removes), and Create Collection with the listing in it, over the same services as the websites dialog. layout list | grid, labels, classNames slots; renderRow from client components. Signed out it offers sign-up. The listing cards keep the websites Collections dialog.

Import from @pandaidx/widgets/client · renders inside PandaProvider