john-okeefe
5d5012c0f7
Add two new template components:
1. CollectionModal(collection CollectionData)
- Reusable modal for both creating and editing collections
- When collection.ID is empty: shows "Create Collection" form
- When collection.ID is set: shows "Edit Collection" form with pre-filled data
- Features:
* Name and description fields
* Icon picker with search input and emoji grid
(grid populated dynamically by JavaScript)
(supports typing emoji directly or searching by keywords)
* Color selection buttons (blue/red/yellow/green/purple)
* HTMX form submission (hx-post for create, hx-put for update)
- HX-Redirect to /collections after successful submission
2. RestoreSystemCollectionModal()
- Modal for restoring deleted system collections
- Dropdown with options: Continue Reading, Recently Added,
Recently Read, Not Started
- HTMX form submission to /api/dashboard/restore-system-collection
- HX-Redirect to /collections after restoration
Both modals:
- Use fixed inset-0 positioning with black/70 backdrop
- Inherit theme from parent page (no html/head/body tags)
- Include close button (✕) that calls closeCollectionModal()
- Follow existing card styling conventions
- Use CSS custom properties for theming (--bg-secondary, --text-primary, etc.)
152 lines
6.9 KiB
Templ
152 lines
6.9 KiB
Templ
package templates
|
|
|
|
templ CollectionModal(collection CollectionData) {
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
|
|
<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
|
|
<div class="flex justify-between items-center mb-6">
|
|
if collection.ID != "" {
|
|
<h2 class="text-xl font-bold" style="color: var(--text-primary)">Edit Collection</h2>
|
|
} else {
|
|
<h2 class="text-xl font-bold" style="color: var(--text-primary)">Create Collection</h2>
|
|
}
|
|
<button type="button" onclick="closeCollectionModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
|
|
</div>
|
|
if collection.ID != "" {
|
|
<form
|
|
hx-put={ "/api/collections/" + collection.ID }
|
|
hx-redirect="/collections"
|
|
>
|
|
<input type="hidden" name="id" value={ collection.ID }/>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Name</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={ collection.Name }
|
|
required
|
|
class="w-full px-4 py-2 border rounded-lg"
|
|
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
|
placeholder="My Reading List"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Description</label>
|
|
<textarea
|
|
name="description"
|
|
class="w-full px-4 py-2 border rounded-lg"
|
|
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
|
placeholder="Optional description"
|
|
rows="3"
|
|
>{ collection.Description }</textarea>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Icon</label>
|
|
<!-- Search/Text Input -->
|
|
<input
|
|
type="text"
|
|
id="icon-search"
|
|
class="w-full px-4 py-2 border rounded-lg mb-2"
|
|
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
|
placeholder="🔍 Search or type emoji..."
|
|
maxlength="4"
|
|
oninput="filterIcons(this.value)"
|
|
onfocus="showAllIcons()"
|
|
/>
|
|
<!-- Hidden input for form submission -->
|
|
<input type="hidden" name="icon" id="collection-icon" value={ collection.Icon }/>
|
|
<!-- Emoji Grid -->
|
|
<div
|
|
id="icon-grid"
|
|
class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 border rounded-lg"
|
|
style="background-color: var(--bg-primary); border-color: var(--border);"
|
|
>
|
|
<!-- Populated dynamically by JavaScript -->
|
|
</div>
|
|
</div>
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Color</label>
|
|
<div class="flex gap-2">
|
|
<button type="button" onclick="selectColor('blue')" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
|
|
<button type="button" onclick="selectColor('red')" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
|
|
<button type="button" onclick="selectColor('yellow')" class="w-8 h-8 rounded-full color-option bg-yellow-500"></button>
|
|
<button type="button" onclick="selectColor('green')" class="w-8 h-8 rounded-full color-option bg-green-500"></button>
|
|
<button type="button" onclick="selectColor('purple')" class="w-8 h-8 rounded-full color-option bg-purple-500"></button>
|
|
</div>
|
|
<input type="hidden" name="color" id="collection-color" value={ collection.Color }/>
|
|
</div>
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" onclick="closeCollectionModal()" class="btn-secondary px-4 py-2 rounded-lg">Cancel</button>
|
|
<button type="submit" class="btn-primary px-4 py-2 rounded-lg">Update Collection</button>
|
|
</div>
|
|
</form>
|
|
} else {
|
|
<form
|
|
hx-post="/api/collections"
|
|
hx-redirect="/collections"
|
|
>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Name</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
required
|
|
class="w-full px-4 py-2 border rounded-lg"
|
|
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
|
placeholder="My Reading List"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Description</label>
|
|
<textarea
|
|
name="description"
|
|
class="w-full px-4 py-2 border rounded-lg"
|
|
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
|
placeholder="Optional description"
|
|
rows="3"
|
|
></textarea>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Icon</label>
|
|
<!-- Search/Text Input -->
|
|
<input
|
|
type="text"
|
|
id="icon-search"
|
|
class="w-full px-4 py-2 border rounded-lg mb-2"
|
|
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
|
placeholder="🔍 Search or type emoji..."
|
|
maxlength="4"
|
|
oninput="filterIcons(this.value)"
|
|
onfocus="showAllIcons()"
|
|
/>
|
|
<!-- Hidden input for form submission -->
|
|
<input type="hidden" name="icon" id="collection-icon" value={ collection.Icon }/>
|
|
<!-- Emoji Grid -->
|
|
<div
|
|
id="icon-grid"
|
|
class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 border rounded-lg"
|
|
style="background-color: var(--bg-primary); border-color: var(--border);"
|
|
>
|
|
<!-- Populated dynamically by JavaScript -->
|
|
</div>
|
|
</div>
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Color</label>
|
|
<div class="flex gap-2">
|
|
<button type="button" onclick="selectColor('blue')" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
|
|
<button type="button" onclick="selectColor('red')" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
|
|
<button type="button" onclick="selectColor('yellow')" class="w-8 h-8 rounded-full color-option bg-yellow-500"></button>
|
|
<button type="button" onclick="selectColor('green')" class="w-8 h-8 rounded-full color-option bg-green-500"></button>
|
|
<button type="button" onclick="selectColor('purple')" class="w-8 h-8 rounded-full color-option bg-purple-500"></button>
|
|
</div>
|
|
<input type="hidden" name="color" id="collection-color" value="blue"/>
|
|
</div>
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" onclick="closeCollectionModal()" class="btn-secondary px-4 py-2 rounded-lg">Cancel</button>
|
|
<button type="submit" class="btn-primary px-4 py-2 rounded-lg">Create Collection</button>
|
|
</div>
|
|
</form>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|