feat(ui): refresh auth, entry, admin, and secondary pages
Apply the new design-system primitives across the remaining pages so the whole app shares one visual language: - Auth/entry: redesigned index, login, register (centered card layout, SVG icons, semantic tokens) - Admin: sidebar nav with icons, cohesive admin dashboard/users/library/ processing-issues/settings (tables use border-line + hover states; scan/websocket attributes preserved) - Secondary: analytics (stat cards), devices, progress, conflicts, queue, profile + form/modal all migrated to .card/.btn/.input primitives and SVG action icons - Docs + API explorer + setup wizard + collection/rules/modals + unlinked books + book-detail modals: consistent chrome, modal scrims use --surface-overlay, close buttons use icon-btn - reader.templ and error.templ intentionally left unchanged
This commit is contained in:
@@ -1,15 +1,17 @@
|
||||
package templates
|
||||
|
||||
templ CollectionModal(collection CollectionData) {
|
||||
<div x-data="collections" 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 x-data="collections" class="fixed inset-0 z-50 flex items-center justify-center" style="background-color: var(--surface-overlay);">
|
||||
<div class="card p-6 w-full max-w-md mx-4">
|
||||
<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>
|
||||
<h2 class="text-xl font-bold text-content">Edit Collection</h2>
|
||||
} else {
|
||||
<h2 class="text-xl font-bold" style="color: var(--text-primary)">Create Collection</h2>
|
||||
<h2 class="text-xl font-bold text-content">Create Collection</h2>
|
||||
}
|
||||
<button type="button" @click="closeCollectionModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
|
||||
<button type="button" @click="closeCollectionModal()" class="icon-btn">
|
||||
@Icon("close", "h-5 w-5")
|
||||
</button>
|
||||
</div>
|
||||
if collection.ID != "" {
|
||||
<form
|
||||
@@ -18,35 +20,32 @@ templ CollectionModal(collection CollectionData) {
|
||||
>
|
||||
<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>
|
||||
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">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);"
|
||||
class="input"
|
||||
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>
|
||||
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">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);"
|
||||
class="input"
|
||||
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>
|
||||
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">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);"
|
||||
class="input mb-2"
|
||||
placeholder="🔍 Search or type emoji..."
|
||||
maxlength="4"
|
||||
oninput="filterIcons(this.value)"
|
||||
@@ -57,14 +56,13 @@ templ CollectionModal(collection CollectionData) {
|
||||
<!-- 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);"
|
||||
class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 rounded-lg border border-line bg-surface"
|
||||
>
|
||||
<!-- 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>
|
||||
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Color</label>
|
||||
<div class="flex gap-2">
|
||||
<button type="button" @click="selectColor('blue')" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
|
||||
<button type="button" @click="selectColor('red')" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
|
||||
@@ -75,8 +73,8 @@ templ CollectionModal(collection CollectionData) {
|
||||
<input type="hidden" name="color" id="collection-color" value={ collection.Color }/>
|
||||
</div>
|
||||
<div class="flex justify-end space-x-3">
|
||||
<button type="button" @click="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>
|
||||
<button type="button" @click="closeCollectionModal()" class="btn btn-secondary">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Update Collection</button>
|
||||
</div>
|
||||
</form>
|
||||
} else {
|
||||
@@ -85,34 +83,31 @@ templ CollectionModal(collection CollectionData) {
|
||||
hx-redirect="/collections"
|
||||
>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Name</label>
|
||||
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">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);"
|
||||
class="input"
|
||||
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>
|
||||
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">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);"
|
||||
class="input"
|
||||
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>
|
||||
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">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);"
|
||||
class="input mb-2"
|
||||
placeholder="🔍 Search or type emoji..."
|
||||
maxlength="4"
|
||||
oninput="filterIcons(this.value)"
|
||||
@@ -123,14 +118,13 @@ templ CollectionModal(collection CollectionData) {
|
||||
<!-- 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);"
|
||||
class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 rounded-lg border border-line bg-surface"
|
||||
>
|
||||
<!-- 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>
|
||||
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Color</label>
|
||||
<div class="flex gap-2">
|
||||
<button type="button" @click="selectColor('blue')" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
|
||||
<button type="button" @click="selectColor('red')" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
|
||||
@@ -141,8 +135,8 @@ templ CollectionModal(collection CollectionData) {
|
||||
<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-secondary px-4 py-2 rounded-lg">Cancel</button>
|
||||
<button type="submit" class="btn-primary px-4 py-2 rounded-lg">Create Collection</button>
|
||||
<button type="button" @click="closeCollectionModal()" class="btn btn-secondary">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Create Collection</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user