refactored view package
This commit is contained in:
50
internal/view/baseview/error_page.templ
Normal file
50
internal/view/baseview/error_page.templ
Normal file
@@ -0,0 +1,50 @@
|
||||
package baseview
|
||||
|
||||
import "strconv"
|
||||
|
||||
// Original Error template (keep for backwards compatibility where needed)
|
||||
templ ErrorPage(code int, err string, message string) {
|
||||
@ErrorPageWithDetails(code, err, message, "")
|
||||
}
|
||||
|
||||
// Enhanced Error template with optional details section
|
||||
templ ErrorPageWithDetails(code int, err string, message string, details string) {
|
||||
@Layout(err) {
|
||||
<div class="grid mt-24 left-0 right-0 top-0 bottom-0 place-content-center bg-base px-4">
|
||||
<div class="text-center max-w-2xl mx-auto">
|
||||
<h1 class="text-9xl text-text">{ strconv.Itoa(code) }</h1>
|
||||
<p class="text-2xl font-bold tracking-tight text-subtext1 sm:text-4xl">{ err }</p>
|
||||
// Always show the message from hws.HWSError.Message
|
||||
<p class="mt-4 text-subtext0">{ message }</p>
|
||||
// Conditionally show technical details in dropdown
|
||||
if details != "" {
|
||||
<div class="mt-8 text-left">
|
||||
<details class="bg-surface0 rounded-lg p-4 text-right">
|
||||
<summary class="text-left cursor-pointer text-subtext1 font-semibold select-none hover:text-text">
|
||||
Details
|
||||
<span class="text-xs text-subtext0 ml-2">(click to expand)</span>
|
||||
</summary>
|
||||
<div class="text-left mt-4 relative">
|
||||
<pre id="details" class="text-xs text-subtext0 font-mono whitespace-pre-wrap break-all bg-mantle p-4 rounded overflow-x-auto">{ details }</pre>
|
||||
</div>
|
||||
<button
|
||||
onclick="copyToClipboard('details', 'copyButton')"
|
||||
id="copyButton"
|
||||
class="mt-2 bg-mauve text-crust px-3 py-1 rounded text-xs hover:bg-mauve/75 transition hover:cursor-pointer"
|
||||
title="Copy to clipboard"
|
||||
>
|
||||
Copy
|
||||
</button>
|
||||
</details>
|
||||
</div>
|
||||
}
|
||||
<a href="/" class="mt-6 inline-block rounded-lg bg-mauve px-5 py-3 text-sm text-crust transition hover:bg-mauve/75">
|
||||
Go to homepage
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
if details != "" {
|
||||
<script src="/static/js/copytoclipboard.js"></script>
|
||||
}
|
||||
}
|
||||
}
|
||||
128
internal/view/baseview/footer.templ
Normal file
128
internal/view/baseview/footer.templ
Normal file
@@ -0,0 +1,128 @@
|
||||
package baseview
|
||||
|
||||
type FooterItem struct {
|
||||
Name string
|
||||
Href string
|
||||
}
|
||||
|
||||
// Specify the links to show in the footer
|
||||
func getFooterItems() []FooterItem {
|
||||
return []FooterItem{
|
||||
{Name: "About", Href: "/about"},
|
||||
}
|
||||
}
|
||||
|
||||
// Returns the template fragment for the Footer
|
||||
templ Footer() {
|
||||
<footer class="bg-mantle mt-10">
|
||||
<div class="relative mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
@backToTopButton()
|
||||
<div class="lg:flex lg:items-end lg:justify-between">
|
||||
@footerBranding()
|
||||
@footerLinks(getFooterItems())
|
||||
</div>
|
||||
<div class="lg:flex lg:items-end lg:justify-between">
|
||||
@footerCopyright()
|
||||
@themeSelector()
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
}
|
||||
|
||||
templ backToTopButton() {
|
||||
<div class="absolute end-4 top-4 sm:end-6 lg:end-8">
|
||||
<a
|
||||
class="inline-block rounded-full bg-teal p-2 text-crust
|
||||
shadow-sm transition hover:bg-teal/75"
|
||||
href="#main-content"
|
||||
>
|
||||
<span class="sr-only">Back to top</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="size-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293
|
||||
3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4
|
||||
4a1 1 0 010 1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ footerBranding() {
|
||||
<div>
|
||||
<div class="flex justify-center text-text lg:justify-start">
|
||||
<span class="text-2xl">OSL Stats</span>
|
||||
</div>
|
||||
<p class="mx-auto max-w-md text-center leading-relaxed text-subtext0">
|
||||
placeholder text
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ footerLinks(items []FooterItem) {
|
||||
<ul
|
||||
class="mt-12 flex flex-wrap justify-center gap-6 md:gap-8
|
||||
lg:mt-0 lg:justify-end lg:gap-12"
|
||||
>
|
||||
for _, item := range items {
|
||||
<li>
|
||||
<a
|
||||
class="transition hover:text-subtext1"
|
||||
href={ templ.SafeURL(item.Href) }
|
||||
>
|
||||
{ item.Name }
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
|
||||
templ footerCopyright() {
|
||||
<div>
|
||||
<p class="mt-4 text-center text-sm text-overlay0">
|
||||
by Haelnorr | placeholder text
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ themeSelector() {
|
||||
<div>
|
||||
<div class="mt-2 text-center">
|
||||
<label for="theme-select" class="hidden lg:inline">Theme</label>
|
||||
<select
|
||||
name="ThemeSelect"
|
||||
id="theme-select"
|
||||
class="mt-1.5 inline rounded-lg bg-surface0 p-2 w-fit"
|
||||
x-model="theme"
|
||||
>
|
||||
<template
|
||||
x-for="themeopt in [
|
||||
'dark',
|
||||
'light',
|
||||
'system',
|
||||
]"
|
||||
>
|
||||
<option
|
||||
x-text="displayThemeName(themeopt)"
|
||||
:value="themeopt"
|
||||
:selected="theme === themeopt"
|
||||
></option>
|
||||
</template>
|
||||
</select>
|
||||
<script>
|
||||
const displayThemeName = (value) => {
|
||||
if (value === "dark") return "Dark (Mocha)";
|
||||
if (value === "light") return "Light (Latte)";
|
||||
if (value === "system") return "System";
|
||||
};
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
52
internal/view/baseview/layout.templ
Normal file
52
internal/view/baseview/layout.templ
Normal file
@@ -0,0 +1,52 @@
|
||||
package baseview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/popup"
|
||||
import "git.haelnorr.com/h/oslstats/internal/contexts"
|
||||
|
||||
// Global base layout for all pages
|
||||
templ Layout(title string) {
|
||||
{{ devInfo := contexts.DevMode(ctx) }}
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
lang="en"
|
||||
x-data="{ theme: localStorage.getItem('theme') || 'system'}"
|
||||
x-init="$watch('theme', (val) => localStorage.setItem('theme', val))"
|
||||
x-bind:class="{'dark': theme === 'dark' || (theme === 'system' &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches)}"
|
||||
>
|
||||
<head>
|
||||
<script src="/static/js/theme.js"></script>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<title>{ title }</title>
|
||||
<link rel="icon" type="image/x-icon" href="/static/assets/favicon.ico"/>
|
||||
<link href="/static/css/output.css" rel="stylesheet"/>
|
||||
<script src="/static/vendored/htmx@2.0.8.min.js"></script>
|
||||
<script src="/static/vendored/htmx-ext-ws.min.js"></script>
|
||||
<script src="/static/vendored/alpinejs@3.15.4.min.js" defer></script>
|
||||
if devInfo.HTMXLog {
|
||||
<script>
|
||||
htmx.logAll();
|
||||
</script>
|
||||
}
|
||||
</head>
|
||||
<body
|
||||
class="bg-base text-text ubuntu-mono-regular overflow-x-hidden"
|
||||
hx-ext="ws"
|
||||
ws-connect={ devInfo.WebsocketBase + "/ws/notifications" }
|
||||
>
|
||||
@popup.ErrorModalContainer()
|
||||
@popup.ToastContainer()
|
||||
<div
|
||||
id="main-content"
|
||||
class="flex flex-col h-screen justify-between"
|
||||
>
|
||||
@Navbar()
|
||||
<div id="page-content" class="mb-auto md:px-5 md:pt-5">
|
||||
{ children... }
|
||||
</div>
|
||||
@Footer()
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
233
internal/view/baseview/navbar.templ
Normal file
233
internal/view/baseview/navbar.templ
Normal file
@@ -0,0 +1,233 @@
|
||||
package baseview
|
||||
|
||||
import (
|
||||
"context"
|
||||
"git.haelnorr.com/h/oslstats/internal/contexts"
|
||||
"git.haelnorr.com/h/oslstats/internal/db"
|
||||
)
|
||||
|
||||
type NavItem struct {
|
||||
Name string
|
||||
Href string
|
||||
}
|
||||
|
||||
type ProfileItem struct {
|
||||
Name string
|
||||
Href string
|
||||
}
|
||||
|
||||
// Main navigation items (centralized)
|
||||
func getNavItems() []NavItem {
|
||||
return []NavItem{
|
||||
{Name: "Seasons", Href: "/seasons"},
|
||||
}
|
||||
}
|
||||
|
||||
// Profile dropdown items (context-aware for admin)
|
||||
func getProfileItems(ctx context.Context) []ProfileItem {
|
||||
items := []ProfileItem{
|
||||
{Name: "Profile", Href: "/profile"},
|
||||
{Name: "Account", Href: "/account"},
|
||||
}
|
||||
|
||||
cache := contexts.Permissions(ctx)
|
||||
if cache != nil && cache.Roles["admin"] {
|
||||
items = append(items, ProfileItem{
|
||||
Name: "Admin Panel",
|
||||
Href: "/admin",
|
||||
})
|
||||
}
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
// Main navbar component
|
||||
templ Navbar() {
|
||||
{{ navItems := getNavItems() }}
|
||||
{{ user := db.CurrentUser(ctx) }}
|
||||
{{ profileItems := getProfileItems(ctx) }}
|
||||
<div x-data="{ open: false }">
|
||||
<header class="bg-crust">
|
||||
<div class="mx-auto flex h-16 max-w-7xl items-center gap-8 px-4 sm:px-6 lg:px-8">
|
||||
<!-- Logo -->
|
||||
<a class="block" href="/">
|
||||
<span class="text-3xl font-bold transition hover:text-green">
|
||||
OSL Stats
|
||||
</span>
|
||||
</a>
|
||||
<div class="flex flex-1 items-center justify-end sm:justify-between">
|
||||
<!-- Desktop nav links -->
|
||||
@desktopNav(navItems)
|
||||
<!-- User menu / Login button -->
|
||||
@userMenu(user, profileItems)
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Mobile side nav -->
|
||||
@mobileNav(navItems, user)
|
||||
</div>
|
||||
}
|
||||
|
||||
// Desktop navigation (private helper)
|
||||
templ desktopNav(navItems []NavItem) {
|
||||
<nav aria-label="Global" class="hidden sm:block">
|
||||
<ul class="flex items-center gap-6 text-xl">
|
||||
for _, item := range navItems {
|
||||
<li>
|
||||
<a
|
||||
class="text-subtext1 hover:text-green transition"
|
||||
href={ templ.SafeURL(item.Href) }
|
||||
>
|
||||
{ item.Name }
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
}
|
||||
|
||||
// User menu section (private helper)
|
||||
templ userMenu(user *db.User, profileItems []ProfileItem) {
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="sm:flex sm:gap-2">
|
||||
if user != nil {
|
||||
@profileDropdown(user, profileItems)
|
||||
} else {
|
||||
@loginButton()
|
||||
}
|
||||
</div>
|
||||
@mobileMenuButton()
|
||||
</div>
|
||||
}
|
||||
|
||||
// Profile dropdown (private helper)
|
||||
templ profileDropdown(user *db.User, items []ProfileItem) {
|
||||
<div x-data="{ isActive: false }" class="relative">
|
||||
<div
|
||||
class="inline-flex items-center overflow-hidden rounded-lg
|
||||
bg-sapphire hover:bg-sapphire/75 transition"
|
||||
>
|
||||
<button
|
||||
x-on:click="isActive = !isActive"
|
||||
class="h-full py-2 px-4 text-mantle hover:cursor-pointer"
|
||||
>
|
||||
<span class="sr-only">Profile</span>
|
||||
{ user.Username }
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="absolute end-0 z-10 mt-2 w-36 divide-y divide-surface2
|
||||
rounded-lg border border-surface1 bg-surface0 shadow-lg"
|
||||
role="menu"
|
||||
x-cloak
|
||||
x-transition
|
||||
x-show="isActive"
|
||||
x-on:click.away="isActive = false"
|
||||
x-on:keydown.escape.window="isActive = false"
|
||||
>
|
||||
<!-- Profile links -->
|
||||
<div class="p-2">
|
||||
for _, item := range items {
|
||||
<a
|
||||
href={ templ.SafeURL(item.Href) }
|
||||
class="block rounded-lg px-4 py-2 text-md hover:bg-crust"
|
||||
role="menuitem"
|
||||
>
|
||||
{ item.Name }
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
<!-- Logout -->
|
||||
<div class="p-2">
|
||||
<form hx-post="/logout">
|
||||
<button
|
||||
type="submit"
|
||||
class="flex w-full items-center gap-2 rounded-lg px-4 py-2
|
||||
text-md text-red hover:bg-red/25 hover:cursor-pointer"
|
||||
role="menuitem"
|
||||
@click="isActive=false"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
// Login button (private helper)
|
||||
templ loginButton() {
|
||||
<button
|
||||
class="hidden rounded-lg px-4 py-2 sm:block hover:cursor-pointer
|
||||
bg-green hover:bg-green/75 text-mantle transition"
|
||||
hx-post="/login"
|
||||
hx-swap="none"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
}
|
||||
|
||||
// Mobile menu toggle (private helper)
|
||||
templ mobileMenuButton() {
|
||||
<button
|
||||
@click="open = !open"
|
||||
class="block rounded-lg p-2.5 sm:hidden transition
|
||||
bg-surface0 text-subtext0 hover:text-overlay2/75"
|
||||
>
|
||||
<span class="sr-only">Toggle menu</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="size-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
}
|
||||
|
||||
// Mobile navigation drawer (private helper)
|
||||
templ mobileNav(navItems []NavItem, user *db.User) {
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition
|
||||
class="absolute w-full bg-mantle sm:hidden z-10"
|
||||
>
|
||||
<div class="px-4 py-6">
|
||||
<ul class="space-y-1">
|
||||
for _, item := range navItems {
|
||||
<li>
|
||||
<a
|
||||
href={ templ.SafeURL(item.Href) }
|
||||
class="block rounded-lg px-4 py-2 text-lg
|
||||
bg-surface0 text-text transition hover:bg-surface2"
|
||||
>
|
||||
{ item.Name }
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
if user == nil {
|
||||
<div class="px-4 pb-6">
|
||||
<ul class="space-y-1">
|
||||
<li class="flex justify-center items-center gap-2">
|
||||
<a
|
||||
class="w-26 px-4 py-2 rounded-lg bg-green text-mantle
|
||||
transition hover:bg-green/75 text-center"
|
||||
href="/login"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
Reference in New Issue
Block a user