feat: statefull client drawer

components/base/dialog/drawer.templ

@@ -1,6 +1,9 @@
 package dialog
 
-import "fmt"
+import (
+	"fmt"
+	icons "github.com/iota-uz/icons/phosphor"
+)
 
 type Direction int
 
@@ -19,16 +22,27 @@ var directions = map[Direction]string{
 }
 
 type DrawerProps struct {
+	ID        string
+	Open      bool
 	Direction Direction
 	Action    string
 	Attrs     templ.Attributes
 	Classes   templ.CSSClasses
 }
 
 templ Drawer(props DrawerProps) {
+	{{
+		listener := fmt.Sprintf("@%s.window", props.Action)
+		attrs := templ.Attributes{
+			"x-data": templ.SafeScriptInline("dialog", props.Open),
+			listener: "toggle",
+		}
+		if props.ID != "" {
+			attrs["id"] = props.ID
+		}
+	}}
 	<div
-		x-data="dialog"
-		{ templ.Attributes{fmt.Sprintf("@%s.window", props.Action): "toggle"}... }
+		{ attrs... }
 	>
 		<dialog
 			x-bind="dialog"
@@ -46,3 +60,46 @@ templ Drawer(props DrawerProps) {
 		</dialog>
 	</div>
 }
+
+type StdDrawerProps struct {
+	ID     string
+	Title  string
+	Action string
+	Open   bool
+	Attrs  templ.Attributes
+}
+
+templ StdViewDrawer(props StdDrawerProps) {
+	@Drawer(DrawerProps{
+		ID:        props.ID,
+		Direction: RTL,
+		Open:      props.Open,
+		Action:    props.Action,
+		Classes:   templ.Classes("flex items-stretch"),
+		Attrs:     props.Attrs,
+	}) {
+		<div class="bg-white w-3/4 md:w-2/3 ml-auto">
+			<form
+				method="dialog"
+				class="flex flex-col h-full"
+			>
+				<div
+					class={
+						"flex justify-between px-4 py-3",
+						"border-b border-primary",
+					}
+				>
+					<h3 class="font-medium">
+						{ props.Title }
+					</h3>
+					<div>
+						<button class="cursor-pointer">
+							@icons.XCircle(icons.Props{Size: "20"})
+						</button>
+					</div>
+				</div>
+				{ children... }
+			</form>
+		</div>
+	}
+}

components/base/tab/tab.templ

@@ -62,24 +62,25 @@ templ Link(href string, active bool) {
 }
 
 type BoostLinkProps struct {
-	Href   string
-	Active bool
-	Push   bool
+	Href string
+	Push bool
 }
 
 templ BoostedLink(props BoostLinkProps) {
 	{{
 		attrs := templ.Attributes{
+			"@click":    fmt.Sprintf("selectedTab = '%s'", props.Href),
 			"hx-get":    props.Href,
 			"hx-target": "#tab-content",
 			"hx-swap":   "innerHTML",
+			":class":    fmt.Sprintf("{'after:bg-brand-500': selectedTab === '%s'}", props.Href),
 		}
 		if props.Push {
 			attrs["hx-push-url"] = "true"
 		}
 	}}
 	@button.Ghost(button.Props{
-		Class: templ.CSSClasses{linkClass, templ.KV("after:bg-brand-500", props.Active)},
+		Class: templ.CSSClasses{linkClass},
 		Attrs: attrs,
 	}) {
 		{ children... }

modules/core/presentation/assets/js/alpine.js

@@ -103,8 +103,8 @@ async function animationsComplete(el) {
   );
 }
 
-let dialog = () => ({
-  open: false,
+let dialog = (initialState) => ({
+  open: initialState || false,
   toggle() {
     this.open = !this.open;
   },