Refactor dashboard and HAProxy handlers to update redirect paths and descriptions; remove hardcoded server ID in widget definitions; add new CSS for widget palette styling; implement JavaScript for widget palette management and filtering.

Author: sarg3nt

TASKS.md

@@ -90,22 +90,40 @@ Framework = Shared services and building blocks (graphs, tables, panels, cards,
 
 **Remaining Tasks:**
 
-#### Task 1: Widget Palette API
+#### Task 1: Widget Palette API ✅
 
-- [ ] Create `/api/dashboards/widgets` endpoint in `gearbox/internal/framework/handler/dashboard.go`
-- [ ] Return all available widgets from **enabled plugins only** for the selected server
-- [ ] Support filtering by plugin name, category, search term
-- [ ] Register route in router setup
-- [ ] Test with curl/Postman
+- [x] Create `/api/dashboards/widgets` endpoint in `gearbox/internal/framework/handler/dashboard.go`
+- [x] Return all available widgets from **enabled plugins only** for the selected server
+- [x] Support filtering by plugin name, category, search term
+- [x] Register route in router setup
+- [x] Added `PluginName` field to all 31 widget definitions across 8 plugins
+- [x] Built successfully with `make templ-generate && make build`
 
-#### Task 2: Widget Palette Side Panel UI
+**Implementation Details:**
 
-- [ ] Add palette panel HTML to `gearbox/internal/framework/templates/pages/dashboard_editor.templ`
-- [ ] Create `gearbox/static/css/dashboard/palette.css` for styling
-- [ ] Create `gearbox/static/js/dashboard/palette.js` for interactions
-- [ ] Display widgets as cards with icon, name, description, plugin badge
-- [ ] Add filtering UI (search, plugin dropdown)
-- [ ] Make panel scrollable with fixed header
+- Route: `GET /api/dashboards/widgets`
+- Query params: `?server_id=<id>&plugin=<name>&category=<cat>&search=<term>`
+- Returns JSON array of widgets from enabled plugins
+- Core widgets always included (PluginName = "core")
+
+#### Task 2: Widget Palette Side Panel UI ✅
+
+- [x] Add palette panel HTML to `gearbox/internal/framework/templates/pages/dashboard_editor.templ`
+- [x] Create `gearbox/static/css/dashboard/palette.css` for styling
+- [x] Create `gearbox/static/js/dashboard/palette.js` for interactions
+- [x] Display widgets as cards with icon, name, description, plugin badge
+- [x] Add filtering UI (search, plugin dropdown)
+- [x] Make panel scrollable with fixed header
+- [x] Built successfully with `make templ-generate && make build`
+
+**Implementation Details:**
+
+- Enhanced widget palette panel with fixed header and scrollable list
+- Widget cards display icon, name, description, and color-coded plugin badges
+- Real-time search across name, description, and plugin
+- Plugin dropdown filter with all available plugins
+- Fetches widgets dynamically from `/api/dashboards/widgets` endpoint
+- Responsive design with dark mode support
 
 #### Task 3: Drag-and-Drop from Palette
 
@@ -120,6 +138,14 @@ Framework = Shared services and building blocks (graphs, tables, panels, cards,
 - [ ] Show plugin menu items only when enabled for server
 - [ ] Ensure plugin menu items update when plugins are enabled/disabled
 
+#### Task 5: Left Hand Navigation bar Updates
+
+- [ ] Items can be rearranged by clicking edit icon that is next to the toggle sidebar icon
+- [ ] When in edit mode user can drag a menu item up or down and other nav items flow around it
+- [ ] Edit icon becomes save icon
+- [ ] When a plugin is enabled it generates its default "dashboard" interface yaml file if it does not already exist.  Each plugin's default dashboard has a default name and icon as designed by plugin developer.  When plugins is enabled it is added to the nav bar
+- [ ] The rearrangement of left hand nav items will be removed from the plugin screen, all nav rearrangement is now in the nav bar only.
+
 **Testing Checklist:**
 
 - [ ] Enable HAProxy plugin → verify dashboard auto-created

gearbox/cmd/server/main.go

@@ -378,6 +378,7 @@ func main() {
 		dashboardStorage,
 		widgetRegistry,
 		dataSourceRegistry,
+		db,
 		logger,
 		"", // serverID - can be set per request
 		"", // userID - can be set per request

gearbox/internal/framework/handler/dashboard.go

@@ -4,10 +4,12 @@ import (
 	"encoding/json"
 	"log/slog"
 	"net/http"
+	"strings"
 
 	"github.com/go-chi/chi/v5"
 	"github.com/sarg3nt/gearbox/internal/framework/auth"
 	"github.com/sarg3nt/gearbox/internal/framework/dashboard"
+	"github.com/sarg3nt/gearbox/internal/framework/database"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/pages"
 	"github.com/sarg3nt/gearbox/internal/framework/widget"
 )
@@ -18,6 +20,7 @@ type DashboardHandler struct {
 	renderer           *dashboard.Renderer
 	widgetRegistry     *widget.Registry
 	dataSourceRegistry *widget.DataSourceRegistry
+	db                 *database.DB
 	logger             *slog.Logger
 	serverID           string
 	userID             string
@@ -28,6 +31,7 @@ func NewDashboardHandler(
 	storage *dashboard.Storage,
 	widgetRegistry *widget.Registry,
 	dataSourceRegistry *widget.DataSourceRegistry,
+	db *database.DB,
 	logger *slog.Logger,
 	serverID string,
 	userID string,
@@ -43,6 +47,7 @@ func NewDashboardHandler(
 		renderer:           renderer,
 		widgetRegistry:     widgetRegistry,
 		dataSourceRegistry: dataSourceRegistry,
+		db:                 db,
 		logger:             logger,
 		serverID:           serverID,
 		userID:             userID,
@@ -66,6 +71,7 @@ func (h *DashboardHandler) RegisterRoutes(r chi.Router) {
 	r.Put("/api/dashboards/{slug}", h.UpdateDashboard)
 	r.Post("/api/dashboards/order", h.SaveDashboardOrder)
 	r.Post("/api/dashboards/{slug}/toggle", h.TogglePluginDashboard)
+	r.Get("/api/dashboards/widgets", h.GetWidgetPalette)
 }
 
 // ListDashboards handles GET /dashboards
@@ -308,3 +314,92 @@ func (h *DashboardHandler) UpdateDashboard(w http.ResponseWriter, r *http.Reques
 		"slug":   dash.Slug,
 	})
 }
+
+// GetWidgetPalette handles GET /api/dashboards/widgets
+// Returns available widgets from enabled plugins for the selected server
+func (h *DashboardHandler) GetWidgetPalette(w http.ResponseWriter, r *http.Request) {
+	// Get server ID from query parameter
+	serverID := r.URL.Query().Get("server_id")
+	if serverID == "" {
+		serverID = h.serverID // Use default if not specified
+	}
+
+	// Get optional filter parameters
+	pluginFilter := r.URL.Query().Get("plugin")
+	categoryFilter := r.URL.Query().Get("category")
+	searchTerm := r.URL.Query().Get("search")
+
+	// Get enabled plugins for this server
+	enabledPlugins, err := h.db.GetEnabledPlugins(serverID)
+	if err != nil {
+		h.logger.Error("failed to get enabled plugins", "server_id", serverID, "error", err)
+		http.Error(w, "Failed to get enabled plugins", http.StatusInternalServerError)
+		return
+	}
+
+	// Get all registered widgets
+	allWidgets := h.widgetRegistry.List()
+
+	// Filter widgets based on enabled plugins and query parameters
+	var filteredWidgets []*widget.WidgetDefinition
+	for _, w := range allWidgets {
+		// Skip widgets from disabled plugins (unless it's a core widget)
+		if w.PluginName != "core" {
+			if enabled, ok := enabledPlugins[w.PluginName]; !ok || !enabled {
+				continue
+			}
+		}
+
+		// Apply plugin filter
+		if pluginFilter != "" && w.PluginName != pluginFilter {
+			continue
+		}
+
+		// Apply category filter
+		if categoryFilter != "" && w.Category != categoryFilter {
+			continue
+		}
+
+		// Apply search filter (search in name and description)
+		if searchTerm != "" {
+			searchLower := strings.ToLower(searchTerm)
+			nameLower := strings.ToLower(w.Name)
+			descLower := strings.ToLower(w.Description)
+			if !strings.Contains(nameLower, searchLower) && !strings.Contains(descLower, searchLower) {
+				continue
+			}
+		}
+
+		filteredWidgets = append(filteredWidgets, w)
+	}
+
+	// Convert to JSON-friendly format
+	type WidgetResponse struct {
+		Type        string `json:"type"`
+		Name        string `json:"name"`
+		Description string `json:"description"`
+		Category    string `json:"category"`
+		PluginName  string `json:"plugin_name"`
+		Icon        string `json:"icon"`
+	}
+
+	response := make([]WidgetResponse, 0, len(filteredWidgets))
+	for _, w := range filteredWidgets {
+		response = append(response, WidgetResponse{
+			Type:        w.Type,
+			Name:        w.Name,
+			Description: w.Description,
+			Category:    w.Category,
+			PluginName:  w.PluginName,
+			Icon:        w.Icon,
+		})
+	}
+
+	// Return JSON response
+	w.Header().Set("Content-Type", "application/json")
+	if err := json.NewEncoder(w).Encode(response); err != nil {
+		h.logger.Error("failed to encode widget palette response", "error", err)
+		http.Error(w, "Failed to encode response", http.StatusInternalServerError)
+		return
+	}
+}

gearbox/internal/framework/handler/handler.go

@@ -235,6 +235,20 @@ func (h *Handler) InjectIntegrationStatus(next http.Handler) http.Handler {
 			next.ServeHTTP(w, r.WithContext(ctx))
 			return
 		}
+
+		// No server configured - explicitly disable all plugins in navigation
+		// This provides a clean initial setup experience without plugin clutter
+		status := map[string]bool{
+			"metrics":      false,
+			"logs":         false,
+			"services":     false,
+			"certificates": false,
+			"traffic":      false,
+			"alerts":       false,
+			"os_updates":   false,
+		}
+		ctx = auth.SetPluginStatus(ctx, status)
+		ctx = auth.SetIntegrationOrder(ctx, []auth.SidebarIntegration{})
 		next.ServeHTTP(w, r.WithContext(ctx))
 	})
 }

gearbox/internal/framework/templates/layouts/base.templ

@@ -23,6 +23,18 @@ func getPath(paths []string) string {
 	return ""
 }
 
+// shouldHideSidebar determines if the sidebar should be hidden based on context
+// Returns true if there are no servers configured (initial setup state)
+func shouldHideSidebar(ctx context.Context, currentPath string) bool {
+	// Check if plugin status is in context - if not, we're in initial setup
+	_, hasPluginStatus := auth.GetPluginStatusFromContext(ctx)
+	_, hasPluginOrder := auth.GetPluginOrderFromContext(ctx)
+
+	// If neither plugin status nor order is set, we're in initial setup (no servers)
+	// Hide the sidebar to provide a cleaner first-time experience
+	return !hasPluginStatus && !hasPluginOrder
+}
+
 templ Base(title string, user *models.User, currentPath ...string) {
 	<!DOCTYPE html>
 	<html lang="en" class="h-full">
@@ -683,13 +695,21 @@ templ Base(title string, user *models.User, currentPath ...string) {
 	<body class="h-full bg-gray-100 dark:bg-slate-900">
 		@ui.CollapsibleRestoreScript()
 		if user != nil {
-			@Sidebar(user, getPath(currentPath))
-			<div id="main-content" class="main-content ml-64 min-h-screen flex flex-col pt-[57px]">
-				@Header()
-				<main class="flex-1 p-6">
+			// Check if we should hide the sidebar (e.g., on initial setup pages)
+			if shouldHideSidebar(ctx, getPath(currentPath)) {
+				<!-- No sidebar, full-width layout for initial setup -->
+				<main class="min-h-screen">
 					{ children... }
 				</main>
-			</div>
+			} else {
+				@Sidebar(user, getPath(currentPath))
+				<div id="main-content" class="main-content ml-64 min-h-screen flex flex-col pt-[57px]">
+					@Header()
+					<main class="flex-1 p-6">
+						{ children... }
+					</main>
+				</div>
+			}
 		} else {
 			<main class="min-h-screen">
 				{ children... }
@@ -1078,7 +1098,6 @@ templ Sidebar(user *models.User, currentPath string) {
 		<nav class="flex-1 py-4">
 			<ul class="space-y-1">
 				@SidebarLink("/", "Dashboard", SidebarIconDashboard(), currentPath)
-				@SidebarLink("/status-grid", "Status Grid", SidebarIconGrid(), currentPath)
 				@OrderedIntegrationLinks(currentPath)
 			</ul>
 		</nav>

gearbox/internal/framework/templates/pages/dashboard_editor.templ

@@ -12,6 +12,8 @@ import (
 // DashboardEditorPage renders the visual dashboard editor with live widget preview
 templ DashboardEditorPage(dash *dashboard.Dashboard, content templ.Component, widgets []*widget.WidgetDefinition, user *models.User, currentPath string) {
 	@layouts.Base("Edit Dashboard", user, currentPath) {
+		<!-- Widget Palette CSS -->
+		<link rel="stylesheet" href="/static/css/dashboard/palette.css"/>
 		<!-- Edit Mode Indicator -->
 		<div class="mb-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
 			<div class="flex items-center justify-between">
@@ -49,16 +51,43 @@ templ DashboardEditorPage(dash *dashboard.Dashboard, content templ.Component, wi
 
 		<!-- Widget Palette Panel (collapsible) -->
 		<div id="widget-palette-panel" class="hidden mb-4 bg-white dark:bg-slate-900 border border-gray-300 dark:border-slate-600 rounded-lg shadow-lg">
-			<div class="p-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
-				<h3 class="font-semibold text-gray-900 dark:text-gray-100">Available Widgets</h3>
-				<button onclick="toggleWidgetPalette()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
-					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-					</svg>
-				</button>
+			<!-- Fixed Header -->
+			<div class="p-4 border-b border-gray-200 dark:border-slate-700 sticky top-0 bg-white dark:bg-slate-900 z-10">
+				<div class="flex items-center justify-between mb-3">
+					<h3 class="font-semibold text-gray-900 dark:text-gray-100">Available Widgets</h3>
+					<button onclick="toggleWidgetPalette()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+						<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+						</svg>
+					</button>
+				</div>
+
+				<!-- Search Input -->
+				<input
+					type="text"
+					id="widget-palette-search"
+					placeholder="Search widgets..."
+					class="w-full px-3 py-2 mb-2 text-sm border border-gray-300 dark:border-slate-600 rounded bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+				/>
+
+				<!-- Filter by Plugin -->
+				<select
+					id="widget-palette-plugin-filter"
+					class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-slate-600 rounded bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+				>
+					<option value="">All Plugins</option>
+					<!-- Populated dynamically by JavaScript -->
+				</select>
 			</div>
-			<div class="p-4 max-h-96 overflow-y-auto">
-				@WidgetPalette(widgets)
+
+			<!-- Scrollable Widget List -->
+			<div id="widget-palette-list" class="p-4 max-h-96 overflow-y-auto">
+				<div class="text-center text-gray-500 dark:text-gray-400 py-8">
+					<svg class="w-8 h-8 mx-auto mb-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+					</svg>
+					<p class="text-sm">Loading widgets...</p>
+				</div>
 			</div>
 		</div>
 
@@ -353,12 +382,12 @@ templ WidgetConfigModal() {
 	</div>
 }
 
-// DashboardEditorScript provides the editor JavaScript
-
 // DashboardEditorScript provides the editor JavaScript
 templ DashboardEditorScript(dash *dashboard.Dashboard) {
 	<!-- Load Sortable.js module -->
 	<script type="module" src="/static/js/dashboard/sortable-loader.js"></script>
+	<!-- Load widget palette logic -->
+	<script src="/static/js/dashboard/palette.js" defer></script>
 	<!-- Load dashboard editor logic -->
 	<script src="/static/js/dashboard/editor.js" defer></script>
 }

gearbox/internal/framework/templates/pages/traffic/visualization.templ

@@ -65,7 +65,7 @@ templ Visualization() {
 					</div>
 					<div class="flex items-center gap-2">
 						<div class="w-4 h-4 rounded-full bg-blue-500 border-2 border-blue-600"></div>
-						<span class="text-gray-300">HAProxy (light-hugger)</span>
+						<span class="text-gray-300">HAProxy (server)</span>
 					</div>
 					<div class="flex items-center gap-2">
 						<div class="w-4 h-3 rounded-sm bg-emerald-500"></div>

gearbox/internal/framework/widget/widget.go

@@ -21,6 +21,10 @@ type WidgetDefinition struct {
 	// Category groups widgets (data-visualization, data-display, status-metrics, etc.)
 	Category string
 
+	// PluginName is the name of the plugin that provides this widget (e.g., "haproxy", "metrics")
+	// Used to filter widgets based on enabled plugins for a server
+	PluginName string
+
 	// Icon is the icon name for the widget
 	Icon string