> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Notifications Dropdown

> Compact dropdown to display recent notifications in the top bar.

**Location**: `sabo/src/components/dashboard/notifications-dropdown.tsx`

## When to use

* Show recent alerts/messages with quick actions without leaving the page.

## Usage

```tsx theme={null}
// In the dashboard header
import { NotificationsDropdown } from "@/components/dashboard/notifications-dropdown";

export function HeaderRight() {
  return (
    <div className="flex items-center gap-2">
      <NotificationsDropdown />
    </div>
  );
}
```

## Styling tip

* Keep each item concise; use badges for counts; prefer lazy loading if needed.

## Key features

* **Unread badge**: Shows count of unread notifications in top-right of bell icon
* **Sample data**: Component includes sample notifications array for demonstration
* **Action buttons**: Supports accept/decline actions for specific notification types
* **Scroll area**: Uses `ScrollArea` for long lists without breaking layout

## Steps

<Steps>
  <Step title="Replace sample data">
    The component currently uses `sampleNotifications` array. Replace with real data from Supabase or your API.

    ```tsx theme={null}
    interface Notification {
      id: string;
      title: string;
      message: string;
      time: string;
      avatar?: string;
      avatarFallback: string;
      unread?: boolean;
      actionButtons?: {
        accept?: () => void;
        decline?: () => void;
      };
    }
    ```

    <Tip>
      Consider lazy-loading notifications when the dropdown opens to improve initial page load.
    </Tip>
  </Step>

  <Step title="Implement actions">
    For notifications with `actionButtons`, wire up actual handlers (e.g., accept team invite, approve request).

    ```tsx theme={null}
    actionButtons: {
      accept: async () => {
        // Call API/Supabase to accept invitation
        await acceptInvitation(notificationId);
        // Remove notification or mark as read
      },
      decline: async () => { /* ... */ }
    }
    ```
  </Step>

  <Step title="Mark as read">
    Update notification state when clicked or dismissed. This updates the unread count badge.
  </Step>
</Steps>