add(web): basic layout and ui

web/templates/components/button/button.templ

@@ -0,0 +1,147 @@
+// templui component button - version: v0.85.0 installed by templui v0.85.0
+package button
+
+import (
+	"maot-shortner/web/resources/utils"
+	"strings"
+)
+
+type Variant string
+type Size string
+type Type string
+
+const (
+	VariantDefault     Variant = "default"
+	VariantDestructive Variant = "destructive"
+	VariantOutline     Variant = "outline"
+	VariantSecondary   Variant = "secondary"
+	VariantGhost       Variant = "ghost"
+	VariantLink        Variant = "link"
+)
+
+const (
+	TypeButton Type = "button"
+	TypeReset  Type = "reset"
+	TypeSubmit Type = "submit"
+)
+
+const (
+	SizeDefault Size = "default"
+	SizeSm      Size = "sm"
+	SizeLg      Size = "lg"
+	SizeIcon    Size = "icon"
+)
+
+type Props struct {
+	ID         string
+	Class      string
+	Attributes templ.Attributes
+	Variant    Variant
+	Size       Size
+	FullWidth  bool
+	Href       string
+	Target     string
+	Disabled   bool
+	Type       Type
+}
+
+templ Button(props ...Props) {
+	{{ var p Props }}
+	if len(props) > 0 {
+		{{ p = props[0] }}
+	}
+	if p.Type == "" {
+		{{ p.Type = TypeButton }}
+	}
+	if p.Href != "" && !p.Disabled {
+		<a
+			if p.ID != "" {
+				id={ p.ID }
+			}
+			href={ templ.SafeURL(p.Href) }
+			if p.Target != "" {
+				target={ p.Target }
+			}
+			class={
+				utils.TwMerge(
+					"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all",
+					"disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
+					"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+					"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+					"cursor-pointer",
+					p.variantClasses(),
+					p.sizeClasses(),
+					p.modifierClasses(),
+					p.Class,
+				),
+			}
+			{ p.Attributes... }
+		>
+			{ children... }
+		</a>
+	} else {
+		<button
+			if p.ID != "" {
+				id={ p.ID }
+			}
+			class={
+				utils.TwMerge(
+					"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all",
+					"disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
+					"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+					"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+					"cursor-pointer",
+					p.variantClasses(),
+					p.sizeClasses(),
+					p.modifierClasses(),
+					p.Class,
+				),
+			}
+			if p.Type != "" {
+				type={ string(p.Type) }
+			}
+			disabled?={ p.Disabled }
+			{ p.Attributes... }
+		>
+			{ children... }
+		</button>
+	}
+}
+
+func (b Props) variantClasses() string {
+	switch b.Variant {
+	case VariantDestructive:
+		return "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
+	case VariantOutline:
+		return "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
+	case VariantSecondary:
+		return "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80"
+	case VariantGhost:
+		return "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+	case VariantLink:
+		return "text-primary underline-offset-4 hover:underline"
+	default:
+		return "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90"
+	}
+}
+
+func (b Props) sizeClasses() string {
+	switch b.Size {
+	case SizeSm:
+		return "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"
+	case SizeLg:
+		return "h-10 rounded-md px-6 has-[>svg]:px-4"
+	case SizeIcon:
+		return "size-9"
+	default: // SizeDefault
+		return "h-9 px-4 py-2 has-[>svg]:px-3"
+	}
+}
+
+func (b Props) modifierClasses() string {
+	classes := []string{}
+	if b.FullWidth {
+		classes = append(classes, "w-full")
+	}
+	return strings.Join(classes, " ")
+}

web/templates/components/icon/icon.go

