Add version number to Web UI and fix page scrolling behaviour (#385)

* feat: enhance build process with versioning and build date

- Updated .air.toml and Makefile to include Git version and build date in the build process, improving traceability of builds.
- Introduced new variables in main.go to store and display the version and build date at runtime, enhancing user feedback.
- Modified the Settings struct in config.go to accommodate runtime values for version and build date.
- Enhanced sidebar.html to display the current version, providing users with clear information about the application version in the UI.

* fix: fix page scrolling behaviour

.air.toml

@@ -26,8 +26,11 @@ tmp_dir = "tmp"  # Temporary directory for build artifacts
     export CGO_CFLAGS="-I${HOME}/src/tensorflow"
     export CGO_LDFLAGS="-L/usr/lib -ltensorflowlite_c"
     
-    # Build the Go application
-    go build -v -x -ldflags "-s -w -X main.buildDate=$(date -u +%Y-%m-%dT%H:%M:%SZ)" -o ./tmp/main .
+    # Build the Go application with version and build date
+    go build -v -x -ldflags "-s -w \
+      -X 'main.buildDate=$(date -u +%Y-%m-%dT%H:%M:%SZ)' \
+      -X 'main.version=$(git describe --tags --always)'" \
+      -o ./tmp/main .
   """
 
   bin = "./tmp/main"  # Path to the compiled binary

Makefile

@@ -4,7 +4,9 @@ TFLITE_VERSION := v2.17.1
 
 # Common flags
 CGO_FLAGS := CGO_ENABLED=1 CGO_CFLAGS="-I$(HOME)/src/tensorflow"
-LDFLAGS := -ldflags "-s -w -X 'main.buildDate=$(shell date -u +%Y-%m-%dT%H:%M:%SZ)'"
+LDFLAGS := -ldflags "-s -w \
+    -X 'main.buildDate=$(shell date -u +%Y-%m-%dT%H:%M:%SZ)' \
+    -X 'main.version=$(shell git describe --tags --always)'"
 
 # Detect host OS and architecture
 UNAME_S := $(shell uname -s)

assets/custom.css

@@ -1,28 +1,9 @@
-/* Ensure scrollbar gutter is stable */
-html {
-  scrollbar-gutter: stable !important;
-}
-
 /* Force page scrolling behavior */
 html, body {
   height: 100%;
   overflow-y: auto;
 }
 
-/* Ensure drawer content can scroll */
-.drawer-content {
-  height: auto !important;
-  min-height: 100vh;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-}
-
-/* Override any DaisyUI overflow constraints */
-.drawer.drawer-open {
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-}
-
 .audio-control {
   width: 100%;
   height: 25px;

internal/conf/config.go

@@ -280,6 +280,10 @@ type Security struct {
 type Settings struct {
 	Debug bool // true to enable debug mode
 
+	// Runtime values, not stored in config file
+	Version   string `yaml:"-"` // Version from build
+	BuildDate string `yaml:"-"` // Build date from build
+
 	Main struct {
 		Name      string    // name of BirdNET-Go node, can be used to identify source of notes
 		TimeAs24h bool      // true 24-hour time format, false 12-hour time format
@@ -493,7 +497,7 @@ func SaveSettings() error {
 	return nil
 }
 
-// Settings returns the current settings instance, initializing it if necessary
+// Setting returns the current settings instance, initializing it if necessary
 func Setting() *Settings {
 	once.Do(func() {
 		if settingsInstance == nil {

main.go

@@ -16,6 +16,9 @@ import (
 // buildTime is the time when the binary was built.
 var buildDate string
 
+// version holds the Git version tag
+var version string
+
 //go:embed assets/*
 var assetsFs embed.FS
 
@@ -55,7 +58,12 @@ func main() {
 		os.Exit(1)
 	}
 
-	fmt.Printf("🐦 \033[37mBirdNET-Go build date: %s, using config file: %s\033[0m\n", buildDate, viper.ConfigFileUsed())
+	// Set runtime values
+	settings.Version = version
+	settings.BuildDate = buildDate
+
+	fmt.Printf("🐦 \033[37mBirdNET-Go v%s (built: %s), using config file: %s\033[0m\n",
+		settings.Version, settings.BuildDate, viper.ConfigFileUsed())
 
 	// Execute the root command
 	rootCmd := cmd.RootCommand(settings)

views/elements/sidebar.html

@@ -77,7 +77,7 @@
 
         {{/* Footer section */}}
         <div class="flex-none border-base-200">
-            <div class="p-4">
+            <div class="p-4 flex flex-col gap-4">
                 {{if .Security.Enabled}}
                 {{if .Security.AccessAllowed}}
                 {{/* Logout section */}}
@@ -107,6 +107,17 @@
                 </button>
                 {{end}}
                 {{end}}
+
+                {{/* Version number */}}
+                <div class="text-center text-sm text-base-content/60" role="contentinfo">
+                    <span class="inline-flex items-center gap-1">
+                        {{if .Settings.Version}}
+                            {{.Settings.Version}}
+                        {{else}}
+                            Development Build
+                        {{end}}
+                    </span>
+                </div>
             </div>
         </div>
     </nav>