Skip to content

Commit 3d4c460

Browse files
0xmadmichiosw
0xmad
authored and
michiosw
committed
feat(web): add basic ui blocks and components
1 parent 1fc0aa6 commit 3d4c460

File tree

4 files changed

+63
-48
lines changed

4 files changed

+63
-48
lines changed

‎internal/web/templates/blocks/footer.templ‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
package blocks
2+
3+
css footer() {
4+
background-color: #333;
5+
color: #fff;
6+
padding: 20px;
7+
}
8+
9+
templ Footer(content string) {
10+
<footer class={ footer() } data-testid="footer">
11+
<p>{ content }</p>
12+
</footer>
13+
}

‎internal/web/templates/blocks/header.templ‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
package blocks
2+
3+
css header() {
4+
background-color: #333;
5+
color: #fff;
6+
padding: 20px 16px;
7+
}
8+
9+
css title() {
10+
margin: 0;
11+
}
12+
13+
templ Header(name string) {
14+
<header class={ header() } data-testid="header">
15+
<h1 class={ title() }>{ name }</h1>
16+
</header>
17+
}

‎internal/web/templates/components/button.templ‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
package components
2+
3+
templ Button(label string) {
4+
<button>
5+
{ label }
6+
</button>
7+
}

‎internal/web/templates/index.templ‎

Lines changed: 26 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,38 @@
11
package templates
22

3-
import "github.com/co-browser/agent-browser/internal/backend/models"
3+
import "github.com/co-browser/agent-browser/internal/web/templates/blocks"
44

5-
templ IndexPage(servers []models.MCPServer) {
5+
templ IndexPage() {
66
<!DOCTYPE html>
77
<html lang="en" data-theme="light">
8+
<html lang="en">
89
<head>
910
<meta charset="UTF-8"/>
1011
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
11-
<title>Agent Browser UI</title>
12-
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/dist/full.min.css" rel="stylesheet" type="text/css"/>
13-
<script src="https://cdn.tailwindcss.com"></script>
14-
<script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.min.js"></script>
15-
<script src="https://unpkg.com/htmx.org@1.9.10/dist/ext/sse.js"></script>
12+
<title>MCP Aggregator</title>
13+
<style>
14+
html, body {
15+
height: 100%;
16+
margin: 0;
17+
}
18+
19+
body {
20+
display: flex;
21+
flex-direction: column;
22+
min-height: 100vh;
23+
}
24+
25+
main {
26+
flex: 1;
27+
}
28+
</style>
1629
</head>
17-
<body class="bg-base-100">
18-
<div class="container mx-auto px-4 py-8">
19-
<h1 class="text-3xl font-bold mb-6">Agent Browser Control Panel</h1>
20-
<!-- SSE Connection -->
21-
<div hx-ext="sse" sse-connect="/api/events">
22-
<!-- Server list is rendered separately, tbody below listens for updates -->
23-
@ServerListComponent(servers)
24-
</div>
25-
<!-- Add Server Form -->
26-
<div class="mt-8 p-6 bg-base-200 rounded-lg shadow-md">
27-
<h2 class="text-xl font-semibold mb-4">Add New MCP Server</h2>
28-
<form
29-
hx-post="/api/mcp/servers"
30-
hx-target="#server-list-body"
31-
hx-swap="innerHTML"
32-
hx-indicator="#add-server-indicator"
33-
hx-on:after-request="if(event.detail.successful) this.reset()"
34-
class="space-y-4"
35-
>
36-
<div>
37-
<label for="name" class="label">
38-
<span class="label-text">Server Name</span>
39-
</label>
40-
<input id="name" type="text" name="name" placeholder="e.g., Development Server" class="input input-bordered w-full max-w-xs" required/>
41-
</div>
42-
<div>
43-
<label for="url" class="label">
44-
<span class="label-text">Server URL</span>
45-
</label>
46-
<input id="url" type="url" name="url" placeholder="e.g., http://localhost:8081" class="input input-bordered w-full max-w-xs" required/>
47-
</div>
48-
<div class="flex items-center space-x-2">
49-
<button type="submit" class="btn btn-primary">
50-
Add Server
51-
</button>
52-
<span id="add-server-indicator" class="loading loading-spinner loading-md htmx-indicator"></span>
53-
</div>
54-
<div id="add-server-error" class="text-red-500 mt-2"></div> <!-- Placeholder for error messages -->
55-
</form>
56-
</div>
57-
</div>
30+
<body style="margin: 0">
31+
@blocks.Header("Welcome to MCP Aggregator")
32+
<main>
33+
<!-- Add more content here -->
34+
</main>
35+
@blocks.Footer("Footer")
5836
</body>
5937
</html>
6038
}

0 commit comments

Comments
 (0)