@@ -0,0 +1,117 @@
+// templui component icon - version: v0.85.0 installed by templui v0.85.0
+package icon
+
+import (
+	"context"
+	"fmt"
+	"io"
+	"sync"
+
+	"github.com/a-h/templ"
+)
+
+// iconContents caches the fully generated SVG strings for icons that have been used,
+// keyed by a composite key of name and props to handle different stylings.
+var (
+	iconContents = make(map[string]string)
+	iconMutex    sync.RWMutex
+)
+
+// Props defines the properties that can be set for an icon.
+type Props struct {
+	Size        int
+	Color       string
+	Fill        string
+	Stroke      string
+	StrokeWidth string // Stroke Width of Icon, Usage: "2.5"
+	Class       string
+}
+
+// Icon returns a function that generates a templ.Component for the specified icon name.
+func Icon(name string) func(...Props) templ.Component {
+	return func(props ...Props) templ.Component {
+		var p Props
+		if len(props) > 0 {
+			p = props[0]
+		}
+
+		// Create a unique key for the cache based on icon name and all relevant props.
+		// This ensures different stylings of the same icon are cached separately.
+		cacheKey := fmt.Sprintf("%s|s:%d|c:%s|f:%s|sk:%s|sw:%s|cl:%s",
+			name, p.Size, p.Color, p.Fill, p.Stroke, p.StrokeWidth, p.Class)
+
+		return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
+			iconMutex.RLock()
+			svg, cached := iconContents[cacheKey]
+			iconMutex.RUnlock()
+
+			if cached {
+				_, err = w.Write([]byte(svg))
+				return err
+			}
+
+			// Not cached, generate it
+			// The actual generation now happens once and is cached.
+			generatedSvg, err := generateSVG(name, p) // p (Props) is passed to generateSVG
+			if err != nil {
+				// Provide more context in the error message
+				return fmt.Errorf("failed to generate svg for icon '%s' with props %+v: %w", name, p, err)
+			}
+
+			iconMutex.Lock()
+			iconContents[cacheKey] = generatedSvg
+			iconMutex.Unlock()
+
+			_, err = w.Write([]byte(generatedSvg))
+			return err
+		})
+	}
+}
+
+// generateSVG creates an SVG string for the specified icon with the given properties.
+// This function is called when an icon-prop combination is not yet in the cache.
+func generateSVG(name string, props Props) (string, error) {
+	// Get the raw, inner SVG content for the icon name from our internal data map.
+	content, err := getIconContent(name) // This now reads from internalSvgData
+	if err != nil {
+		return "", err // Error from getIconContent already includes icon name
+	}
+
+	size := props.Size
+	if size <= 0 {
+		size = 24 // Default size
+	}
+
+	fill := props.Fill
+	if fill == "" {
+		fill = "none" // Default fill
+	}
+
+	stroke := props.Stroke
+	if stroke == "" {
+		stroke = props.Color // Fallback to Color if Stroke is not set
+	}
+	if stroke == "" {
+		stroke = "currentColor" // Default stroke color
+	}
+
+	strokeWidth := props.StrokeWidth
+	if strokeWidth == "" {
+		strokeWidth = "2" // Default stroke width
+	}
+
+	// Construct the final SVG string.
+	// The data-lucide attribute helps identify these as Lucide icons if needed.
+	return fmt.Sprintf("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"%d\" height=\"%d\" viewBox=\"0 0 24 24\" fill=\"%s\" stroke=\"%s\" stroke-width=\"%s\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"%s\" data-lucide=\"icon\">%s</svg>",
+		size, size, fill, stroke, strokeWidth, props.Class, content), nil
+}
+
+// getIconContent retrieves the raw inner SVG content for a given icon name.
+// It reads from the pre-generated internalSvgData map from icon_data.go.
+func getIconContent(name string) (string, error) {
+	content, exists := internalSvgData[name]
+	if !exists {
+		return "", fmt.Errorf("icon '%s' not found in internalSvgData map", name)
+	}
+	return content, nil
+}

web/templates/components/input/input.templ

