feat(web): add block components

0xmad · michiosw · commit 9c3ef918d81d · 2025-04-17T18:58:48.000-07:00
- [x] Add servers list
- [x] Add server form
- [x] Add middleware for trailing slash
- [x] Add link component
diff --git a/internal/web/domain/server.go b/internal/web/domain/server.go
@@ -0,0 +1,6 @@
+package domain
+
+type ServerItem struct {
+	Name string
+	IP   string
+}
diff --git a/internal/web/handlers/ui.go b/internal/web/handlers/ui.go
@@ -4,44 +4,45 @@ package handlers
 import (
 	"net/http"
 
-	"github.com/co-browser/agent-browser/internal/backend"
-	"github.com/co-browser/agent-browser/internal/backend/models"
 	"github.com/co-browser/agent-browser/internal/log"
 	"github.com/co-browser/agent-browser/internal/web/templates"
 )
 
 // UIHandler holds dependencies for UI handlers.
 type UIHandler struct {
 	log log.Logger
-	bs  backend.Service // Add backend service dependency
 }
 
 // NewUIHandler creates a handler for serving the main UI page.
-// It now requires a logger and the backend service.
-func NewUIHandler(logger log.Logger, bs backend.Service) http.Handler {
-	h := &UIHandler{
-		log: logger,
-		bs:  bs, // Store backend service
-	}
-	return http.HandlerFunc(h.serveIndex)
+// It now requires a logger.
+func NewUIHandler(logger log.Logger) http.Handler {
+	h := &UIHandler{log: logger}
+	mux := http.NewServeMux()
+
+	mux.HandleFunc("/ui", h.serveIndex)
+	mux.HandleFunc("/ui/add", h.serveAddPage)
+
+	return mux
 }
 
 // serveIndex handles requests for the main UI page.
-// It fetches the initial server list from the backend service.
 func (h *UIHandler) serveIndex(w http.ResponseWriter, r *http.Request) {
-	// Fetch initial list of servers
-	servers, err := h.bs.ListMCPServers()
-	if err != nil {
-		h.log.Error().Err(err).Msg("failed to fetch initial server list for UI")
-		// Proceed with rendering an empty list or show an error message
-		servers = []models.MCPServer{} // Initialize empty slice to prevent nil panic in template
-		// Optionally: render an error message instead of the list
-		// http.Error(w, "failed to load server list", http.StatusInternalServerError)
-		// return
-	}
-
-	// Render the main page template, passing the servers
-	err = templates.IndexPage(servers).Render(r.Context(), w)
+	err := templates.IndexPage(templates.IndexPageProps{
+		Servers: []domain.ServerItem{
+			{
+				Name: "Server Alpha",
+				IP:   "192.168.1.10",
+			},
+			{
+				Name: "Server Beta",
+				IP:   "192.168.1.11",
+			},
+			{
+				Name: "Server Charlie",
+				IP:   "192.168.1.12",
+			},
+		},
+	}).Render(r.Context(), w)
 	if err != nil {
 		// Use the injected logger
 		h.log.Error().Err(err).Msg("failed to render index page template")
diff --git a/internal/web/middleware/middleware.go b/internal/web/middleware/middleware.go
@@ -1,2 +1,15 @@
 // Package middleware provides HTTP middleware components for the web server.
 package middleware
+
+import "net/http"
+
+func StripTrailingSlash(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if len(r.URL.Path) > 1 && r.URL.Path[len(r.URL.Path)-1] == '/' {
+			http.Redirect(w, r, r.URL.Path[:len(r.URL.Path)-1], http.StatusMovedPermanently)
+			return
+		}
+
+		next.ServeHTTP(w, r)
+	})
+}
diff --git a/internal/web/server.go b/internal/web/server.go
@@ -23,12 +23,13 @@ func NewMux(uiHandler http.Handler /* add apiHandler http.Handler later */) *htt
 	return mux
 }
 
+
 // NewServer creates the main HTTP server instance.
 func NewServer(mux *http.ServeMux) *http.Server {
 	// TODO: Make address configurable
 	return &http.Server{
 		Addr:    ":8080",
-		Handler: mux,
+		Handler: middleware.StripTrailingSlash(mux),
 	}
 }
 
