# Phase 5 — Content Library & Asset Manager
## Weeks 9–10

---

## STEP 5.1 — Media Library

**Route:** `GET /library` → Livewire: `Library\MediaLibrary`

UI (matches Hootsuite media grid):
```
[Search...] [Filter: All|Images|Videos|GIFs|AI] [Grid|List toggle] [+Upload]

┌────┬────┬────┬────┐
│ 🖼 │ 🖼 │ 🎬 │ 🖼 │  ← thumbnail grid, hover shows usage count + star
│    │    │    │    │
├────┼────┼────┼────┤
│ 🎬 │ 🖼 │ 🖼 │ 🎬 │
└────┴────┴────┴────┘

[Folders: My Content | AI Generated | Favorites | Trash]
```

### Livewire Component: `Library\MediaLibrary`
```php
public array $filters = ['type' => 'all', 'search' => '', 'folder' => null];
public string $viewMode = 'grid';  // 'grid' | 'list'
public array $selectedIds = [];

public function search(): void
public function filterByType(string $type): void
public function openFolder(int $folderId): void
public function bulkDelete(): void
public function bulkMove(int $folderId): void
public function toggleFavorite(int $mediaId): void
public function moveToTrash(int $mediaId): void
public function restoreFromTrash(int $mediaId): void
```

Add columns to `media_files`:
```php
$table->boolean('is_favorite')->default(false);
$table->boolean('is_trashed')->default(false);
$table->string('folder')->nullable();
$table->json('tags')->nullable();
$table->integer('usage_count')->default(0);
```

---

## STEP 5.2 — Caption Template Library

**Route:** `GET /library/captions` → Livewire: `Library\CaptionTemplates`

UI:
- Grid of template cards showing title, platform icon, caption preview
- Clicking a template opens an edit/preview modal
- "Use Template" → opens composer with template pre-filled
- Variable substitution preview: replace {product_name} with input fields in modal

---

## STEP 5.3 — Hashtag Group Manager

**Route:** `GET /library/hashtags` → Livewire: `Library\HashtagGroups`

UI:
- List of named groups (Travel, Fitness, Product Launch, etc.)
- Each group: shows hashtag count, preview of first 5 tags
- Expand to see all 30 tags
- "Insert into Composer" button
- Performance score pulled from analytics (average engagement rate of posts using this group)
- Banned hashtag detection: check each tag against a hardcoded list of known shadowbanned tags

---

## STEP 5.4 — Brand Kit

**Route:** `GET /settings/brand-kit` → Livewire: `Settings\BrandKit`

UI:
```
Brand Name: [___________________]
Primary Logo: [Upload] [Preview]
Secondary Logo: [Upload] [Preview]
Brand Colors: [#] [#] [#] [+ Add Color]  (color picker inputs)
Brand Fonts: [Heading font] [Body font]  (text inputs for reference)
Brand Voice: [Large textarea — e.g., "Professional but approachable..."]
Watermark: Position [Top-Left▼] Opacity [70%]
[Save Brand Kit]
```

The `BrandKit` model is a singleton per user (created on first save).
Its data is injected into all AI generation prompts automatically.

---

## COMPLETION CHECKLIST
- [ ] Media Library grid + list views with filter/search
- [ ] Folders, favorites, trash working
- [ ] Bulk select + bulk actions
- [ ] Usage tracking on media files
- [ ] Caption templates with variable placeholders
- [ ] Hashtag group manager (create/edit/delete groups, 30 tags max)
- [ ] One-click insert hashtag group into composer
- [ ] Banned hashtag detection
- [ ] Brand Kit settings page
- [ ] Brand Kit data injected into AI caption prompts
- [ ] Brand Kit colors injected into image generation prompts

When done: update to `6`, commit `feat(phase5): complete content library and asset manager`, stop.
