some styling

examples/chat/components/input.go

@@ -35,6 +35,7 @@ func Input(props InputProps) *h.Element {
 		h.If(props.Name != "", h.Name(props.Name)),
 		h.If(props.Children != nil, h.Children(props.Children...)),
 		h.If(props.Required, h.Required()),
+		h.If(props.Placeholder != "", h.Placeholder(props.Placeholder)),
 		h.If(props.DefaultValue != "", h.Attribute("value", props.DefaultValue)),
 		validation,
 	)

examples/chat/pages/chat.$id.go

@@ -26,16 +26,16 @@ func ChatRoom(ctx *h.RequestContext) *h.Page {
 				),
 
 				h.HxOnWsClose(
-					js.EvalJs(`
+					js.EvalJs(fmt.Sprintf(`
 						const reason = e.detail.event.reason
 						if(['invalid room', 'no session'].includes(reason)) {
-							window.location.href = '/';
+							window.location.href = '/?roomId=%s';
 						} else if(e.detail.event.code === 1011) { 
 							window.location.reload()
 						} else {
 							console.error('Connection closed:', e.detail.event)
 						}
-					`),
+					`, roomId)),
 				),
 
 				h.Class("flex flex-row min-h-screen bg-neutral-100"),
@@ -88,6 +88,15 @@ func roomNameHeader(ctx *h.RequestContext) *h.Element {
 	return h.Div(
 		h.Class("bg-neutral-700 text-white p-3 shadow-sm w-full fixed top-0 left-0 flex justify-center z-10"),
 		h.H2F(room.Name, h.Class("text-lg font-bold")),
+		h.Div(
+			h.Class("absolute right-5 top-3 cursor-pointer"),
+			h.Text("Share"),
+			h.OnClick(
+				js.EvalJs(`
+						alert("Share this url with your friends:\n " + window.location.href)
+					`),
+			),
+		),
 	)
 }
 

examples/chat/pages/index.go

@@ -17,8 +17,9 @@ func ChatAppFirstScreen(ctx *h.RequestContext) *h.Page {
 					h.Form(
 						h.Attribute("hx-swap", "none"),
 						h.PostPartial(partials.CreateOrJoinRoom),
-						h.Class("flex flex-col gap-3"),
+						h.Class("flex flex-col gap-6"),
 
+						// Username input at the top
 						components.Input(components.InputProps{
 							Id:       "username",
 							Name:     "username",
@@ -30,19 +31,22 @@ func ChatAppFirstScreen(ctx *h.RequestContext) *h.Page {
 							},
 						}),
 
+						// Single box for Create or Join a Chat Room
 						h.Div(
-							h.Class("mt-6 flex flex-col gap-3"),
+							h.Class("p-4 border border-gray-300 rounded-md flex flex-col gap-6"),
 
+							// Create New Chat Room input
 							components.Input(components.InputProps{
 								Name:        "new-chat-room",
-								Label:       "Create a New Chat Room",
-								Placeholder: "Chat Room Name",
+								Label:       "Create a new chat room",
+								Placeholder: "Enter chat room name",
 								Children: []h.Ren{
 									h.Attribute("autocomplete", "off"),
 									h.MaxLength(20),
 								},
 							}),
 
+							// OR divider
 							h.Div(
 								h.Class("flex items-center justify-center gap-4"),
 								h.Div(h.Class("border-t border-gray-300 flex-grow")),
@@ -50,11 +54,13 @@ func ChatAppFirstScreen(ctx *h.RequestContext) *h.Page {
 								h.Div(h.Class("border-t border-gray-300 flex-grow")),
 							),
 
+							// Join Chat Room input
 							components.Input(components.InputProps{
-								Id:          "join-chat-room",
-								Name:        "join-chat-room",
-								Label:       "Join a Chat Room",
-								Placeholder: "Chat Room Id",
+								Id:           "join-chat-room",
+								Name:         "join-chat-room",
+								Label:        "Join an existing chat room",
+								Placeholder:  "Enter chat room ID",
+								DefaultValue: ctx.QueryParam("roomId"),
 								Children: []h.Ren{
 									h.Attribute("autocomplete", "off"),
 									h.MaxLength(100),
@@ -62,7 +68,10 @@ func ChatAppFirstScreen(ctx *h.RequestContext) *h.Page {
 							}),
 						),
 
+						// Error message
 						components.FormError(""),
+
+						// Submit button at the bottom
 						components.PrimaryButton(components.ButtonProps{
 							Type: "submit",
 							Text: "Submit",