# Vue Components Integration Guide

## Components Created

### 1. TemplateModal.vue

Full-screen modal for displaying template details.

**Location**: `/Applications/MAMP/htdocs/vibe-templates/website/src/components/vue/TemplateModal.vue`

**Features**:

- Full-screen overlay with backdrop blur
- ESC key and overlay click to close
- Template icon, name, type badge, description
- Code block with template content
- Action buttons: Copy command, Copy content, Download, Add to cart
- Smooth transitions

**Usage in Astro**:

```astro
---
import TemplateModal from '../components/vue/TemplateModal.vue';
---

<TemplateModal client:load />
```

**Trigger from JavaScript**:

```js
import { useModal } from "./composables/useModal";

const { openModal } = useModal();

openModal({
  name: "code-reviewer",
  type: "agent",
  description:
    "Expert at reviewing code for quality, security, and best practices.",
  content: "# Code Reviewer Agent\n...",
  path: "agents/code-reviewer.md",
});
```

### 2. FilterBar.vue

Horizontal scrollable filter pills for template types.

**Location**: `/Applications/MAMP/htdocs/vibe-templates/website/src/components/vue/FilterBar.vue`

**Features**:

- Horizontal scroll on mobile
- Active state styling with warm accent color
- Phosphor icons for each filter type
- Emits 'filter' event with selected type

**Filter Options**:

- All (ph-squares-four)
- Agents (ph-robot)
- Commands (ph-terminal)
- MCPs (ph-plug)
- Settings (ph-gear)
- Hooks (ph-webhooks-logo)

**Usage in Astro**:

```astro
---
import FilterBar from '../components/vue/FilterBar.vue';
---

<FilterBar client:load @filter="handleFilter" />

<script>
function handleFilter(event) {
  const type = event.detail[0];
  console.log('Filter selected:', type);
  // Update template grid based on filter
}
</script>
```

## Warm Terminal Classes Used

### Background Colors

- `bg-warm-bg-deep` - Main dark background (#0c0a09)
- `bg-warm-bg-surface` - Card background (#1c1917)
- `bg-warm-bg-elevated` - Hover state (#292524)
- `bg-warm-bg-hover` - Active state (#44403c)

### Text Colors

- `text-warm-text-primary` - Main text (#fafaf9)
- `text-warm-text-secondary` - Secondary text (#a8a29e)
- `text-warm-text-tertiary` - Tertiary text (#78716c)
- `text-warm-text-muted` - Muted text (#57534e)

### Accent Colors

- `warm-accent` - Terracotta accent (#e07256)
- `warm-accent-hover` - Darker terracotta (#c85a42)

### Borders

- `border-warm-border-subtle` - Subtle border
- `border-warm-border-default` - Default border

### Component Classes (from global.css)

- `btn-primary` - Primary button with warm accent
- `btn-secondary` - Secondary button with border
- `btn-ghost` - Ghost button style
- `icon-btn` - Icon button (8x8)
- `filter-pill` - Filter pill style with hover
- `filter-pill.active` - Active filter pill
- `badge-agent`, `badge-command`, `badge-mcp`, `badge-setting`, `badge-hook`, `badge-skill` - Type badges
- `rounded-warm` - Consistent border radius

## Integration Steps

1. **Install Vue** (if not already done):

```bash
npx astro add vue
```

2. **Import in Astro pages**:

```astro
---
import TemplateModal from '../components/vue/TemplateModal.vue';
import FilterBar from '../components/vue/FilterBar.vue';
---

<FilterBar client:load />
<TemplateModal client:load />
```

3. **Use the composable**:

```js
import { useModal } from "../composables/useModal";

const { openModal } = useModal();
```

## File Structure

```
src/
├── components/
│   └── vue/
│       ├── TemplateModal.vue     ✓ Created
│       ├── FilterBar.vue         ✓ Created
│       ├── CartSidebar.vue       (existing)
│       └── SearchBar.vue         (existing)
├── composables/
│   ├── useModal.ts               ✓ Exists
│   ├── useCart.ts                (existing)
│   ├── useSearch.ts              (existing)
│   └── useNotifications.ts       (existing)
└── types/
    ├── template.ts               ✓ Exists
    └── cart.ts                   (existing)
```

## Notes

- Both components use TypeScript with `<script setup>`
- Modal prevents body scroll when open
- FilterBar emits custom events for parent components
- All styling uses Warm Terminal design system
- Components are framework-agnostic and can work in any Vue 3 app