New option to add a message on top of the website

ui/routes.go

@@ -23,6 +23,7 @@ package ui
 
 import (
 	"flag"
+	"fmt"
 	"io"
 	"io/ioutil"
 	"log"
@@ -42,12 +43,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 +60,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))

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}