Made the table prettier!

api/createroom.go

@@ -34,11 +34,11 @@ func CreateRoomHandler(c echo.Context) error {
 	}
 
 	// Start building the HTML content for the updated list of rooms
-	htmlContent := "<div id='room-list'>"
+	htmlContent := "<tbody id='room-list'>"
 	for _, room := range rooms {
-		htmlContent += fmt.Sprintf("<div class='room-name'>%s <button hx-delete='/api/room/%s' hx-target='#room-list' hx-swap='outerHTML'>❌</button></div>", room.RoomName, room.ID)
+		htmlContent += fmt.Sprintf("<tr class='hover border-white'><td class='break-all max-w-[200px] md:max-w-[400px]'>%s</td> <td><button class='m-2' hx-delete='/api/room/%s' hx-target='#room-list' hx-swap='outerHTML'>❌</button></td></tr>", room.RoomName, room.ID)
 	}
-	htmlContent += "</div>"
+	htmlContent += "</tbody>"
 
 	// Return the dynamically generated HTML content
 	return c.HTML(http.StatusOK, htmlContent)

api/deleteroom.go

@@ -34,11 +34,11 @@ func DeleteRoomHandler(c echo.Context) error {
 	}
 
 	// Start building the HTML content for the updated list of rooms
-	htmlContent := "<div id='room-list'>"
+	htmlContent := "<tbody id='room-list'>"
 	for _, room := range rooms {
-		htmlContent += fmt.Sprintf("<div class='room-name'>%s <button hx-delete='/api/room/%s' hx-target='#room-list' hx-swap='outerHTML'>❌</button></div>", room.RoomName, room.ID)
+		htmlContent += fmt.Sprintf("<tr class='hover border-white'><td class='break-all max-w-[200px] md:max-w-[400px]'>%s</td> <td><button class='m-2' hx-delete='/api/room/%s' hx-target='#room-list' hx-swap='outerHTML'>❌</button></td></tr>", room.RoomName, room.ID)
 	}
-	htmlContent += "</div>"
+	htmlContent += "</tbody>"
 
 	// Return the dynamically generated HTML content
 	return c.HTML(http.StatusOK, htmlContent)

api/getroomlist.go

@@ -23,11 +23,11 @@ func GetAllRoomsHandler(c echo.Context) error {
 	}
 
 	// Start building the HTML content for the updated list of rooms
-	htmlContent := "<div id='room-list'>"
+	htmlContent := "<tbody id='room-list'>"
 	for _, room := range rooms {
-		htmlContent += fmt.Sprintf("<div class='room-name'>%s <button hx-delete='/api/room/%s' hx-target='#room-list' hx-swap='outerHTML'>❌</button></div>", room.RoomName, room.ID)
+		htmlContent += fmt.Sprintf("<tr class='hover border-white'><td class='break-all max-w-[200px] md:max-w-[400px]'>%s</td> <td><button class='m-2' hx-delete='/api/room/%s' hx-target='#room-list' hx-swap='outerHTML'>❌</button></td></tr>", room.RoomName, room.ID)
 	}
-	htmlContent += "</div>"
+	htmlContent += "</tbody>"
 
 	// Return the dynamically generated HTML content
 	return c.HTML(http.StatusOK, htmlContent)

go.mod

