Simplfy the html when adding clients

2 files changed, 27 insertions, 19 deletions

diff --git a/src/app.c b/src/app.c
index 976d51e..28debe9 100644
--- a/src/app.c
+++ b/src/app.c
@@ -517,7 +517,7 @@ int list_clients(struct App *app, struct ListClientResult *result) {
 			result->clients[index].last_backup = time_from_double(last_backup);
 
 			if (backup_status == NULL) {
-				strncpy(result->clients[index].status, "MISSING", BACKUP_STATUS_MAX);
+				strncpy(result->clients[index].status, "NEVER", BACKUP_STATUS_MAX);
 				result->clients[index].is_stale = 0;
 			} else if (strcmp((char*)backup_status, "RUNNING") == 0) {
 				strncpy(result->clients[index].status, "RUNNING", BACKUP_STATUS_MAX);
diff --git a/src/html.c b/src/html.c
index 6d069af..20007f9 100644
--- a/src/html.c
+++ b/src/html.c
@@ -97,11 +97,13 @@ static void emit_stylesheet(FILE *f) {
 		".alert.error { color: var(--red); background: var(--red-bg); border-color: var(--red-bor); }\n"
 		".alert.warning { color: var(--purple); background: var(--purple-bg); border-color: var(--purple-bor); margin-top: 10px; }\n"
 		"/* SHARED BUTTON */\n"
-		"button {\n"
+		"button, .btn {\n"
 		"  font-family: var(--mono);\n"
 		"  font-size: 11px;\n"
 		"  letter-spacing: 1px;\n"
+		"  line-height: normal;\n"
 		"  text-transform: uppercase;\n"
+		"  user-select: none;\n"
 		"  padding: 6px 14px;\n"
 		"  border: 1px solid var(--green);\n"
 		"  background: transparent;\n"
@@ -109,7 +111,7 @@ static void emit_stylesheet(FILE *f) {
 		"  cursor: pointer;\n"
 		"  touch-action: manipulation;\n"
 		"}\n"
-		"button:hover, button:active { background: var(--green); color: var(--bg); }\n"
+		"button:hover, button:active, .btn:hover { background: var(--green); color: var(--bg); }\n"
 		".login-page button { padding: 9px; width: 100%%; }\n"
 		"/* PAGE HEADING */\n"
 		"main > h2 {\n"
@@ -182,16 +184,22 @@ static void emit_stylesheet(FILE *f) {
 		".badge.fail { color: var(--red); background: var(--red-bg); border-color: var(--red-bor); }\n"
 		".badge.stale { color: var(--purple); background: var(--purple-bg); border-color: var(--purple-bor); }\n"
 		"/* ADD FORM */\n"
-		"#add-form {\n"
+		"#add-form > summary {\n"
+		"  display: block;\n"
+		"  text-align: center;\n"
+		"  list-style: none;\n"
+		"}\n"
+		"#add-form > summary::after {content: \"\"}\n"
+		"#add-form > summary::marker { display: none; }\n"
+		"#add-form > form {\n"
 		"  background: var(--sur);\n"
-		"  border: 1px solid var(--bor);\n"
+		"  border: solid var(--bor);\n"
+		"  border-width: 0px 1px 1px 1px;\n"
 		"  padding: 16px 20px;\n"
-		"  margin-bottom: 20px;\n"
-		"  display: none;\n"
+		"  display: flex;\n"
 		"  gap: 12px;\n"
 		"  flex-direction: column;\n"
 		"}\n"
-		"#add-form.open { display: flex; }\n"
 		"#add-form .input { max-width: 280px; }\n"
 		"/* DETAIL HEADER */\n"
 		"article {\n"
@@ -218,7 +226,6 @@ static void emit_stylesheet(FILE *f) {
 		"/* SNIPPETS */\n"
 		"details {\n"
 		"  margin-bottom: 28px;\n"
-		"  border-bottom: 1px solid var(--bor);\n"
 		"}\n"
 		"details summary {\n"
 		"  font-size: 11px;\n"
@@ -234,7 +241,6 @@ static void emit_stylesheet(FILE *f) {
 		"details summary:hover { color: var(--txt); }\n"
 		"details summary::after { content: '>'; }\n"
 		"details[open] summary::after { transform: rotate(90deg); }\n"
-		"details summary::-webkit-details-marker { display: none; }\n"
 		"details > div { padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }\n"
 		"details h4 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; font-weight: normal; }\n"
 		"details pre {\n"
@@ -297,7 +303,7 @@ static const char *status_to_badge_class(const char *status) {
 	if (strcmp(status, "STALE") == 0) return "stale";
 	if (strcmp(status, "INTERRUPTED") == 0) return "fail";
 	if (strcmp(status, "FINISHED") == 0) return "ok";
-	return "ok";
+	return "";
 }
 
 static const char *status_to_display(const char *status) {
@@ -349,15 +355,17 @@ char *html_render_clients_page(const char *host, const struct ListClientResult *
 
 	fprintf(f,
 		"</small>\n"
-		"      <button onclick=\"document.getElementById('add-form').classList.toggle('open')\">+ Add</button>\n"
 		"    </h2>\n"
-		"    <form id=\"add-form\" method=\"POST\" action=\"/clients\">\n"
-		"      <div>\n"
-		"        <label class=\"label\">Name</label>\n"
-		"        <input class=\"input\" type=\"text\" name=\"name\" maxlength=\"31\" placeholder=\"prod-web-02\" required>\n"
-		"      </div>\n"
-		"      <button type=\"submit\">Create</button>\n"
-		"    </form>\n"
+		"    <details id=\"add-form\">\n"
+		"      <summary class=\"btn\">New Client</summary>\n"
+		"      <form method=\"POST\" action=\"/clients\">\n"
+		"        <div>\n"
+		"          <label class=\"label\">Name</label>\n"
+		"          <input class=\"input\" type=\"text\" name=\"name\" maxlength=\"31\" placeholder=\"prod-web-02\" required>\n"
+		"        </div>\n"
+		"        <button type=\"submit\">Create</button>\n"
+		"      </form>\n"
+		"    </details>\n"
 		"    <div class=\"clients\">\n"
 		"      <div class=\"row header\">\n"
 		"        <span>Name</span>\n"