From c1744940f549bcc3a0c6a42b1d92cdcb50c57b86 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Mon, 25 Dec 2023 14:35:26 +0100
Subject: [PATCH] New option to add a message on top of the website

---
 ui/routes.go                 |  8 ++++++++
 ui/src/routes/+layout.svelte | 11 +++++++++++
 2 files changed, 19 insertions(+)

diff --git a/ui/routes.go b/ui/routes.go
index 65a044a..915bc88 100644
--- a/ui/routes.go
+++ b/ui/routes.go
@@ -42,12 +42,16 @@ var (
 	CustomHeadHTML = ""
 	CustomBodyHTML = ""
 	HideVoxPeople  = false
+	MsgHeaderColor = "danger"
+	MsgHeaderText  = ""
 )
 
 func init() {
 	flag.StringVar(&CustomHeadHTML, "custom-head-html", CustomHeadHTML, "Add custom HTML right before </head>")
 	flag.StringVar(&CustomBodyHTML, "custom-body-html", CustomBodyHTML, "Add custom HTML right before </body>")
 	flag.BoolVar(&HideVoxPeople, "hide-feedback-button", HideVoxPeople, "Hide the icon on page that permit to give feedback")
+	flag.StringVar(&MsgHeaderText, "msg-header-text", MsgHeaderText, "Custom message banner to add at the top of the app")
+	flag.StringVar(&MsgHeaderColor, "msg-header-color", MsgHeaderColor, "Background color of the banner added at the top of the app")
 }
 
 func DeclareRoutes(cfg *config.Options, router *gin.Engine) {
@@ -55,6 +59,10 @@ func DeclareRoutes(cfg *config.Options, router *gin.Engine) {
 		CustomHeadHTML += "<style>#voxpeople { display: none !important; }</style>"
 	}
 
+	if len(MsgHeaderText) != 0 {
+		CustomHeadHTML += fmt.Sprintf(`<script type="text/javascript">window.msg_header = { text: %q, color: %q };</script>`, MsgHeaderText, MsgHeaderColor)
+	}
+
 	if cfg.DevProxy != "" {
 		router.GET("/.svelte-kit/*_", serveOrReverse("", cfg))
 		router.GET("/node_modules/*_", serveOrReverse("", cfg))
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 1921c8d..89a0e2b 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -80,6 +80,17 @@
 
 <!--Styles /-->
 
+{#if window.msg_header}
+    <div
+        class={(window.msg_header.color?"bg-" + window.msg_header.color:"bg-danger") + " text-light text-center fw-bolder pb-1"}
+        id="msg_header"
+        style="z-index: 101; margin-bottom: -.2em"
+    >
+        <small>
+            {window.msg_header.text}
+        </small>
+    </div>
+{/if}
 <Header
     routeId={data.route.id}
     sw_state={data.sw_state}