@@ -18,7 +18,7 @@ require (
 	github.com/labstack/gommon v0.4.2 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
-	golang.org/x/net v0.26.0 // indirect
+	golang.org/x/net v0.27.0 // indirect
 	golang.org/x/oauth2 v0.21.0 // indirect
 	golang.org/x/text v0.16.0 // indirect
 	golang.org/x/time v0.5.0 // indirect
@@ -34,6 +34,6 @@ require (
 	github.com/mattn/go-colorable v0.1.13 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/svix/svix-webhooks v1.24.0
-	golang.org/x/crypto v0.24.0
+	golang.org/x/crypto v0.25.0
-	golang.org/x/sys v0.21.0 // indirect
+	golang.org/x/sys v0.22.0 // indirect
 )

go.sum

@@ -171,8 +171,8 @@ golang.org/x/crypto v0.0.0-20210711020723-a769d52b0f97/go.mod h1:GvvjBRRGRdwPK5y
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.19.0/go.mod h1:Iy9bg/ha4yyC70EfRS8jz+B6ybOBKMaSxLj6P6oBDfU=
 golang.org/x/crypto v0.20.0/go.mod h1:Xwo95rrVNIoSMx9wa1JroENMToLWn3RNVrTBpLHgZPQ=
-golang.org/x/crypto v0.24.0 h1:mnl8DM0o513X8fdIkmyFE/5hTYxbwYOjDS/+rK6qpRI=
+golang.org/x/crypto v0.25.0 h1:ypSNr+bnYL2YhwoMt2zPxHFmbAN1KZs/njMG3hxUp30=
-golang.org/x/crypto v0.24.0/go.mod h1:Z1PMYSOR5nyMcyAVAIQSKCDwalqy85Aqn1x3Ws4L5DM=
+golang.org/x/crypto v0.25.0/go.mod h1:T+wALwcMOSE0kXgUAnPAHqTLW+XHgcELELW8VaDgm/M=
 golang.org/x/lint v0.0.0-20190930215403-16217165b5de/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
 golang.org/x/mod v0.0.0-20190513183733-4bf6d317e70e/go.mod h1:mXi4GBBbnImb6dmsKGUJ2LatrhH/nqhxcFungHvyanc=
 golang.org/x/mod v0.1.1-0.20191105210325-c90efee705ee/go.mod h1:QqPTAvyqsEbceGzBzNggFXnrqF1CaUcvgkdR5Ot7KZg=
@@ -187,8 +187,8 @@ golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug
 golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
 golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
 golang.org/x/net v0.21.0/go.mod h1:bIjVDfnllIU7BJ2DNgfnXvpSvtn8VRwhlsaeUTyUS44=
-golang.org/x/net v0.26.0 h1:soB7SVo0PWrY4vPW/+ay0jKDNScG2X9wFeYlXIvJsOQ=
+golang.org/x/net v0.27.0 h1:5K3Njcw06/l2y9vpGCSdcxWOYHOUk3dVNGDXN+FvAys=
-golang.org/x/net v0.26.0/go.mod h1:5YKkiSynbBIh3p6iOc/vibscux0x38BZDkn8sCUPxHE=
+golang.org/x/net v0.27.0/go.mod h1:dDi0PyhWNoiUOrAS8uXv/vnScO4wnHQO4mj9fn/RytE=
 golang.org/x/oauth2 v0.21.0 h1:tsimM75w1tF/uws5rbeHzIWxEqElMehnc+iW793zsZs=
 golang.org/x/oauth2 v0.21.0/go.mod h1:XYTD2NtWslqkgxebSiOHnXEap4TF09sJSc7H1sXbhtI=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -213,8 +213,8 @@ golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/sys v0.21.0 h1:rF+pYz3DAGSQAxAu1CbC7catZg4ebC4UIeIhKxBZvws=
+golang.org/x/sys v0.22.0 h1:RI27ohtqKCnwULzJLqkv897zojh5/DwS/ENaMzUOaWI=
-golang.org/x/sys v0.21.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.22.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.0.0-20201117132131-f5c789dd3221/go.mod h1:Nr5EML6q2oocZ2LXRh80K7BxOlk5/8JxuGnuhpl+muw=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=

pages/templates/dashboard.html

@@ -16,12 +16,22 @@ Pollo // Dashboard
     Hi, {{.Name}}!
   </h1>
   <!-- Form to create a new room -->
-  <form class="flex flex-col gap-2" method="POST" hx-post="/api/room" hx-target="#room-list" hx-swap="outerHTML">
+  <form class="flex flex-col gap-2" method="POST" hx-post="/api/room" hx-target="#room-list" hx-swap="outerHTML" hx-on--after-request="this.reset()">
     <input class="input input-bordered input-primary w-full max-w-xs" type="text" name="roomName" placeholder="Room Name" required>
     <button type="submit" class="btn btn-primary">Create Room</button>
   </form>
-  <!-- Section to list rooms -->
+
-  <div class="flex flex-col gap-2" id="room-list" hx-get="/api/room" hx-trigger="load">
+  <div class="overflow-x-auto">
+    <table class="table text-center">
+        <thead>
+        <tr class="border-white">
+            <th>Room Name</th>
+            <th>Actions</th>
+        </tr>
+        </thead>
+        <tbody id="room-list" hx-get="/api/room" hx-trigger="load" hx-swap="outerHTML">
+        </tbody>
+    </table>
   </div>
 </div>
 {{end}}
@@ -29,4 +39,4 @@ Pollo // Dashboard
 {{define "foot"}}
 <script src="/public/js/htmx.base.js"></script>
 <script src="/public/js/htmx.sse.js"></script>
-{{end}}
+{{end}}

pages/templates/partials/buttonlinks.html

@@ -12,4 +12,4 @@
 </a>
 
 {{end}}
-{{end}}
+{{end}}