chat screen layout

internal/pwa/components/hello.go

@@ -1,6 +1,8 @@
 package components
 
 import (
+	"fmt"
+
 	"github.com/maxence-charriere/go-app/v9/pkg/app"
 	"github.com/mlctrez/goapp-mdc/pkg/bar"
 	"github.com/mlctrez/goapp-mdc/pkg/icon"
@@ -49,48 +51,53 @@ func (h *Hello) OnMount(ctx app.Context) {
 }
 
 func (h *Hello) Render() app.UI {
-	var actions []app.HTMLButton
-	if h.isAppInstallable {
-		actions = append(actions, icon.MIDownload.Button().Title("Install PWA").
-			OnClick(func(ctx app.Context, e app.Event) { ctx.ShowAppInstallPrompt() }))
-	}
-	actions = append(actions, icon.MIRefresh.Button().Title("reload the page").
-		OnClick(func(ctx app.Context, e app.Event) { ctx.Reload() }))
 
 	topBar := &bar.TopAppBar{Title: "Salty IM",
-		// if there is a need for a navigation menu, include this next line
-		//Navigation: []app.HTMLButton{icon.MIMenu.Button()},
-		Fixed: true, ScrollTarget: "main-content", Actions: actions,
+		Navigation:   []app.HTMLButton{icon.MIMenu.Button()},
+		Fixed:        true,
+		ScrollTarget: "main-content",
+		Actions:      h.topActions(),
 	}
 
 	if h.chatInput == nil {
 		h.chatInput = &textfield.TextField{Id: "chat-input"}
 	}
 
-	return app.Div().
-		Body(
-			&AppUpdateBanner{},
-			topBar,
-			app.Div().Class("main-content").ID("main-content").Body(
-				topBar.Main().Body(
-					app.H3().Text(introText),
-					app.Range(h.messages).Slice(func(i int) app.UI {
-						return app.P().Text(h.messages[i])
-					}),
-					app.Hr(),
+	return app.Div().Body(
+		&AppUpdateBanner{},
+		topBar,
+		app.Div().Class("main-content").ID("main-content").Body(
+			topBar.Main().Body(
+				app.Div().ID("wrapper").Body(
+					app.Div().ID("chatbox").Body(
+						app.Range(h.messages).Slice(func(i int) app.UI {
+							return app.P().Text(h.messages[i])
+						}),
+					),
 					app.Form().OnSubmit(func(ctx app.Context, e app.Event) {
+						fmt.Println("app.Form().OnSubmit()")
 						e.PreventDefault()
-						msg := h.chatInput.Value
-						// send message to pub endpoint
-						// clear message
+						h.messages = append(h.messages, h.chatInput.Value)
 						h.chatInput.Value = ""
-						// append message to current message list
-						h.messages = append(h.messages, msg)
 					}).Body(
 						h.chatInput,
-						icon.MISend.Button(),
+						icon.MISend.Button().ID("chat-send"),
 					),
 				),
 			),
-		)
+		),
+	)
+}
+
+func (h *Hello) topActions() (actions []app.HTMLButton) {
+
+	if h.isAppInstallable {
+		actions = append(actions, icon.MIDownload.Button().Title("Install PWA").
+			OnClick(func(ctx app.Context, e app.Event) { ctx.ShowAppInstallPrompt() }))
+	}
+
+	actions = append(actions, icon.MIRefresh.Button().Title("reload the page").
+		OnClick(func(ctx app.Context, e app.Event) { ctx.Reload() }))
+
+	return actions
 }

internal/web/css/style.css

@@ -10,6 +10,38 @@ body {
     margin-right: 5px;
 }
 
+
+form {
+    display: flex;
+    gap: 5px;
+    justify-content: flex-start;
+}
+
+#wrapper {
+    margin: 0px;
+    background: #eee;
+    max-width: 100%;
+}
+
+#chatbox {
+    text-align: left;
+    box-sizing: border-box;
+    padding: 10px;
+    background: #fff;
+    height: calc(100vh - 130px);
+    width: 100%;
+    overflow: auto;
+}
+
+#chat-input {
+    flex: 1;
+}
+
+#chat-send {
+    padding-top: 16px;
+}
+
+
 @font-face {
     font-family: 'Material Icons';
     font-style: normal;