fix: navbar bugs, features page consolidation, and sidebar improvements

- Fix drag-and-drop reorder 403: add CSRF token to sidebar_tree.js fetch
- Fix nav category switching lag: show loading spinner + use prefetch cache
- Fix entity template creation: add hx-target/hx-swap, HTMX-aware error response
- Consolidate features page: merge Plugin Hub + Addon Settings into single page
  with inline enable/disable toggles for owners
- Add quick note "View in Journal" link in toast notification
- Add fully hideable sidebar with floating restore button
- Add chronicle:notify HX-Trigger listener for server-sent toast notifications
- Add html option to Chronicle.notify() for rich toast content

https://claude.ai/code/session_01QJLkgjQDu5qohzJKGV4hj9

Author: claude

.ai/status.md

@@ -8,6 +8,23 @@
 <!-- ====================================================================== -->
 
 ## Last Updated
+2026-03-10 -- **Bug fixes & UX improvements (navbar, features page, entity templates).**
+
+1. **Drag-and-drop CSRF fix**: `sidebar_tree.js` reorderEntity() was using raw `fetch()` without CSRF token, causing 403 on drag-drop reorder. Added `Chronicle.getCsrf()` header.
+
+2. **Nav menu lag fix**: `sidebar_drill.js` category switching caused stale content flash. Now shows loading spinner immediately and uses prefetch cache for instant swaps.
+
+3. **Entity template creation fix**: `entity_types.templ` form lacked `hx-target`/`hx-swap`, causing broken page when HTMX swapped full page into form. Added proper targeting, partial response on error, and `chronicle:notify` HX-Trigger support in notifications.js.
+
+4. **Features page consolidation**: Merged Plugin Hub (read-only) and Addon Settings (management) into a single Features page at `/campaigns/:id/plugins`. Owners see inline enable/disable toggles. Added `AddonID` and `Installed` fields to `PluginHubAddon`. Settings page link now points to `/plugins`. Toggle handler supports `redirect_to=plugins` for redirect after toggle.
+
+5. **Quick notes discoverability**: After creating a quick note, toast now includes a clickable "View in Journal" link. Added `html` option to `Chronicle.notify()`.
+
+6. **Fully hideable navbar**: Added sidebar hide button (double-angle-left icon) next to pin button. When hidden, sidebar fully disappears (0px width). Floating restore button appears at top-left. State persists in `localStorage`.
+
+Branch: `claude/fix-navbar-features-page-8RZuE`.
+
+### Previous Update
 2026-03-10 -- **Per-player visibility + Co-DM grants (Phase 2 complete).** Implemented per-player content sharing across all content types:
 
 1. **Maps**: Added `visibility_rules` JSON column to `map_markers` and `map_drawings` (migration 002). Updated repository to filter with `JSON_CONTAINS` for non-owners. Updated `ListMarkers` signature to include `userID` for per-player filtering.

.ai/todo.md

@@ -33,6 +33,12 @@ Known broken or missing things, ordered by severity.
 
 ### Medium
 
+- [x] **Drag-and-drop sidebar reorder fails with 403** — `sidebar_tree.js:reorderEntity()` used raw `fetch()` without CSRF token. Fixed by adding `Chronicle.getCsrf()` to headers.
+- [x] **Nav menu flashes stale content on category switch** — `sidebar_drill.js` kept old content visible during HTMX fetch. Fixed with immediate loading spinner and prefetch cache usage.
+- [x] **Entity template creation form broken for HTMX** — Form lacked `hx-target`/`hx-swap`, and error handler returned full page for HTMX requests. Added proper targeting, partial response, and `chronicle:notify` HX-Trigger support.
+- [x] **Features page appears duplicated** — Plugin Hub (read-only) and Addon Settings (management) were separate pages. Consolidated into single `/plugins` page with inline enable/disable toggles for owners.
+- [x] **Quick notes not discoverable after creation** — Toast only said "Note created" with no link. Added "View in Journal" clickable link in toast. Added `html` option to `Chronicle.notify()`.
+
 - [x] **Unified permission model (Phase 1)** — Created `internal/permissions/role.go` with shared role constants and `CanSeeDmOnly`/`CanSetDmOnly` helpers. Replaced ~30 magic `role >= 3` checks across calendar, timeline, maps, entities, syncapi, app/routes. Fixed dm_only inconsistencies: tags now Owner-only (was Scribe+). Added Owner-only guards on dm_only creation in calendar events, timeline events, map markers. JS `permissions.js` uses named `ROLE_OWNER` constant. Permission matrix documented in `.ai/conventions.md`.
 - [x] **Per-player visibility + Co-DM grants (Phase 2)** — Maps: `visibility_rules` JSON on markers/drawings with `JSON_CONTAINS` filtering. Notes: `shared_with` JSON with Private/Everyone/Specific Players UI + member picker popover. Co-DM: `DmGrantIDs` in CampaignSettings, `IsDmGranted` in CampaignContext, `VisibilityRole()` method, DM grants API + settings UI. DM-granted users see dm_only content but cannot create it.
 - [x] **Tags not hideable from players** — Implemented `dm_only` column (migration 000038), role-based filtering in repo/service/handler, eye-slash badge + DM checkbox in tag_picker.js.