diff --git a/internal/web/templates/add.templ b/internal/web/templates/add.templ
@@ -0,0 +1,10 @@
+package templates
+
+import "github.com/co-browser/agent-browser/internal/web/templates/blocks"
+
+type AddPageProps struct {
+}
+
+templ AddPage(props AddPageProps) {
+	@blocks.Main(blocks.AddServerForm())
+}
diff --git a/internal/web/templates/blocks/add_server_form.templ b/internal/web/templates/blocks/add_server_form.templ
@@ -0,0 +1,77 @@
+package blocks
+
+import "github.com/co-browser/agent-browser/internal/web/templates/components"
+
+css addServerForm() {
+	padding: 20px 16px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-width: 300px;
+}
+
+css addServerFormField() {
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 16px;
+}
+
+css addServerFormFieldLabel() {
+	font-size: 18px;
+	font-weight: bold;
+	margin-bottom: 4px;
+}
+
+css addServerFormFieldInput() {
+	height: 30px;
+	font-size: 16px;
+	padding: 8px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+}
+
+css addServerFormButton() {
+	height: 40px;
+	width: 100%;
+	background-color: #007bff;
+	color: white;
+	border: none;
+	border-radius: 4px;
+}
+
+templ AddServerForm() {
+	<section class={ addServerForm() } data-testid="add-server-form">
+		<h2>Add New Server</h2>
+		<form method="POST" action="/ui/add">
+			<div class={ addServerFormField() }>
+				<label class={ addServerFormFieldLabel() } for="name">
+					Server Name:
+				</label>
+				<input
+					class={ addServerFormFieldInput() }
+					id="name"
+					type="text"
+					name="name"
+					placeholder="Enter server name"
+					required
+				/>
+			</div>
+			<div class={ addServerFormField() }>
+				<label class={ addServerFormFieldLabel() } for="ip">
+					IP Address:
+				</label>
+				<input
+					class={ addServerFormFieldInput() }
+					id="ip"
+					type="text"
+					pattern="^((25[0-5]|2[0-4][0-9]|1?[0-9]{1,2})\.){3}(25[0-5]|2[0-4][0-9]|1?[0-9]{1,2})$"
+					name="ip"
+					placeholder="Enter ip address"
+					required
+				/>
+			</div>
+			@components.Button(components.ButtonProps{Label: "Add Server", Type: "submit", Class: addServerFormButton()})
+		</form>
+	</section>
+}
diff --git a/internal/web/templates/blocks/header.templ b/internal/web/templates/blocks/header.templ
@@ -6,12 +6,18 @@ css header() {
 	padding: 20px 16px;
 }
 
