Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity
Files
40dabfd788770986a10e844eefcffc76f9efdcf9
bookhoard/templates/admin_settings.templ
T
john-okeefe 8ea70ea7f8 feat(ui): migrate remaining pages to the new shell 
Apply the sidebar shell and bold primitives across the rest of the app so
the whole experience shares one visual language:

- Browse/organize: series (keeps stacked-covers/series-card CSS),
  collections (keeps wood-paneling + carousel classes), browse_detail.
- Account/stats: profile + form + modal, progress, analytics (stat-card
  tiles), devices, conflicts (status semantics), queue (status/priority
  badges).
- Admin: admin sidebar restyled with icons, dashboard/users/library/
  processing-issues/settings migrated to .card/.btn/.input primitives.
- Docs/setup/misc: docs (keeps prose/highlight.js), api_explorer, setup
  wizard, unlinked_books, custom_section builder.
- Modals/fragments: collection_modal, collection_rules,
  restore_system_collection_modal, filter_item, book_detail_modals — all
  overlays use --surface-overlay + --shadow-pop.

Every Alpine handler, HTMX attribute, id, name, and data-* is preserved;
only presentation changes.
2026-08-05 16:45:02 -04:00

122 lines
7.4 KiB
Templ
Raw Blame History

package templates
templ AdminSettings(user User, systemConfig map[string]string, errorMessage string) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>System Settings - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ user.Theme }" x-data="adminSettings">
@Header(user, "/admin/settings")
<div class="flex">
@AdminSidebar(user, "/admin/settings")
<main class="flex-1 p-8">
<div class="max-w-4xl">
<div class="mb-8">
<div class="flex items-center justify-between gap-4 flex-wrap mb-4">
<a href="/admin" class="btn btn-secondary">
@Icon("arrow-left", "h-4 w-4")
Back to Dashboard
</a>
</div>
<div class="flex items-center gap-3 mb-1">
<span class="grid place-items-center h-10 w-10 rounded-xl" style="background-color: var(--accent-muted); color: var(--accent);">
@Icon("settings", "h-5 w-5")
</span>
<h1 class="text-2xl font-bold tracking-tight" style="color: var(--text-primary)">System Settings</h1>
</div>
<p class="text-sm" style="color: var(--text-secondary)">Configure your Bookhoard instance</p>
</div>
if errorMessage != "" {
<div class="mb-6 p-4 rounded-xl border flex items-start gap-3" style="background-color: color-mix(in srgb, var(--status-danger) 12%, var(--bg-secondary)); border-color: var(--status-danger); color: var(--status-danger);">
@Icon("alert", "h-5 w-5 shrink-0 mt-0.5")
<span>{ errorMessage }</span>
</div>
}
<form id="settings-form" hx-put="/api/system/config" hx-target="#settings-form" hx-swap="outerHTML">
<div class="card p-6">
<div class="flex items-center gap-2 mb-6">
@Icon("globe", "h-5 w-5 shrink-0")
<h3 class="text-lg font-semibold" style="color: var(--text-primary)">Base URL</h3>
</div>
<div>
<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Base URL</label>
<input
type="url"
name="base_url"
value={ systemConfig["base_url"] }
placeholder="https://books.example.com"
class="input"
required
/>
<p class="text-sm mt-2" style="color: var(--text-secondary)">The public URL of your Bookhoard instance (e.g., https://books.example.com). Used for device sync, OPDS, and API endpoints.</p>
</div>
<div class="mt-6 flex justify-end">
<button type="submit" class="btn btn-primary">
@Icon("save", "h-4 w-4")
Save Settings
</button>
</div>
</div>
<div class="mt-6 card p-6">
<div class="flex items-center gap-2 mb-6">
@Icon("clock", "h-5 w-5 shrink-0")
<h3 class="text-lg font-semibold" style="color: var(--text-primary)">System Defaults</h3>
</div>
<div>
<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Default Timezone</label>
<select
name="default_timezone"
id="default_timezone"
class="input"
>
<option value="UTC" selected?={ systemConfig["default_timezone"] == "UTC" }>UTC (UTC+0)</option>
<option value="Pacific/Honolulu" selected?={ systemConfig["default_timezone"] == "Pacific/Honolulu" }>Hawaii (UTC-10)</option>
<option value="America/Anchorage" selected?={ systemConfig["default_timezone"] == "America/Anchorage" }>Alaska (UTC-9/-8)</option>
<option value="America/Los_Angeles" selected?={ systemConfig["default_timezone"] == "America/Los_Angeles" }>Pacific (UTC-8/-7)</option>
<option value="America/Denver" selected?={ systemConfig["default_timezone"] == "America/Denver" }>Mountain (UTC-7/-6)</option>
<option value="America/Phoenix" selected?={ systemConfig["default_timezone"] == "America/Phoenix" }>Mountain - no DST (UTC-7)</option>
<option value="America/Chicago" selected?={ systemConfig["default_timezone"] == "America/Chicago" }>Central (UTC-6/-5)</option>
<option value="America/New_York" selected?={ systemConfig["default_timezone"] == "America/New_York" }>Eastern (UTC-5/-4)</option>
<option value="America/Sao_Paulo" selected?={ systemConfig["default_timezone"] == "America/Sao_Paulo" }>Brasilia (UTC-3/-2)</option>
<option value="Europe/London" selected?={ systemConfig["default_timezone"] == "Europe/London" }>British (UTC+0/+1)</option>
<option value="Europe/Paris" selected?={ systemConfig["default_timezone"] == "Europe/Paris" }>Central European (UTC+1/+2)</option>
<option value="Europe/Helsinki" selected?={ systemConfig["default_timezone"] == "Europe/Helsinki" }>Eastern European (UTC+2/+3)</option>
<option value="Europe/Moscow" selected?={ systemConfig["default_timezone"] == "Europe/Moscow" }>Moscow (UTC+3)</option>
<option value="Asia/Tehran" selected?={ systemConfig["default_timezone"] == "Asia/Tehran" }>Iran (UTC+3:30)</option>
<option value="Asia/Dubai" selected?={ systemConfig["default_timezone"] == "Asia/Dubai" }>Gulf (UTC+4)</option>
<option value="Asia/Karachi" selected?={ systemConfig["default_timezone"] == "Asia/Karachi" }>Pakistan (UTC+5)</option>
<option value="Asia/Kolkata" selected?={ systemConfig["default_timezone"] == "Asia/Kolkata" }>India (UTC+5:30)</option>
<option value="Asia/Dhaka" selected?={ systemConfig["default_timezone"] == "Asia/Dhaka" }>Bangladesh (UTC+6)</option>
<option value="Asia/Bangkok" selected?={ systemConfig["default_timezone"] == "Asia/Bangkok" }>Indochina (UTC+7)</option>
<option value="Asia/Shanghai" selected?={ systemConfig["default_timezone"] == "Asia/Shanghai" }>China (UTC+8)</option>
<option value="Asia/Tokyo" selected?={ systemConfig["default_timezone"] == "Asia/Tokyo" }>Japan/Korea (UTC+9)</option>
<option value="Australia/Darwin" selected?={ systemConfig["default_timezone"] == "Australia/Darwin" }>Australian Central (UTC+9:30)</option>
<option value="Australia/Sydney" selected?={ systemConfig["default_timezone"] == "Australia/Sydney" }>Australian Eastern (UTC+10/+11)</option>
<option value="Pacific/Auckland" selected?={ systemConfig["default_timezone"] == "Pacific/Auckland" }>New Zealand (UTC+12/+13)</option>
</select>
<p class="text-sm mt-2" style="color: var(--text-secondary)">Default timezone for users who haven't set their own.</p>
</div>
</div>
</form>
<div class="mt-6 card p-6">
<div class="flex items-center gap-2 mb-4">
@Icon("external", "h-5 w-5 shrink-0")
<h3 class="text-lg font-semibold" style="color: var(--text-primary)">URL Paths</h3>
</div>
<div class="space-y-2 text-sm" style="color: var(--text-secondary);">
<p><span class="font-medium uppercase tracking-wide text-xs" style="color: var(--text-secondary)">OPDS:</span> { systemConfig["base_url"] }/opds</p>
<p><span class="font-medium uppercase tracking-wide text-xs" style="color: var(--text-secondary)">API:</span> { systemConfig["base_url"] }/api</p>
<p><span class="font-medium uppercase tracking-wide text-xs" style="color: var(--text-secondary)">Device Sync:</span> { systemConfig["base_url"] }/api/sync</p>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
}
Reference in New Issue View Git Blame Copy Permalink