ui

package
v0.13.0 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: May 19, 2026 License: MIT Imports: 7 Imported by: 0

Documentation

Overview

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

Index

Constants

View Source 
const (
	DefaultTheme      = "github-light"
	DefaultLightTheme = "github-light"
	DefaultDarkTheme  = "github-dark"
)

Defaults applied when a user or guest has no stored preference, so first-time visitors land on GitHub Light with GitHub Dark as the paired dark variant instead of the device system preference.

Variables

View Source 
var Themes = []Theme{
	{ID: "light", Label: "Light", ClassName: "theme-light", IsDark: false},
	{ID: "dark", Label: "Dark", ClassName: "theme-dark", IsDark: true},
	{ID: "github-light", Label: "GitHub Light", ClassName: "theme-github-light", IsDark: false},
	{ID: "github-dark", Label: "GitHub Dark", ClassName: "theme-github-dark", IsDark: true},
	{ID: "material-light", Label: "Material Light", ClassName: "theme-material-light", IsDark: false},
	{ID: "material-dark", Label: "Material Dark", ClassName: "theme-material-dark", IsDark: true},
	{ID: "solarized-light", Label: "Solarized Light", ClassName: "theme-solarized-light", IsDark: false},
	{ID: "solarized-dark", Label: "Solarized Dark", ClassName: "theme-solarized-dark", IsDark: true},
	{ID: "dracula", Label: "Dracula", ClassName: "theme-dracula", IsDark: true},
	{ID: "nord", Label: "Nord", ClassName: "theme-nord", IsDark: true},
	{ID: "gruvbox-dark", Label: "Gruvbox Dark", ClassName: "theme-gruvbox-dark", IsDark: true},
	{ID: "monokai", Label: "Monokai", ClassName: "theme-monokai", IsDark: true},
}

Themes is the ordered list rendered in the theme picker. Add new themes by appending here and defining their tokens in input.css.

Functions

func AppDescFromContext 

func AppDescFromContext(ctx context.Context) string

func AppNameFromContext 

func AppNameFromContext(ctx context.Context) string

AppNameFromContext returns the app name set via WithAppName, or "Wick Mini Tools" as the fallback.

func Dialog added in v0.13.0 

func Dialog() templ.Component

Dialog renders the global confirm/alert modal shell mounted once per page via @Layout. JS helpers in web/public/js/dialog.js (wickConfirm / wickAlert) drive open/close + slot the title and body text. Using a single shared element keeps the modal stackable at the top of <body> so backdrop blur never gets clipped by a parent's overflow.

Why replace native confirm()/alert(): the browser dialogs render with OS chrome (white-on-black on Windows, grey-on-white on macOS, and they get blocked entirely on iOS Safari for cross-origin embeds). A custom modal lets every dialog inherit the project theme and behave consistently across pages.

func EffectiveDarkTheme added in v0.3.0 

func EffectiveDarkTheme(id string) string

EffectiveDarkTheme returns the stored dark-mode theme id or DefaultDarkTheme when unset.

func EffectiveLightTheme added in v0.3.0 

func EffectiveLightTheme(id string) string

EffectiveLightTheme returns the stored light-mode theme id or DefaultLightTheme when unset.

func EffectiveTheme added in v0.3.0 

func EffectiveTheme(id string) string

EffectiveTheme returns the active theme id, falling back to DefaultTheme when unset.

func Layout 

func Layout(title string) templ.Component
func Navbar(user *entity.User) templ.Component

Navbar is the shared top navigation bar used across all pages (tools, profile, etc.)

func NotFoundPage 

func NotFoundPage(user *entity.User) templ.Component

NotFoundPage is shown for both 404 (missing) and 403 (forbidden) so a signed-in user cannot distinguish "tool doesn't exist" from "tool exists but I'm not allowed". The message is intentionally vague.

func Palette 

func Palette() templ.Component

Palette renders the global command palette shell. Tool items are populated on first open via GET /api/tools (see web/public/js/palette.js).

func ProfileLayout added in v0.4.0 

func ProfileLayout(title string, active ProfileTabKey, user *entity.User) templ.Component