-css title() {
+css headerTitle() {
 	margin: 0;
 }
 
+css headerLink() {
+	text-decoration: none;
+	text-transform: none;
+	color: inherit;
+}
+
 templ Header(name string) {
 	<header class={ header() } data-testid="header">
-		<h1 class={ title() }>{ name }</h1>
+		<a class={ headerLink() } href="/ui"><h1 class={ headerTitle() }>{ name }</h1></a>
 	</header>
 }
diff --git a/internal/web/templates/blocks/main.templ b/internal/web/templates/blocks/main.templ
@@ -0,0 +1,35 @@
+package blocks
+
+templ Main(component templ.Component) {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<title>MCP Aggregator</title>
+			<style>
+      	html, body {
+        	height: 100%;
+          margin: 0;
+        }
+
+        body {
+          display: flex;
+          flex-direction: column;
+          min-height: 100vh;
+        }
+
+        main {
+          flex: 1;
+        }
+    	</style>
+		</head>
+		<body style="margin: 0">
+			@Header("Welcome to MCP Aggregator")
+			<main>
+				@component
+			</main>
+			@Footer("Footer")
+		</body>
+	</html>
+}
diff --git a/internal/web/templates/blocks/servers.templ b/internal/web/templates/blocks/servers.templ
@@ -0,0 +1,81 @@
+package blocks
+
+import (
+	"github.com/co-browser/agent-browser/internal/web/domain"
+	"github.com/co-browser/agent-browser/internal/web/templates/components"
+)
+
+css serverSection() {
+	padding: 20px 16px;
+}
+
+css serverTitle() {
+	margin: 0;
+}
+
+css serverList() {
+	list-style-type: none;
+	padding: 0;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	align-items: center;
+	gap: 16px;
+}
+
+css serverListItem() {
+	background-color: #444;
+	color: #fff;
+	padding: 10px;
+	margin: 5px 0;
+	border-radius: 4px;
+	display: grid;
+	grid-template-columns: 1fr auto;
+	align-items: center;
+	gap: 16px;
+}
+
+css serverListItemWrapper() {
+	display: flex;
+	flex-direction: column;
+}
+
+css serverListItemName() {
+	display: block;
+	font-weight: bold;
+}
+
+css serverListItemIP() {
+	display: block;
+	font-size: 0.9em;
+	font-style: italic;
+}
+
+css serverSectionHeader() {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+templ Servers(servers []domain.ServerItem) {
+	<section class={ serverSection() }>
+		<div class={ serverSectionHeader() }>
+			<h2 class={ serverTitle() }>MCP servers</h2>
+			@components.Link("Add server", "/ui/add")
+		</div>
+		<ul class={ serverList() } data-testid="servers">
+			for _, item := range servers {
+				@Server(item)
+			}
+		</ul>
+	</section>
+}
+
+templ Server(server domain.ServerItem) {
+	<li class={ serverListItem() }>
+		<div class={ serverListItemWrapper() }>
+			<strong class={ serverListItemName() }>{ server.Name }</strong>
+			<div class={ serverListItemIP() }>{ server.IP }</div>
+		</div>
+		@components.Button(components.ButtonProps{Label: "Remove", Type: "button"})
+	</li>
+}
diff --git a/internal/web/templates/components/button.templ b/internal/web/templates/components/button.templ
@@ -1,7 +1,17 @@
 package components
 
-templ Button(label string) {
-	<button>
-		{ label }
+type ButtonProps struct {
+	Label string
+	Type  string
+	Class templ.CSSClass
+}
+
+css buttonElement() {
+	cursor: pointer;
+}
+
+templ Button(props ButtonProps) {
+	<button class={ buttonElement(), props.Class } type={ props.Type }>
+		{ props.Label }
 	</button>
 }
diff --git a/internal/web/templates/components/link.templ b/internal/web/templates/components/link.templ
@@ -0,0 +1,16 @@
+package components
+
+css link() {
+	text-decoration: none;
+	text-transform: none;
+	color: inherit;
+	background-color: #007bff;
+	color: white;
+	padding: 4px 20px;
+	border-radius: 4px;
+	display: block;
+}
+
+templ Link(name string, href templ.SafeURL) {
+	<a class={ link() } href={ href }>{ name }</a>
+}

Original file line number	Diff line number	Diff line change
`@@ -23,12 +23,13 @@ func NewMux(uiHandler http.Handler /* add apiHandler http.Handler later /) htt`
`23`	`23`	`return mux`
`24`	`24`	`}`
`25`	`25`
	`26`	`+`
`26`	`27`	`// NewServer creates the main HTTP server instance.`
`27`	`28`	`func NewServer(mux http.ServeMux) http.Server {`
`28`	`29`	`// TODO: Make address configurable`
`29`	`30`	`return &http.Server{`
`30`	`31`	`Addr: ":8080",`
`31`		`- Handler: mux,`
	`32`	`+ Handler: middleware.StripTrailingSlash(mux),`
`32`	`33`	`}`
`33`	`34`	`}`
`34`	`35`
Original file line number	Diff line number	Diff line change
`@@ -6,12 +6,18 @@ css header() {`
`6`	`6`	`padding: 20px 16px;`
`7`	`7`	`}`
`8`	`8`
`9`		`-css title() {`
	`9`	`+css headerTitle() {`
`10`	`10`	`margin: 0;`
`11`	`11`	`}`
`12`	`12`
	`13`	`+css headerLink() {`
	`14`	`+ text-decoration: none;`
	`15`	`+ text-transform: none;`
	`16`	`+ color: inherit;`
	`17`	`+}`
	`18`	`+`
`13`	`19`	`templ Header(name string) {`
`14`	`20`	`<header class={ header() } data-testid="header">`
`15`		`- <h1 class={ title() }>{ name }</h1>`
	`21`	`+ <a class={ headerLink() } href="/ui"><h1 class={ headerTitle() }>{ name }</h1></a>`
`16`	`22`	`</header>`
`17`	`23`	`}`