# Vue 3 Composables - Vibe Templates

Vue 3 composables for the Vibe Templates website with Warm Terminal styling.

## Files Created

### Types (`src/types/`)

- `template.ts` - Template and TemplateType definitions
- `cart.ts` - CartItem interface

### Composables (`src/composables/`)

- `useCart.ts` - Cart management with localStorage persistence
- `useModal.ts` - Modal state management
- `useNotifications.ts` - Toast notifications system
- `useSearch.ts` - Search and filtering functionality

## Usage Examples

### useCart

```vue
<script setup lang="ts">
import { useCart } from "@/composables/useCart";

const { items, count, addItem, removeItem, hasItem, generateCommand, getIcon } =
  useCart();

function handleAdd() {
  addItem({
    name: "git-flow",
    type: "agent",
    description: "Git workflow automation agent",
  });
}
</script>

<template>
  <div>
    <p>Cart: {{ count }} items</p>
    <button @click="handleAdd">Add Item</button>
    <pre>{{ generateCommand() }}</pre>
  </div>
</template>
```

### useModal

```vue
<script setup lang="ts">
import { useModal } from "@/composables/useModal";

const { isOpen, currentTemplate, openModal, closeModal } = useModal();

function showTemplate() {
  openModal({
    name: "git-flow",
    type: "agent",
    description: "Git workflow automation",
    content: "...",
    path: "...",
  });
}
</script>

<template>
  <div>
    <button @click="showTemplate">View Template</button>
    <div v-if="isOpen" class="modal">
      <h2>{{ currentTemplate?.name }}</h2>
      <button @click="closeModal">Close</button>
    </div>
  </div>
</template>
```

### useNotifications

```vue
<script setup lang="ts">
import { useNotifications } from "@/composables/useNotifications";

const { notifications, showNotification } = useNotifications();

function copyToClipboard() {
  navigator.clipboard.writeText("vibe install template");
  showNotification("Copied to clipboard", "success");
}
</script>

<template>
  <div>
    <button @click="copyToClipboard">Copy Command</button>

    <div class="notifications">
      <div
        v-for="notif in notifications"
        :key="notif.id"
        :class="['toast', `toast-${notif.type}`]"
      >
        {{ notif.message }}
      </div>
    </div>
  </div>
</template>
```

### useSearch

```vue
<script setup lang="ts">
import { ref } from "vue";
import { useSearch } from "@/composables/useSearch";
import templates from "@/data/templates.json";

const { query, filteredItems, setQuery } = useSearch();
const results = computed(() => filteredItems(templates));

function handleSearch(e: Event) {
  setQuery((e.target as HTMLInputElement).value);
}
</script>

<template>
  <div>
    <input
      :value="query"
      @input="handleSearch"
      placeholder="Search templates..."
    />
    <div v-for="template in results" :key="template.name">
      {{ template.name }}
    </div>
  </div>
</template>
```

## Key Features

### useCart

- localStorage persistence with auto-save
- Add, remove, clear, toggle operations
- Command generation: `vibe install item1 item2`
- Icon mapping for template types
- Reactive count and items

### useModal

- Global modal state management
- Body scroll lock when modal open
- Current template tracking

### useNotifications

- Auto-dismiss after duration (default 2.5s)
- Support for success, error, info, warning types
- Unique IDs for each notification

### useSearch

- Generic filtering function works with any Template array
- Searches name, type, and description fields
- Case-insensitive matching

## Icon Mapping

Template types map to Phosphor icons:

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

Default fallback: `ph-package`