ProfileLayout is the shared chrome for every page under /profile/*. Mirrors AdminLayout: a single sticky navbar carries the logo, the "Profile" section label, the segmented tab pill group, and the theme/user controls — so children render against the full max-w-container width instead of a narrow account-style column.

func RenderNotFound 

func RenderNotFound(w http.ResponseWriter, r *http.Request, user *entity.User, status int)

RenderNotFound writes the NotFoundPage with the given status code. Use 404 for unknown paths, and 404 (not 403) for forbidden resources so the two cases are indistinguishable to the client.

func ScopedSetupBanner 

func ScopedSetupBanner(entry *MissingEntry, isAdmin bool) templ.Component

ScopedSetupBanner renders a single-module caution strip below the navbar when the module the user is currently viewing still has Required configs empty. nil entry suppresses the banner entirely. Admins get a Configure → link straight to the module's manager page; non-admins see a read-only nudge.

func StaticHandler 

func StaticHandler(prefix string, fsys fs.FS) http.Handler

StaticHandler serves files from fsys, stripping prefix, and returns 404 for directory paths so embedded asset trees don't leak via index listings.

func ThemeFromContext 

func ThemeFromContext(ctx context.Context) string

ThemeFromContext reads the theme id previously set via WithTheme.

func ThemePicker 

func ThemePicker(current Theme, lightPref, darkPref string) templ.Component

ThemePicker is the navbar control for switching themes. The left button is the quick toggle between Light and Dark (cycles based on the current theme's IsDark flag). The caret opens a dropdown listing every theme in Themes so the user can pick a custom palette. Posts go to /theme; the handler saves to user metadata and redirects back.

func ToolHeader added in v0.3.0 

func ToolHeader(name, description, icon, key string, hasConfigs bool, isAdmin bool) templ.Component

ToolHeader renders the shared per-tool top strip: icon box, name, description, and an admin-only Settings link pointing at the manager detail page. Drawn by NewToolRenderer between the setup banner and the tool body so every tool page has identical chrome without each module repeating the block. Tool bodies should omit their own <h1>/description — this is the canonical one.

func UserMenu 

func UserMenu(user *entity.User) templ.Component

UserMenu renders the user avatar dropdown used in all navbars. Shows avatar + dropdown (Profile, Sign out) when logged in, or a Sign in link.

func WithAppDescription 

func WithAppDescription(ctx context.Context, desc string) context.Context

func WithAppName 

func WithAppName(ctx context.Context, name string) context.Context

WithAppName stores the configurable app name in ctx so templates can render it without an explicit parameter.

func WithGuestTheme 

func WithGuestTheme(ctx context.Context, g GuestTheme) context.Context

WithGuestTheme stores guest theme prefs in ctx (populated by Session middleware).

func WithTheme 

func WithTheme(ctx context.Context, id string) context.Context

WithTheme stores the resolved theme id in ctx. Empty string means "no preference" and the layout falls back to the system-preference script.

Types

type GuestTheme 

type GuestTheme struct {
	Current string
	Light   string
	Dark    string
}

GuestTheme holds the three theme preferences stored in the plain guest cookie. Current is the active theme; Light and Dark remember the last picked theme of each mode so the toggle button can cycle back to them.

func GuestThemeFromContext 

func GuestThemeFromContext(ctx context.Context) GuestTheme

GuestThemeFromContext returns guest theme prefs set via WithGuestTheme.

type MissingEntry 

type MissingEntry struct {
	Scope   string // "variables", "tool", "job"
	Key     string // owner key; "" for variables
	Name    string // display label
	Icon    string
	URL     string // where to go to fix
	Missing []string
}

MissingEntry names a single owner (variables / tool / job) plus the config keys that are Required but empty. Collected app-wide and rendered globally by GlobalSetupBanner so operators see every incomplete module in one place — regardless of which page they're on.

type ProfileTabKey added in v0.4.0 

type ProfileTabKey string

ProfileTabKey identifies which tab should render as active. 

const (
	ProfileTabAccount     ProfileTabKey = "account"
	ProfileTabTokens      ProfileTabKey = "tokens"
	ProfileTabConnections ProfileTabKey = "connections"
	ProfileTabMCP         ProfileTabKey = "mcp"
	ProfileTabAgents      ProfileTabKey = "agents"
)

type Theme 

type Theme struct {
	ID        string // stored in user metadata
	Label     string // shown in UI
	ClassName string // applied to <html>
	IsDark    bool
}

Theme represents a selectable UI theme. The ClassName is the CSS class applied to <html> that drives the color palette overrides in web/src/input.css. IsDark marks themes that should also receive the "dark" class so Tailwind's `dark:` variants activate.

func ThemeByID 

func ThemeByID(id string) Theme

ThemeByID returns the theme for the given ID or the first matching default. Unknown IDs fall back to an empty Theme which callers should treat as "use system preference".

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.