# Vue 3 Components - Implementation Summary

## Created Components

### 1. CartSidebar.vue

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

**Features**:

- Slide-in sidebar from right with backdrop overlay
- Uses `useCart` composable for state management
- Displays cart items with type-specific Phosphor icons
- Remove button per item
- Clear all button
- Shows generated `vibe install` command
- Copy command to clipboard with success feedback
- Empty state when no items
- Keyboard shortcuts (Escape to close)
- Full Warm Terminal styling

**Props**:

- `isOpen: boolean` - Controls sidebar visibility

**Emits**:

- `close` - Emitted when user closes sidebar

**Icons Used**:

- `ph-shopping-cart` - Cart icon
- `ph-x` - Close/remove buttons
- `ph-copy` / `ph-check` - Copy command button
- `ph-trash` - Clear all button
- Type-specific icons via `getIcon()` composable

---

### 2. SearchBar.vue

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

**Features**:

- Search input with icon
- Emits 'search' event with query string
- Keyboard shortcut "/" to focus (unless in input/textarea)
- Clear button when text is entered
- Escape key to clear and blur
- Keyboard shortcut hint badge (hidden on mobile)
- Full Warm Terminal styling with `input-warm` class

**Emits**:

- `search: [query: string]` - Emitted on input change

**Icons Used**:

- `ph-magnifying-glass` - Search icon
- `ph-x` - Clear button

---

## Supporting Files

### Types

#### `/Applications/MAMP/htdocs/vibe-templates/website/src/types/template.ts`

```typescript
export type TemplateType =
  | "agent"
  | "command"
  | "mcp"
  | "setting"
  | "hook"
  | "skill";

export interface Template {
  name: string;
  type: TemplateType;
  description: string;
  content: string;
  path: string;
}
```

#### `/Applications/MAMP/htdocs/vibe-templates/website/src/types/cart.ts`

```typescript
import type { TemplateType } from "./template";

export interface CartItem {
  name: string;
  type: TemplateType;
  description?: string;
  path?: string;
}
```

---

### Composable

#### `/Applications/MAMP/htdocs/vibe-templates/website/src/composables/useCart.ts`

**Features**:

- Reactive cart state management
- localStorage persistence (auto-save)
- Singleton pattern (shared state across components)

**API**:

```typescript
const {
  items, // computed(() => CartItem[])
  count, // computed(() => number)
  addItem, // (item: CartItem) => boolean
  removeItem, // (name: string) => void
  clearCart, // () => void
  hasItem, // (name: string) => boolean
  toggleItem, // (item: CartItem) => boolean
  generateCommand, // () => string - Returns "vibe install item1 item2"
  getIcon, // (type: TemplateType) => string - Returns Phosphor icon class
} = useCart();
```

**Icon Mapping**:

- `agent` → `ph-robot`
- `command` → `ph-terminal`
- `mcp` → `ph-plug`
- `setting` → `ph-gear`
- `hook` → `ph-webhooks-logo`
- `skill` → `ph-magic-wand`

---

## Warm Terminal CSS Classes Used

### Backgrounds

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

### Text

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

### Borders

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

### Accent

- `text-warm-accent` - Terracotta accent (#e07256)
- `bg-warm-accent` - Accent background

### Border Radius

- `rounded-warm` - 12px border radius
- `rounded-warm-lg` - 16px border radius

### Component Classes (from global.css)

- `.btn-primary` - Primary button
- `.btn-secondary` - Secondary button
- `.icon-btn` - Icon button
- `.input-warm` - Input field
- `.cart-item` - Cart item container
- `.cart-item-icon` - Cart item icon
- `.cart-item-name` - Cart item name
- `.cart-item-remove` - Cart item remove button

---

## Integration Requirements

### 1. Install Vue Integration

```bash
npx astro add vue
```

### 2. Add Phosphor Icons

Add to your Layout.astro `<head>`:

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css"
/>
```

### 3. Usage in Astro Pages

#### CartSidebar Example

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

<CartSidebar client:load isOpen={false} />
```

#### SearchBar Example

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

<SearchBar client:load />

<script>
  // Listen for search events
  document.addEventListener('astro:page-load', () => {
    const searchBar = document.querySelector('[data-search-bar]');
    searchBar?.addEventListener('search', (e) => {
      console.log('Search query:', e.detail);
      // Filter templates based on query
    });
  });
</script>
```

---

## Next Steps

### Remaining Components (from CLAUDE.md)

- [x] CartSidebar.vue - Completed
- [x] SearchBar.vue - Completed
- [ ] FilterBar.vue - Already exists (user created)
- [ ] TemplateModal.vue - Already exists (user created)
- [ ] WizardSection.vue - Pending

### Integration Tasks

1. Update existing Astro pages to use Vue components
2. Replace ClientScripts.astro with Vue composables
3. Test cart persistence across page navigation
4. Verify all interactions work correctly
5. Remove old neon-\* class references
6. Performance audit

---

## File Structure

```
src/
├── components/
│   ├── astro/              # Static components
│   │   ├── Header.astro
│   │   ├── Hero.astro
│   │   ├── StacksGrid.astro
│   │   └── TemplateCard.astro
│   └── vue/                # Interactive components ✅
│       ├── CartSidebar.vue ✅
│       ├── SearchBar.vue ✅
│       ├── FilterBar.vue
│       └── TemplateModal.vue
├── composables/            # Vue 3 composables ✅
│   ├── useCart.ts ✅
│   ├── useModal.ts
│   ├── useNotifications.ts
│   └── useSearch.ts
├── types/                  # TypeScript types ✅
│   ├── template.ts ✅
│   └── cart.ts ✅
└── data/
    ├── templates.json
    ├── stacks.json
    └── outcomes.json
```

---

## Design Consistency

All components follow:

- **Warm Terminal** color palette
- **Satoshi** font family (sans)
- **IBM Plex Mono** for code/monospace
- **Phosphor Icons** regular style
- **12px/16px** border radius (rounded-warm)
- Consistent spacing and transitions
- Accessible markup with ARIA labels