@@ -0,0 +1,123 @@
+// templui component input - version: v0.85.0 installed by templui v0.85.0
+package input
+
+import (
+	"maot-shortner/web/templates/components/button"
+	"maot-shortner/web/templates/components/icon"
+	"maot-shortner/web/resources/utils"
+)
+
+type Type string
+
+const (
+	TypeText     Type = "text"
+	TypePassword Type = "password"
+	TypeEmail    Type = "email"
+	TypeNumber   Type = "number"
+	TypeTel      Type = "tel"
+	TypeURL      Type = "url"
+	TypeSearch   Type = "search"
+	TypeDate     Type = "date"
+	TypeTime     Type = "time"
+	TypeFile     Type = "file"
+)
+
+type Props struct {
+	ID               string
+	Class            string
+	Attributes       templ.Attributes
+	Name             string
+	Type             Type
+	Placeholder      string
+	Value            string
+	Disabled         bool
+	Readonly         bool
+	Required         bool
+	FileAccept       string
+	HasError         bool
+	NoTogglePassword bool
+}
+
+templ Input(props ...Props) {
+	{{ var p Props }}
+	if len(props) > 0 {
+		{{ p = props[0] }}
+	}
+	if p.Type == "" {
+		{{ p.Type = TypeText }}
+	}
+	if p.ID == "" {
+		{{ p.ID = utils.RandomID() }}
+	}
+	<div class="relative w-full">
+		<input
+			id={ p.ID }
+			type={ string(p.Type) }
+			if p.Name != "" {
+				name={ p.Name }
+			}
+			if p.Placeholder != "" {
+				placeholder={ p.Placeholder }
+			}
+			if p.Value != "" {
+				value={ p.Value }
+			}
+			if p.Type == TypeFile && p.FileAccept != "" {
+				accept={ p.FileAccept }
+			}
+			disabled?={ p.Disabled }
+			readonly?={ p.Readonly }
+			required?={ p.Required }
+			if p.HasError {
+				aria-invalid="true"
+			}
+			class={
+				utils.TwMerge(
+					// Base styles
+					"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
+					// Dark mode background
+					"dark:bg-input/30",
+					// Selection styles
+					"selection:bg-primary selection:text-primary-foreground",
+					// Placeholder
+					"placeholder:text-muted-foreground",
+					// File input styles
+					"file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+					// Focus styles
+					"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+					// Disabled styles
+					"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+					// Error/Invalid styles
+					"aria-invalid:ring-destructive/20 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40",
+					utils.If(p.HasError, "border-destructive ring-destructive/20 dark:ring-destructive/40"),
+					utils.If(p.Type == TypePassword && !p.NoTogglePassword, "pr-8"),
+					p.Class,
+				),
+			}
+			{ p.Attributes... }
+		/>
+		if p.Type == TypePassword && !p.NoTogglePassword {
+			@button.Button(button.Props{
+				Size:       button.SizeIcon,
+				Variant:    button.VariantGhost,
+				Class:      "absolute right-0 top-1/2 -translate-y-1/2 opacity-50 cursor-pointer",
+				Attributes: templ.Attributes{"data-tui-input-toggle-password": p.ID},
+			}) {
+				<span class="icon-open block">
+					@icon.Eye(icon.Props{
+						Size: 18,
+					})
+				</span>
+				<span class="icon-closed hidden">
+					@icon.EyeOff(icon.Props{
+						Size: 18,
+					})
+				</span>
+			}
+		}
+	</div>
+}
+
+templ Script() {
+	<script defer src="/web/static/js/input.min.js"></script>
+}

web/templates/components/label/label.templ

@@ -0,0 +1,42 @@
+// templui component label - version: v0.85.0 installed by templui v0.85.0
+package label
+
+import "maot-shortner/web/resources/utils"
+
+type Props struct {
+	ID         string
+	Class      string
+	Attributes templ.Attributes
+	For        string
+	Error      string
+}
+
+templ Label(props ...Props) {
+	{{ var p Props }}
+	if len(props) > 0 {
+		{{ p = props[0] }}
+	}
+	<label
+		if p.ID != "" {
+			id={ p.ID }
+		}
+		if p.For != "" {
+			for={ p.For }
+		}
+		class={
+			utils.TwMerge(
+				"text-sm font-medium leading-none inline-block",
+				utils.If(len(p.Error) > 0, "text-destructive"),
+				p.Class,
+			),
+		}
+		data-tui-label-disabled-style="opacity-50 cursor-not-allowed"
+		{ p.Attributes... }
+	>
+		{ children... }
+	</label>
+}
+
+templ Script() {
+	<script defer src="/web/static/js/label.min.js"></script>
+}