@@ -201,6 +207,8 @@ _Quick capture, backlinks, enhanced graph, editor power-ups. See `.ai/obsidian-n
 
 ### Phase W: Polish, Ecosystem & Delight
 
+- [ ] **Sprint W-0: Nav Menu Reorg Mode** — Small icon button near Dashboard in sidebar. Click to enter reorg mode for current level (categories or entities). Category level: drag to reorder category icons. Entity level: drag to reorder, create folders/submenus. Click again to exit reorg mode. Must work on desktop, tablet, and mobile. Button is context-aware: on base nav, reorders categories; drilled into a category, reorders entities.
+- [ ] **Sprint W-0.5: Owner Visual Customization** — Change "Chronicle" brand name per-campaign with optional image/logo. Top bar color/gradient/animation/background image (responsive). Visual customization editor with faux site outline (editable boxes for colors/backgrounds). Appearance-only, not layout editing. Future: per-addon "feature in use" indicators showing which entities/pages use each feature, which widgets are available, click associations to navigate. Disabled feature banner with "offline" sticker instead of complete removal.
 - [ ] **Sprint W-1: Command Palette & Saved Filters** — Ctrl+Shift+P action palette with fuzzy search. Saved entity list filter presets as sidebar links in `saved_filters` table.
 - [ ] **Sprint W-2: Map Drawing Tools, Regions & Measurement** — Leaflet.Draw integration (freehand, polygons, circles, rectangles, text). Uses existing `map_drawings` table. Per-drawing visibility, color/opacity. Also: map regions (polygon fills/strokes/labels), measurement/distance tool, map embed layout block for entity pages.
 - [ ] **Sprint W-2.5: Nested / Linked Maps** — Click marker to open sub-map. `linked_map_id` on markers. Breadcrumb navigation between map levels. Competitive gap vs World Anvil/LegendKeeper.

internal/app/routes.go

@@ -153,11 +153,13 @@ func (a *addonListerAdapter) ListForPluginHub(ctx context.Context, campaignID st
 	result := make([]campaigns.PluginHubAddon, len(addonList))
 	for i, ca := range addonList {
 		result[i] = campaigns.PluginHubAddon{
-			Slug:     ca.AddonSlug,
-			Name:     ca.AddonName,
-			Icon:     ca.AddonIcon,
-			Category: string(ca.AddonCategory),
-			Enabled:  ca.Enabled,
+			AddonID:   ca.AddonID,
+			Slug:      ca.AddonSlug,
+			Name:      ca.AddonName,
+			Icon:      ca.AddonIcon,
+			Category:  string(ca.AddonCategory),
+			Enabled:   ca.Enabled,
+			Installed: ca.Installed,
 		}
 	}
 	return result, nil

internal/plugins/addons/handler.go

@@ -189,7 +189,18 @@ func (h *Handler) ToggleCampaignAddon(c echo.Context) error {
 		}
 	}
 
-	// Return updated addon list for HTMX swap.
+	// If the toggle came from the Plugin Hub page, redirect back there
+	// so it re-renders with updated state.
+	if c.FormValue("redirect_to") == "plugins" {
+		redirectURL := "/campaigns/" + cc.Campaign.ID + "/plugins"
+		if middleware.IsHTMX(c) {
+			c.Response().Header().Set("HX-Redirect", redirectURL)
+			return c.NoContent(http.StatusNoContent)
+		}
+		return c.Redirect(http.StatusSeeOther, redirectURL)
+	}
+
+	// Return updated addon list for HTMX swap (addons settings page).
 	if middleware.IsHTMX(c) {
 		addons, err := h.service.ListForCampaign(ctx, cc.Campaign.ID)
 		if err != nil {

internal/plugins/campaigns/handler.go

@@ -81,11 +81,13 @@ type AuditLogger interface {
 
 // PluginHubAddon is a minimal addon representation for the plugin hub page.
 type PluginHubAddon struct {
-	Slug     string
-	Name     string
-	Icon     string
-	Category string
-	Enabled  bool
+	AddonID   int
+	Slug      string
+	Name      string
+	Icon      string
+	Category  string
+	Enabled   bool
+	Installed bool // Whether backing code exists (for showing Coming Soon vs toggle).
 }
 
 // AddonLister lists addons for the plugin hub page. Avoids importing the addons
@@ -553,7 +555,8 @@ func (h *Handler) PluginHub(c echo.Context) error {
 	}
 
 	isOwner := cc.MemberRole >= RoleOwner
-	return middleware.Render(c, http.StatusOK, PluginHubPage(cc, addons, isOwner))
+	csrfToken := middleware.GetCSRFToken(c)
+	return middleware.Render(c, http.StatusOK, PluginHubPage(cc, addons, isOwner, csrfToken))
 }
 
 // --- Customization Hub ---

internal/plugins/campaigns/settings.templ

@@ -6,6 +6,7 @@ package campaigns
 import (
 	"encoding/json"
 	"fmt"
+	"strconv"
 	"github.com/keyxmakerx/chronicle/internal/templates/layouts"
 )
 
@@ -142,7 +143,7 @@ templ CampaignSettingsPage(cc *CampaignContext, transfer *OwnershipTransfer, ent
 				<div class="flex items-center justify-between mb-2">
 					<h2 class="text-lg font-semibold text-fg">Features</h2>
 					<a
-						href={ templ.SafeURL(fmt.Sprintf("/campaigns/%s/addons/settings", cc.Campaign.ID)) }
+						href={ templ.SafeURL(fmt.Sprintf("/campaigns/%s/plugins", cc.Campaign.ID)) }
 						class="text-sm link"
 					>
 						<i class="fa-solid fa-plug mr-1"></i> Manage Features
@@ -392,87 +393,167 @@ func pluginDescription(slug string) string {
 	}
 }
 
-// PluginHubPage renders the features hub showing all enabled features with quick access links.
-templ PluginHubPage(cc *CampaignContext, addons []PluginHubAddon, isOwner bool) {
+// PluginHubPage renders the unified features page where owners can toggle
+// features on/off and all members can see enabled features with quick access links.
+templ PluginHubPage(cc *CampaignContext, addons []PluginHubAddon, isOwner bool, csrfToken string) {
 	@layouts.App(cc.Campaign.Name + " - Features") {
 		<div class="max-w-3xl mx-auto">
 			<div class="flex items-center justify-between mb-6">
 				<div>
 					<h1 class="text-2xl font-bold text-fg">Features</h1>
-					<p class="text-sm text-fg-muted mt-1">Quick access to all campaign features.</p>
+					if isOwner {
+						<p class="text-sm text-fg-muted mt-1">Enable or disable features for this campaign.</p>
+					} else {
+						<p class="text-sm text-fg-muted mt-1">Quick access to all campaign features.</p>
+					}
 				</div>
-				if isOwner {
-					<a href={ templ.SafeURL(fmt.Sprintf("/campaigns/%s/addons/settings", cc.Campaign.ID)) } class="btn-secondary text-sm">
-						<i class="fa-solid fa-gear mr-1.5"></i> Manage
-					</a>
-				}
+				<a href={ templ.SafeURL(fmt.Sprintf("/campaigns/%s/edit", cc.Campaign.ID)) } class="btn-secondary text-sm">
+					Back to Settings
+				</a>
 			</div>
 
-			<!-- Enabled features -->
-			<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
-				for _, addon := range addons {
-					if addon.Enabled {
-						<a
-							href={ templ.SafeURL(pluginURL(cc.Campaign.ID, addon.Slug)) }
-							class="card p-4 flex items-start gap-3 hover:ring-2 hover:ring-accent/50 transition-all group"
-						>
-							<div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center shrink-0 group-hover:bg-accent/20 transition-colors">
-								if addon.Icon != "" {
-									<i class={ "fa-solid " + addon.Icon, "text-accent text-lg" }></i>
-								} else {
-									<i class="fa-solid fa-puzzle-piece text-accent text-lg"></i>
-								}
-							</div>
-							<div class="flex-1 min-w-0">
-								<div class="font-semibold text-fg group-hover:text-accent transition-colors">{ addon.Name }</div>
-								<p class="text-xs text-fg-muted mt-0.5">{ pluginDescription(addon.Slug) }</p>
-							</div>
-							<i class="fa-solid fa-arrow-right text-fg-muted text-xs mt-1 opacity-0 group-hover:opacity-100 transition-opacity"></i>
-						</a>
-					}
-				}
+			<div id="plugin-hub-list">
+				@PluginHubListContent(cc, addons, isOwner, csrfToken)
 			</div>
 
-			<!-- Disabled features (show for owners) -->
+			// Info panel for owners.
 			if isOwner {
-				@disabledPlugins(cc.Campaign.ID, addons)
+				<div class="card p-6 mt-6">
+					<div class="flex items-start gap-4">
+						<span class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center shrink-0">
+							<i class="fa-solid fa-circle-info text-accent"></i>
+						</span>
+						<div>
+							<h3 class="text-sm font-semibold text-fg mb-1">About Features</h3>
+							<p class="text-sm text-fg-secondary leading-relaxed">
+								Features add optional capabilities to your campaign like calendars, maps, and timelines.
+								Toggle them on or off at any time — disabling does not delete your data.
+							</p>
+						</div>
+					</div>
+				</div>
 			}
 		</div>
 	}
 }
 
-// disabledPlugins shows features that are not enabled, with a prompt to enable them.
-templ disabledPlugins(campaignID string, addons []PluginHubAddon) {
+// PluginHubListContent renders the addon list (for HTMX partial swaps after toggling).
+templ PluginHubListContent(cc *CampaignContext, addons []PluginHubAddon, isOwner bool, csrfToken string) {
+	// Enabled features with quick access links.
+	if hasEnabled(addons) {
+		<div class="mb-8">
+			<h2 class="section-header mb-3">
+				<i class="fa-solid fa-check-circle mr-2 text-emerald-500"></i>Enabled
+			</h2>
+			<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+				for _, addon := range addons {
+					if addon.Enabled {
+						@pluginHubCard(cc, addon, isOwner, csrfToken)
+					}
+				}
+			</div>
+		</div>
+	}
+
+	// Disabled/available features.
 	if hasDisabled(addons) {
-		<div class="mt-4">
-			<h2 class="text-sm font-semibold text-fg-muted uppercase tracking-wider mb-3">Available Features</h2>
-			<div class="space-y-2">
+		<div class="mb-6">
+			<h2 class="section-header mb-3">
+				<i class="fa-solid fa-circle-plus mr-2 text-fg-muted"></i>Available
+			</h2>
+			<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 				for _, addon := range addons {
 					if !addon.Enabled {
-						<div class="card p-3 flex items-center gap-3 opacity-60">
-							<div class="w-8 h-8 rounded-lg bg-surface-alt flex items-center justify-center shrink-0">
-								if addon.Icon != "" {
-									<i class={ "fa-solid " + addon.Icon, "text-fg-muted" }></i>
-								} else {
-									<i class="fa-solid fa-puzzle-piece text-fg-muted"></i>
-								}
-							</div>
-							<div class="flex-1 min-w-0">
-								<span class="text-sm text-fg">{ addon.Name }</span>
-								<span class="text-xs text-fg-muted ml-2">Disabled</span>
-							</div>
-							<a
-								href={ templ.SafeURL(fmt.Sprintf("/campaigns/%s/addons/settings", campaignID)) }
-								class="text-xs text-accent hover:underline"
-							>
-								Enable
-							</a>
-						</div>
+						@pluginHubCard(cc, addon, isOwner, csrfToken)
 					}
 				}
 			</div>
 		</div>
 	}
+
+	if len(addons) == 0 {
+		<div class="card p-8 text-center">
+			<p class="text-fg-muted">No features available yet.</p>
+		</div>
+	}
+}
+
+// pluginHubCard renders a single feature card with optional toggle for owners.
+templ pluginHubCard(cc *CampaignContext, addon PluginHubAddon, isOwner bool, csrfToken string) {
+	<div class={ "card p-4 flex items-start gap-3 transition-all",
+		templ.KV("hover:ring-2 hover:ring-accent/50", addon.Enabled),
+		templ.KV("opacity-60", !addon.Enabled && !isOwner) }>
+		<div class={ "w-10 h-10 rounded-lg flex items-center justify-center shrink-0",
+			templ.KV("bg-accent/10", addon.Enabled),
+			templ.KV("bg-surface-alt", !addon.Enabled) }>
+			if addon.Icon != "" {
+				<i class={ "fa-solid " + addon.Icon, "text-lg",
+					templ.KV("text-accent", addon.Enabled),
+					templ.KV("text-fg-muted", !addon.Enabled) }></i>
+			} else {
+				<i class={ "fa-solid fa-puzzle-piece text-lg",
+					templ.KV("text-accent", addon.Enabled),
+					templ.KV("text-fg-muted", !addon.Enabled) }></i>
+			}
+		</div>
+		<div class="flex-1 min-w-0">
+			if addon.Enabled {
+				<a
+					href={ templ.SafeURL(pluginURL(cc.Campaign.ID, addon.Slug)) }
+					class="font-semibold text-fg hover:text-accent transition-colors"
+				>
+					{ addon.Name }
+					<i class="fa-solid fa-arrow-right text-fg-muted text-xs ml-1"></i>
+				</a>
+			} else {
+				<div class="font-semibold text-fg">{ addon.Name }</div>
+			}
+			<p class="text-xs text-fg-muted mt-0.5">{ pluginDescription(addon.Slug) }</p>
+		</div>
+		// Toggle button for owners; "Coming Soon" badge for uninstalled addons.
+		if isOwner {
+			if addon.Installed {
+				<form
+					method="POST"
+					hx-put={ fmt.Sprintf("/campaigns/%s/addons/%s/toggle", cc.Campaign.ID, strconv.Itoa(addon.AddonID)) }
+					hx-target="#plugin-hub-list"
+					hx-swap="innerHTML"
+					class="shrink-0"
+				>
+					<input type="hidden" name="csrf_token" value={ csrfToken }/>
+					<input type="hidden" name="redirect_to" value="plugins"/>
+					if addon.Enabled {
+						<input type="hidden" name="action" value="disable"/>
+						<button type="submit" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-900/50 transition-colors" title="Click to disable">
+							<i class="fa-solid fa-check text-[10px]"></i>
+							Enabled
+						</button>
+					} else {
+						<input type="hidden" name="action" value="enable"/>
+						<button type="submit" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-full bg-surface-alt text-fg-muted border border-edge hover:bg-accent/10 hover:text-accent transition-colors" title="Click to enable">
+							<i class="fa-solid fa-plus text-[10px]"></i>
+							Enable
+						</button>
+					}
+				</form>
+			} else {
+				<span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-full bg-surface-alt text-fg-muted border border-edge cursor-default shrink-0">
+					<i class="fa-solid fa-clock text-[10px]"></i>
+					Coming Soon
+				</span>
+			}
+		}
+	</div>
+}
+
+// hasEnabled checks if any addon in the list is enabled.
+func hasEnabled(addons []PluginHubAddon) bool {
+	for _, a := range addons {
+		if a.Enabled {
+			return true
+		}
+	}
+	return false
 }
 
 // hasDisabled checks if any addon in the list is disabled.

internal/plugins/entities/entity_types.templ

@@ -60,6 +60,8 @@ templ EntityTypeListContent(cc *campaigns.CampaignContext, entityTypes []EntityT
 				method="POST"
 				action={ templ.SafeURL(fmt.Sprintf("/campaigns/%s/entity-types", cc.Campaign.ID)) }
 				hx-post={ fmt.Sprintf("/campaigns/%s/entity-types", cc.Campaign.ID) }
+				hx-target="#entity-type-list"
+				hx-swap="innerHTML"
 				class="space-y-4"
 			>
 				<input type="hidden" name="csrf_token" value={ csrfToken }/>

internal/plugins/entities/handler.go

@@ -1515,12 +1515,22 @@ func (h *Handler) CreateEntityType(c echo.Context) error {
 	et, err := h.service.CreateEntityType(c.Request().Context(), cc.Campaign.ID, input)
 	if err != nil {
 		entityTypes, _ := h.service.GetEntityTypes(c.Request().Context(), cc.Campaign.ID)
-		counts, _ := h.service.CountByType(c.Request().Context(), cc.Campaign.ID, int(cc.MemberRole), auth.GetUserID(c))
+		role := cc.VisibilityRole()
+		counts, _ := h.service.CountByType(c.Request().Context(), cc.Campaign.ID, role, auth.GetUserID(c))
 		csrfToken := middleware.GetCSRFToken(c)
 		errMsg := "failed to create entity type"
 		if appErr, ok := err.(*apperror.AppError); ok {
 			errMsg = appErr.Message
 		}
+		// Return partial for HTMX requests so the swap target (#entity-type-list) gets correct content.
+		// Use HX-Trigger to show a toast notification with the error message.
+		if middleware.IsHTMX(c) {
+			c.Response().Header().Set("HX-Retarget", "#entity-type-list")
+			c.Response().Header().Set("HX-Reswap", "innerHTML")
+			c.Response().Header().Set("HX-Trigger", `{"chronicle:notify":{"message":"`+errMsg+`","type":"error"}}`)
+			return middleware.Render(c, http.StatusOK,
+				EntityTypeListContent(cc, entityTypes, counts, csrfToken))
+		}
 		return middleware.Render(c, http.StatusOK,
 			EntityTypesManagePage(cc, entityTypes, counts, csrfToken, errMsg))
 	}