Notification Center

<script lang="ts">
  import {
    ArchiveIcon,
    Avatar,
    Badge,
    BellIcon,
    Button,
    CheckIcon,
    Drawer,
    Tab,
    TabItem,
    TabPanel,
    Tooltip
  } from '@urbicon-ui/blocks';

  interface Notification {
    id: string;
    title: string;
    description: string;
    sender: string;
    time: string;
    read: boolean;
    type: 'info' | 'success' | 'warning';
  }

  let drawerOpen = $state(false);
  let activeTab = $state('all');

  let notifications = $state<Notification[]>([/* … your feed … */]);

  // Both badges, the Unread panel and the footer's disabled state derive from
  // the one notifications array; nothing keeps a second list.
  let unreadCount = $derived(notifications.filter((n) => !n.read).length);
  let unreadNotifications = $derived(notifications.filter((n) => !n.read));

  // Your API calls slot in here; the drawer re-renders from the array alone.
  function markAsRead(id: string) {
    notifications = notifications.map((n) => (n.id === id ? { ...n, read: true } : n));
  }

  function archiveNotification(id: string) {
    notifications = notifications.filter((n) => n.id !== id);
  }

  function markAllAsRead() {
    notifications = notifications.map((n) => ({ ...n, read: true }));
  }

  // The unread dot's colour, by notification type.
  const typeColors: Record<Notification['type'], string> = {
    info: 'bg-primary-subtle',
    success: 'bg-success-subtle',
    warning: 'bg-warning-subtle'
  };
</script>

<!-- One item template, two filters: both tab panels render this. -->
{#snippet list(items: Notification[])}
  {#if items.length === 0}
    <div class="flex flex-col items-center py-12">
      <BellIcon size={40} class="text-text-quaternary mb-3" />
      <p class="text-text-secondary text-sm font-medium">All caught up</p>
    </div>
  {:else}
    <ul class="divide-border-hairline divide-y">
      {#each items as notification (notification.id)}
        <li
          class={[
            'flex gap-3 px-1 py-3 transition-opacity duration-[var(--blocks-duration-normal)]',
            notification.read && 'opacity-60'
          ]}
        >
          <Avatar name={notification.sender} size="sm" />
          <div class="min-w-0 flex-1">
            <div class="flex items-start justify-between gap-2">
              <p class="text-text-primary text-sm font-medium">{notification.title}</p>
              {#if !notification.read}
                <span
                  class={['mt-1.5 h-2 w-2 shrink-0 rounded-full', typeColors[notification.type]]}
                ></span>
              {/if}
            </div>
            <p class="text-text-secondary mt-0.5 text-xs">{notification.description}</p>
            <p class="text-text-quaternary mt-1 text-xs">
              {notification.sender} &middot; {notification.time}
            </p>
          </div>
          <div class="flex shrink-0 items-start gap-1">
            {#if !notification.read}
              <Tooltip label="Mark as read">
                <button
                  class="text-text-tertiary hover:bg-surface-hover hover:text-primary focus-visible:ring-primary/50 rounded p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
                  onclick={() => markAsRead(notification.id)}
                  aria-label="Mark as read"
                >
                  <CheckIcon size={16} />
                </button>
              </Tooltip>
            {/if}
            <Tooltip label="Archive">
              <button
                class="text-text-tertiary hover:bg-surface-hover hover:text-primary focus-visible:ring-primary/50 rounded p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
                onclick={() => archiveNotification(notification.id)}
                aria-label="Archive"
              >
                <ArchiveIcon size={16} />
              </button>
            </Tooltip>
          </div>
        </li>
      {/each}
    </ul>
  {/if}
{/snippet}

<!-- The bell sits wherever your header puts it; the drawer mounts in the top
     layer, so nothing around the trigger has to make room. -->
<Button variant="outlined" intent="neutral" onclick={() => (drawerOpen = true)}>
  <BellIcon size={20} />
  Notifications
  {#if unreadCount > 0}
    <Badge variant="soft" intent="danger" size="sm">{unreadCount}</Badge>
  {/if}
</Button>

<Drawer bind:open={drawerOpen} title="Notifications" placement="right" size="md">
  <Tab bind:value={activeTab} variant="line" size="sm">
    {#snippet tabs()}
      <TabItem value="all">All</TabItem>
      <TabItem value="unread">
        Unread
        {#if unreadCount > 0}
          <Badge variant="soft" intent="danger" size="sm">{unreadCount}</Badge>
        {/if}
      </TabItem>
    {/snippet}

    {#snippet panels()}
      <TabPanel value="all">{@render list(notifications)}</TabPanel>
      <TabPanel value="unread">{@render list(unreadNotifications)}</TabPanel>
    {/snippet}
  </Tab>

  {#snippet footer()}
    <div class="flex items-center justify-between">
      <Button
        size="sm"
        variant="ghost"
        intent="neutral"
        onclick={markAllAsRead}
        disabled={unreadCount === 0}
      >
        Mark all as read
      </Button>
      <p class="text-text-quaternary text-xs">{notifications.length} total</p>
    </div>
  {/snippet}
</Drawer>