ui

package
v0.28.2 Latest Latest
Warning

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

 Go to latest Published: Jul 6, 2026 License: MIT Imports: 8 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.

View Source 
const SystemThemeScript = `` /* 181-byte string literal not displayed */

SystemThemeScript is the one-line inline script that applies the device prefers-color-scheme to <html> before first paint. It mirrors the no-preference branch of Layout so a standalone SPA shell behaves the same as a server-rendered page when no theme is stored. The returned string is the script body only (no <script> tags).

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 HTMLThemeClass added in v0.19.0 

func HTMLThemeClass(ctx context.Context) string

HTMLThemeClass returns the class string that belongs on the root <html> element for the theme resolved from ctx, matching exactly what the server-rendered Layout applies via htmlThemeClasses. A standalone SPA shell (served outside Layout) injects this so it reflects the same theme as the rest of the app. An empty result means "no stored preference": the caller should fall back to the device color-scheme before first paint (see SystemThemeScript).

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.) Logo links to "/" by default; callers that have their own home (e.g. the Mini Tools launcher) use NavbarHome to point the logo back to that page. 

func NavbarHome(user *entity.User, homeHref string) templ.Component

NavbarHome is Navbar with an explicit logo target. The logo returns the user to homeHref instead of always bouncing through "/" (which redirects to the Agents flagship UI).

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 SetAgentsAvailable added in v0.17.0 

func SetAgentsAvailable(fn func() bool)

SetAgentsAvailable registers a function that reports whether the agents tool is running in this process. Called during server boot by the agents tool package. When not set, agents is treated as unavailable.

func SetNavParamsFn added in v0.18.0 

func SetNavParamsFn(fn func(ctx context.Context, user *entity.User) NavParams)

SetNavParamsFn registers the hook that resolves per-user nav flags.

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, showTheme bool) 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. UserMenu is the avatar dropdown (profile, tokens, …, sign out). Set showTheme when the surrounding chrome has no standalone ThemePicker (e.g. the agents sidebar) — it then renders a Theme section inside the menu. Pass false where a ThemePicker already sits next to the avatar (the home navbar, manager, profile layouts) to avoid a duplicate control.

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.

func WithVersionInfo added in v0.25.2 

func WithVersionInfo(ctx context.Context, v VersionInfo) context.Context

WithVersionInfo stores the version snapshot in ctx so the user-menu dropdown can render it without an explicit parameter (mirrors WithAppName).

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 NavParams struct {
	CanSeeAgents bool
}

NavParams holds per-user navigation visibility flags. 

func NavParamsFor(ctx context.Context, user *entity.User) NavParams

NavParamsFor returns NavParams for the given user. CanSeeAgents is true only when the agents process is running AND navParamsFn grants access.

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".

type VersionInfo added in v0.25.2 

type VersionInfo struct {
	AppVersion     string // running app version, RAW for display (e.g. "v0.1.63" or "dev")
	AppDev         bool   // dev/pseudo build — show a neutral "dev" badge, no comparison
	AppLatest      string // latest app release, when known
	AppUpdate      bool   // a newer app release is available
	AppUpdateKnown bool   // app update state is known (release source configured)

	WickVersion     string // embedded wick framework version, RAW for display
	WickDev         bool   // dev/pseudo build — show a neutral "dev" badge
	WickLatest      string // latest wick release, when known
	WickUpdate      bool   // a newer wick release is available
	WickUpdateKnown bool   // wick update state is known (check succeeded)

	// IsOfficial: the app's release source IS the canonical wick repo, so
	// app == framework == one release. The dropdown then shows a SINGLE
	// version line ("Wick") instead of separate App + Wick rows.
	IsOfficial bool

	WebURL string // link target for the version row (public wick site)
}

VersionInfo is the minimal version + update state the user-menu dropdown renders. It is populated from a background-refreshed cache (see internal/updater.VersionCache) and injected per request via WithVersionInfo, so the dropdown reads it with zero network cost.

This type is intentionally defined in the ui package (not imported from updater) to keep the view layer free of a dependency on the updater package — the server maps the cache's snapshot into this.

func VersionInfoFromContext added in v0.25.2 

func VersionInfoFromContext(ctx context.Context) VersionInfo

VersionInfoFromContext returns the version snapshot set via WithVersionInfo, or a zero value (no versions, no badges) when none was set — the dropdown then simply omits the version section.

func (VersionInfo) AnyUpdate added in v0.25.2 

func (v VersionInfo) AnyUpdate() bool

AnyUpdate reports whether either the app or the wick framework has a known available update — used to show a single "update available" dot on the avatar/menu without the user opening the dropdown.

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.