add(web): add alpine and htmx

web/static/css/output.css

@@ -8,9 +8,11 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
     --spacing: 0.25rem;
     --container-2xl: 42rem;
     --text-sm: 0.875rem;
@@ -22,7 +24,9 @@
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-medium: 500;
+    --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -175,18 +179,54 @@
   }
 }
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
+  .collapse {
+    visibility: collapse;
+  }
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
+  .left-1\/2 {
+    left: calc(1/2 * 100%);
+  }
+  .z-50 {
+    z-index: 50;
+  }
   .container {
     width: 100%;
     @media (width >= 1600px) {
@@ -211,9 +251,15 @@
       max-width: 96rem;
     }
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mr-3 {
+    margin-right: calc(var(--spacing) * 3);
+  }
   .block {
     display: block;
   }
@@ -223,6 +269,9 @@
   .hidden {
     display: none;
   }
+  .inline {
+    display: inline;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -236,6 +285,9 @@
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .h-1 {
+    height: calc(var(--spacing) * 1);
+  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -272,25 +324,60 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
   .shrink {
     flex-shrink: 1;
   }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .-translate-x-1 {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-4 {
+    --tw-translate-y: calc(var(--spacing) * -4);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-4 {
+    --tw-translate-y: calc(var(--spacing) * 4);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .scale-3d {
     scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
   .cursor-pointer {
     cursor: pointer;
   }
+  .resize {
+    resize: both;
+  }
   .columns-2 {
     columns: 2;
   }
@@ -324,6 +411,17 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-lg {
+    border-radius: var(--radius);
+  }
   .rounded-md {
     border-radius: calc(var(--radius) - 2px);
   }
@@ -340,15 +438,24 @@
   .bg-background {
     background-color: var(--background);
   }
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
   .bg-destructive {
     background-color: var(--destructive);
   }
   .bg-gray-300 {
     background-color: var(--color-gray-300);
   }
+  .bg-gray-500 {
+    background-color: var(--color-gray-500);
+  }
   .bg-green-500 {
     background-color: var(--color-green-500);
   }
+  .bg-popover {
+    background-color: var(--popover);
+  }
   .bg-primary {
     background-color: var(--primary);
   }
@@ -361,6 +468,12 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -379,9 +492,15 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
   .text-4xl {
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
@@ -410,21 +529,40 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-blue-500 {
+    color: var(--color-blue-500);
+  }
   .text-destructive {
     color: var(--destructive);
   }
+  .text-green-500 {
+    color: var(--color-green-500);
+  }
+  .text-popover-foreground {
+    color: var(--popover-foreground);
+  }
   .text-primary {
     color: var(--primary);
   }
   .text-primary-foreground {
     color: var(--primary-foreground);
   }
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
   .text-secondary-foreground {
     color: var(--secondary-foreground);
   }
+  .text-yellow-500 {
+    color: var(--color-yellow-500);
+  }
   .italic {
     font-style: italic;
   }
@@ -434,13 +572,25 @@
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
+  .opacity-75 {
+    opacity: 75%;
+  }
+  .opacity-90 {
+    opacity: 90%;
+  }
   .shadow-xs {
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-destructive {
+    --tw-ring-color: var(--destructive);
+  }
   .ring-destructive\/20 {
     --tw-ring-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
@@ -451,6 +601,11 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[color\,box-shadow\] {
     transition-property: color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -461,6 +616,14 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -582,6 +745,13 @@
       }
     }
   }
+  .hover\:opacity-100 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .focus-visible\:border-ring {
     &:focus-visible {
       border-color: var(--ring);
@@ -652,6 +822,11 @@
       }
     }
   }
+  .md\:max-w-\[420px\] {
+    @media (width >= 48rem) {
+      max-width: 420px;
+    }
+  }
   .md\:text-sm {
     @media (width >= 48rem) {
       font-size: var(--text-sm);
@@ -864,6 +1039,26 @@
   inherits: false;
   initial-value: 1;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -947,6 +1142,14 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -956,6 +1159,11 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
@@ -974,6 +1182,8 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
+      --tw-duration: initial;
+      --tw-ease: initial;
     }
   }
 }

web/static/js/toast.min.js

@@ -0,0 +1 @@
+(()=>{(function(){if(typeof window.toastHandler>"u"){let a=function(t){if(!t||t.hasAttribute("data-initialized")||(t.setAttribute("data-initialized","true"),window.toasts.has(t)))return;let i=parseInt(t.getAttribute("data-tui-toast-duration")||"0"),r=t.querySelector("[data-tui-toast-progress]"),d=t.querySelector("[data-tui-toast-dismiss]"),e={timer:null,remaining:i,startTime:Date.now(),progress:r,paused:!1};window.toasts.set(t,e);function o(){clearTimeout(e.timer),t.classList.remove("toast-enter-active"),t.classList.add("toast-leave-active"),t.addEventListener("transitionend",()=>{t.remove(),window.toasts.delete(t)},{once:!0})}function u(n){n<=0||(clearTimeout(e.timer),e.startTime=Date.now(),e.remaining=n,e.paused=!1,e.timer=setTimeout(o,n),e.progress&&(e.progress.style.transition=`width ${n}ms linear`,e.progress.offsetWidth,e.progress.style.width="0%"))}function l(){if(!(e.paused||e.remaining<=0)&&(clearTimeout(e.timer),e.remaining-=Date.now()-e.startTime,e.paused=!0,e.progress)){let n=window.getComputedStyle(e.progress).width;e.progress.style.transition="none",e.progress.style.width=n}}function c(){!e.paused||e.remaining<=0||u(e.remaining)}i>0&&(t.addEventListener("mouseenter",l),t.addEventListener("mouseleave",c)),d&&d.addEventListener("click",o),setTimeout(()=>{t.classList.add("toast-enter-active"),e.progress&&(e.progress.style.width="100%"),u(i)},50)},s=function(t=document){let i=[];t instanceof Element&&t.matches("[data-tui-toast]")&&(t.hasAttribute("data-initialized")||i.push(t)),t&&typeof t.querySelectorAll=="function"&&t.querySelectorAll("[data-tui-toast]:not([data-initialized])").forEach(r=>{i.push(r)}),i.forEach(a)};var m=a,f=s;window.toastHandler=!0,window.toasts=new Map,window.templUI=window.templUI||{},window.templUI.toast={init:s},document.addEventListener("DOMContentLoaded",()=>s())}})();})();

web/templates/components/toast/toast.templ

@@ -0,0 +1,210 @@
+// templui component toast - version: v0.85.0 installed by templui v0.85.0
+package toast
+
+import (
+	"maot-shortner/web/templates/components/button"
+	"maot-shortner/web/templates/components/icon"
+	"maot-shortner/web/resources/utils"
+	"strconv"
+)
+
+type Variant string
+type Position string
+
+const (
+	VariantDefault Variant = "default"
+	VariantSuccess Variant = "success"
+	VariantError   Variant = "error"
+	VariantWarning Variant = "warning"
+	VariantInfo    Variant = "info"
+)
+
+const (
+	PositionTopRight     Position = "top-right"
+	PositionTopLeft      Position = "top-left"
+	PositionTopCenter    Position = "top-center"
+	PositionBottomRight  Position = "bottom-right"
+	PositionBottomLeft   Position = "bottom-left"
+	PositionBottomCenter Position = "bottom-center"
+)
+
+type Props struct {
+	ID            string
+	Class         string
+	Attributes    templ.Attributes
+	Title         string
+	Description   string
+	Variant       Variant
+	Position      Position
+	Duration      int
+	Dismissible   bool
+	ShowIndicator bool
+	Icon          bool
+}
+
+templ Toast(props ...Props) {
+	@ToastCSS()
+	{{ var p Props }}
+	if len(props) > 0 {
+		{{ p = props[0] }}
+	}
+	if p.ID == "" {
+		{{ p.ID = utils.RandomID() }}
+	}
+	{{ p = p.defaults() }}
+	{{ isTop := p.Position == PositionTopRight || p.Position == PositionTopLeft || p.Position == PositionTopCenter }}
+	{{ isBottom := p.Position == PositionBottomRight || p.Position == PositionBottomLeft || p.Position == PositionBottomCenter }}
+	<div
+		id={ p.ID }
+		data-tui-toast
+		data-tui-toast-duration={ strconv.Itoa(p.Duration) }
+		class={ utils.TwMerge(
+			"z-50 fixed pointer-events-auto p-4",
+			"opacity-0 transform transition-all duration-300 ease-out",
+			utils.If(isTop, "top-0"),
+			utils.If(isBottom, "bottom-0"),
+			utils.If(isTop, "translate-y-4"),
+			utils.If(isBottom, "-translate-y-4"),
+			utils.If(p.Position == PositionTopRight || p.Position == PositionBottomRight, "right-0"),
+			utils.If(p.Position == PositionTopLeft || p.Position == PositionBottomLeft, "left-0"),
+			utils.If(p.Position == PositionTopCenter || p.Position == PositionBottomCenter, "left-1/2 -translate-x-1/2"),
+			"w-full md:max-w-[420px]",
+			p.Class,
+		) }
+		{ p.Attributes... }
+	>
+		<div class="w-full bg-popover text-popover-foreground rounded-lg shadow-xs border pt-5 pb-4 px-4 flex items-center justify-center relative overflow-hidden">
+			if p.ShowIndicator {
+				@indicator(p)
+			}
+			if p.Icon {
+				@toastIcon(p)
+			}
+			<span class="flex-1 min-w-0">
+				@title(p)
+				@description(p)
+			</span>
+			if p.Dismissible {
+				@dismissButton()
+			}
+		</div>
+	</div>
+}
+
+templ indicator(p Props) {
+	<div class="absolute top-0 left-0 right-0 h-1">
+		<div
+			data-tui-toast-progress
+			class={ utils.TwMerge(
+				"absolute inset-0",
+				typeClass(p.Variant),
+			) }
+		></div>
+	</div>
+}
+
+templ toastIcon(p Props) {
+	if p.Variant == VariantSuccess {
+		@icon.CircleCheck(icon.Props{Size: 22, Class: "text-green-500 mr-3 flex-shrink-0"})
+	} else if p.Variant == VariantError {
+		@icon.CircleX(icon.Props{Size: 22, Class: "text-red-500 mr-3 flex-shrink-0"})
+	} else if p.Variant == VariantWarning {
+		@icon.TriangleAlert(icon.Props{Size: 22, Class: "text-yellow-500 mr-3 flex-shrink-0"})
+	} else if p.Variant == VariantInfo {
+		@icon.Info(icon.Props{Size: 22, Class: "text-blue-500 mr-3 flex-shrink-0"})
+	}
+}
+
+templ title(p Props) {
+	if p.Title != "" {
+		<p class="text-sm font-semibold truncate">{ p.Title }</p>
+	}
+}
+
+templ description(p Props) {
+	if p.Description != "" {
+		<p class="text-sm opacity-90 mt-1">{ p.Description }</p>
+	}
+}
+
+templ dismissButton() {
+	@button.Button(button.Props{
+		Size:    button.SizeIcon,
+		Variant: button.VariantGhost,
+		Attributes: templ.Attributes{
+			"aria-label":         "Close",
+			"data-tui-toast-dismiss": "",
+			"type":               "button",
+		},
+	}) {
+		@icon.X(icon.Props{
+			Size:  18,
+			Class: "opacity-75 hover:opacity-100",
+		})
+	}
+}
+
+func (p Props) defaults() Props {
+	if p.Variant == "" {
+		p.Variant = VariantDefault
+	}
+	if p.Position == "" {
+		p.Position = PositionBottomRight
+	}
+	if p.Duration == 0 {
+		p.Duration = 3000
+	}
+	return p
+}
+
+func typeClass(t Variant) string {
+	switch t {
+	case VariantDefault:
+		return "bg-gray-500"
+	case VariantSuccess:
+		return "bg-green-500"
+	case VariantError:
+		return "bg-red-500"
+	case VariantWarning:
+		return "bg-yellow-500"
+	case VariantInfo:
+		return "bg-blue-500"
+	default:
+		return ""
+	}
+}
+
+var cssHandle = templ.NewOnceHandle()
+
+templ ToastCSS() {
+	@cssHandle.Once() {
+		<style nonce={ templ.GetNonce(ctx) }>
+			[data-tui-toast].toast-enter {
+				opacity: 0;
+				/* Initial vertical offset is handled by classes in the component */
+			}
+			[data-tui-toast].toast-enter-active {
+				opacity: 1;
+				transform: translateY(0); /* Only handle vertical transition */
+			}
+			[data-tui-toast].toast-leave {
+				opacity: 1;
+				transform: translateY(0); /* Start leave from final vertical position */
+			}
+			[data-tui-toast].toast-leave-active {
+				opacity: 0;
+				/* Apply final vertical offset based on position */
+			}
+			[data-tui-toast][class*=" top-"].toast-leave-active {
+				transform: translateY(1rem); /* Move down */
+			}
+			[data-tui-toast][class*=" bottom-"].toast-leave-active {
+				transform: translateY(-1rem); /* Move up */
+			}
+		</style>
+	}
+}
+
+templ Script() {
+	<script defer src="static/js/toast.min.js"></script>
+}

web/templates/layouts/main.templ

@@ -3,6 +3,7 @@ package layouts
 import (
 	"maot-shortner/web/templates/components/input"
 	"maot-shortner/web/templates/components/label"
+	"maot-shortner/web/templates/components/toast"
 	"maot-shortner/web/templates/modules"
 )
 
@@ -16,6 +17,9 @@ templ MainLayout() {
 			<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico"/>
 			@input.Script()
 			@label.Script()
+			@toast.Script()
+			<script src="/static/js/htmx.min.js"></script>
+			<script src="/static/js/alpine.min.js"></script>
 		</head>
 		<body class="h-full">
 			<div class="h-full flex flex-col">

web/templates/pages/home.templ

@@ -26,6 +26,7 @@ templ Home() {
 					@icon.Send(icon.Props{Size: 20})
 				}
 			</div>
+			<div id="toast-container"></div>
 		</div>
 	}
 }