John O'Keefe
2fd0828c06
1. Add-modal 'Download order' never revealed: the CSS sibling selector
(#podcast-download-all:checked ~ .podcast-add-order) can't fire —
the checkbox was nested inside a wrapper div, so the select row was
no SIBLING of the input. Restructured: input, label, and order row
are now siblings under one flex-wrap wrapper.
2. Order + auto-download dropdowns always displayed the LAST option
('Newest first'/'Newest') regardless of the saved value: templ's
selected={ boolExpr } compiles to selected="false" — and the mere
PRESENCE of the attribute selects the option, so every option was
selected and the browser honored the last. Sweep to the boolean-
attribute form selected?={...} (omits on false) across
podcast_detail (14), book_detail_modals (10: manga type/reading
direction selects + abridged/explicit checkboxes — same defect,
always-checked), collection_modal (2: hide-finished/show-up-next
always-checked). Values were SAVING correctly all along; this was
pure display. audio_reader/collections :selected/:checked are
Alpine bindings — unaffected.
3. Remove Feed (and every hx-confirm) still showed the browser dialog
for signed-in users: the global confirm modal rendered at the end
of SidebarSignIn — signed-IN pages have no SidebarSignIn, so no
#confirm-modal existed and confirmDialog() degraded to
window.confirm. Moved the modal into Header proper (rendered on
every page, after </aside>).
4. Facet bar at scale: values now carry feed COUNTS, sort by frequency
DESC then alphabetically, cap at 6 chips per group flat, and the
rest collapse into a native <details> '+N more' expander — hundreds
of hosts/tags degrade gracefully instead of a wall of chips.
Verified live on the dev instance (order select reflects the saved
override, override row persists, reveal fires, modal renders on
signed-in pages). Podcast + logout + media-pin suites green; vitest
167 green.
174 lines
9.4 KiB
Templ
174 lines
9.4 KiB
Templ
package templates
|
|
|
|
templ CollectionModal(collection CollectionData) {
|
|
<div x-data="collections" class="fixed inset-0 z-50 flex items-center justify-center p-4" style="background-color: var(--surface-overlay);">
|
|
<div class="card p-6 w-full max-w-md" style="box-shadow: var(--shadow-pop);">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<span class="grid place-items-center h-10 w-10 rounded-xl shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
|
|
@Icon("folder", "h-5 w-5")
|
|
</span>
|
|
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>
|
|
}
|
|
</div>
|
|
<button type="button" @click="closeCollectionModal()" class="icon-btn" aria-label="Close">
|
|
@Icon("close", "h-5 w-5")
|
|
</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-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Name</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={ collection.Name }
|
|
required
|
|
class="input"
|
|
placeholder="My Reading List"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Description</label>
|
|
<textarea
|
|
name="description"
|
|
class="input"
|
|
placeholder="Optional description"
|
|
rows="3"
|
|
>{ collection.Description }</textarea>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Icon</label>
|
|
<input
|
|
type="text"
|
|
id="icon-search"
|
|
class="input mb-2"
|
|
placeholder="Search or type emoji..."
|
|
maxlength="4"
|
|
@input="filterIcons($event.target.value)"
|
|
@focus="showAllIcons()"
|
|
/>
|
|
<input type="hidden" name="icon" id="collection-icon" value={ collection.Icon }/>
|
|
<div
|
|
id="icon-grid"
|
|
class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 rounded-lg border"
|
|
style="background-color: var(--bg-primary); border-color: var(--border);"
|
|
></div>
|
|
</div>
|
|
<div class="mb-6">
|
|
<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Color</label>
|
|
<div class="flex gap-2">
|
|
<button type="button" @click="selectColor('blue')" data-color="blue" class="w-8 h-8 rounded-full color-option bg-blue-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-blue-400" aria-label="Blue"></button>
|
|
<button type="button" @click="selectColor('red')" data-color="red" class="w-8 h-8 rounded-full color-option bg-red-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-red-400" aria-label="Red"></button>
|
|
<button type="button" @click="selectColor('yellow')" data-color="yellow" class="w-8 h-8 rounded-full color-option bg-yellow-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-yellow-400" aria-label="Yellow"></button>
|
|
<button type="button" @click="selectColor('green')" data-color="green" class="w-8 h-8 rounded-full color-option bg-green-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-green-400" aria-label="Green"></button>
|
|
<button type="button" @click="selectColor('purple')" data-color="purple" class="w-8 h-8 rounded-full color-option bg-purple-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-purple-400" aria-label="Purple"></button>
|
|
</div>
|
|
<input type="hidden" name="color" id="collection-color" value={ collection.Color }/>
|
|
<div class="mb-4 space-y-2">
|
|
<label class="flex items-center gap-2 text-sm" style="color: var(--text-primary);">
|
|
<input type="hidden" name="hide_finished" value="false"/>
|
|
<input type="checkbox" name="hide_finished" value="true" checked?={ collection.HideFinished } class="h-4 w-4 accent-current"/>
|
|
<span>Hide finished books (reading-queue mode)</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 text-sm" style="color: var(--text-primary);">
|
|
<input type="hidden" name="show_up_next" value="false"/>
|
|
<input type="checkbox" name="show_up_next" value="true" checked?={ collection.ShowUpNext } class="h-4 w-4 accent-current"/>
|
|
<span>Show Up Next strip</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" @click="closeCollectionModal()" class="btn btn-secondary">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Update Collection</button>
|
|
</div>
|
|
</form>
|
|
} else {
|
|
<form
|
|
hx-post="/api/collections"
|
|
hx-redirect="/collections"
|
|
>
|
|
<div class="mb-4">
|
|
<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Type</label>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<label class="relative cursor-pointer">
|
|
<input type="radio" name="collection_type" value="static" checked class="peer sr-only"/>
|
|
<div class="p-3 rounded-lg border text-center peer-checked:border-blue-500" style="background-color: var(--bg-primary); border-color: var(--border);">
|
|
<span class="font-semibold text-sm" style="color: var(--text-primary)">Static</span>
|
|
<p class="text-xs mt-1" style="color: var(--text-secondary)">Pick books by hand</p>
|
|
</div>
|
|
</label>
|
|
<label class="relative cursor-pointer">
|
|
<input type="radio" name="collection_type" value="smart" class="peer sr-only"/>
|
|
<div class="p-3 rounded-lg border text-center peer-checked:border-blue-500 peer-checked:ring-2 peer-checked:ring-blue-400" style="background-color: var(--bg-primary); border-color: var(--border);">
|
|
<span class="font-semibold text-sm" style="color: var(--text-primary)">⚡ Smart</span>
|
|
<p class="text-xs mt-1" style="color: var(--text-secondary)">Match books by rules — always live</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Name</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
required
|
|
class="input"
|
|
placeholder="My Reading List"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Description</label>
|
|
<textarea
|
|
name="description"
|
|
class="input"
|
|
placeholder="Optional description"
|
|
rows="3"
|
|
></textarea>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Icon</label>
|
|
<input
|
|
type="text"
|
|
id="icon-search"
|
|
class="input mb-2"
|
|
placeholder="Search or type emoji..."
|
|
maxlength="4"
|
|
@input="filterIcons($event.target.value)"
|
|
@focus="showAllIcons()"
|
|
/>
|
|
<input type="hidden" name="icon" id="collection-icon" value={ collection.Icon }/>
|
|
<div
|
|
id="icon-grid"
|
|
class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 rounded-lg border"
|
|
style="background-color: var(--bg-primary); border-color: var(--border);"
|
|
></div>
|
|
</div>
|
|
<div class="mb-6">
|
|
<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Color</label>
|
|
<div class="flex gap-2">
|
|
<button type="button" @click="selectColor('blue')" data-color="blue" class="w-8 h-8 rounded-full color-option bg-blue-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-blue-400" aria-label="Blue"></button>
|
|
<button type="button" @click="selectColor('red')" data-color="red" class="w-8 h-8 rounded-full color-option bg-red-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-red-400" aria-label="Red"></button>
|
|
<button type="button" @click="selectColor('yellow')" data-color="yellow" class="w-8 h-8 rounded-full color-option bg-yellow-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-yellow-400" aria-label="Yellow"></button>
|
|
<button type="button" @click="selectColor('green')" data-color="green" class="w-8 h-8 rounded-full color-option bg-green-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-green-400" aria-label="Green"></button>
|
|
<button type="button" @click="selectColor('purple')" data-color="purple" class="w-8 h-8 rounded-full color-option bg-purple-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-purple-400" aria-label="Purple"></button>
|
|
</div>
|
|
<input type="hidden" name="color" id="collection-color" value="blue"/>
|
|
</div>
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" @click="closeCollectionModal()" class="btn btn-secondary">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Create Collection</button>
|
|
</div>
|
|
</form>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|