Merge pull request #119 from keyxmakerx/claude/fix-backdrop-customizer-uAn3g

Claude/fix backdrop customizer u an3g

Author: keyxmakerx

.ai/phases.md

@@ -103,6 +103,28 @@ and LegendKeeper's page headers.
 
 **Key files:** `relation_graph.js`, layout block types, entity templates
 
+#### Sprint V-5: Session Journal Audio Attachments & Bug Fixes ✅
+
+Audio file attachments for journal notes. Foundation for future AI transcription.
+Also fixed journal save bug, added @mentions to journal, and session edit UI.
+
+- **Journal save fix**: `journal.js` referenced nonexistent `window.Chronicle._tiptapBundle`
+  instead of `window.TipTap`. Fixed so TipTap editor loads and notes save correctly.
+- **Session edit UI**: Edit button + `editSessionModal` on session detail page.
+  Pre-populates all fields, JSON PUT to existing `UpdateSessionAPI`.
+- **Journal @mentions**: `MentionLink` mark + `MentionExtension` lifecycle wired
+  into journal's TipTap editor for entity search and tooltip cards.
+- **Audio attachments**: `note_attachments` table (migration 000005).
+  `AttachmentRepository` + `AttachmentService` + REST handlers (list/upload/delete/transcript).
+  Media service extended with audio MIME types + magic bytes validation.
+  Journal UI: microphone upload button, inline `<audio>` players, collapsible
+  transcript textarea, delete support.
+
+**Key files:** `static/js/widgets/journal.js`, `internal/widgets/notes/journal.templ`,
+`internal/widgets/notes/handler.go`, `internal/widgets/notes/repository.go`,
+`internal/widgets/notes/service.go`, `internal/plugins/media/service.go`,
+`internal/plugins/sessions/sessions.templ`, `db/migrations/000005_note_attachments.up.sql`
+
 ---
 
 ### Phase W: Polish, Ecosystem & Delight

.ai/status.md

@@ -8,6 +8,25 @@
 <!-- ====================================================================== -->
 
 ## Last Updated
+2026-03-11 -- **Sprint V-5: Journal fixes, session edit, @mentions, audio attachments.**
+
+29. **Journal + Sessions + Audio Attachments sprint.** Four changes:
+    - **Journal save bug fix**: `journal.js` referenced `window.Chronicle._tiptapBundle` which doesn't exist — the TipTap bundle is `window.TipTap`. Fixed the reference so TipTap editor loads correctly and notes save.
+    - **Session edit UI**: Added edit button + modal on session detail page. Pre-populates all fields (name, date, summary, status, recurrence). Submits JSON PUT to existing `UpdateSessionAPI` endpoint. Visible to Scribe+ users.
+    - **Journal @mentions**: Added `MentionLink` mark and `MentionExtension` lifecycle wiring to journal's TipTap editor. Users can type `@` to search and link entities with tooltip cards, matching the main entity editor's behavior.
+    - **Audio attachments (Sprint V-5)**: New `note_attachments` table (migration 000005). Full backend: `AttachmentRepository` + `AttachmentService` + REST handlers (list/upload/delete/transcript). Media service extended with audio MIME types (mp3/ogg/wav/webm) and magic bytes validation, with `sanitizeImage()` guarded to skip audio files. Journal UI: microphone upload button, inline `<audio>` players, collapsible transcript textarea per attachment, delete support.
+
+### Previous Update
+2026-03-11 -- **Sprint W-0.5: Visual Customization + Admin DB Explorer (IN PROGRESS).**
+
+28. **Customization Hub & Features page bug fixes.** Five issues resolved:
+    - **Settings page deduplication**: Removed backdrop upload and accent color picker from campaign settings page — appearance customization now lives exclusively in the Customization Hub's Appearance tab.
+    - **Accent color page refresh fix**: `UpdateAccentColorAPI` no longer sends `HX-Refresh: true`, preventing the full page reload that navigated users away from the Appearance tab.
+    - **Draft+Save model for appearance**: Appearance tab now uses a local draft model — brand name, accent color, and topbar style changes preview instantly but are only persisted when the user clicks "Save Changes". Backdrop upload remains immediate (file upload requires server storage).
+    - **Features tab removed from Customization Hub**: The "Features & Packs" tab was removed; features are managed exclusively on the dedicated Plugin Hub page (`/plugins`). The per-category Attributes editor was moved into the Categories tab where it fits naturally.
+    - **Plugin Hub in-place toggle**: Feature enable/disable on the Plugin Hub now uses `HX-Trigger: plugin-hub-refresh` instead of `HX-Redirect`, enabling instant in-place list refresh via a new `/plugins/fragment` endpoint.
+
+### Previous Update
 2026-03-11 -- **Sprint W-0.5: Visual Customization + Admin DB Explorer (IN PROGRESS).**
 
 27. **Fix: Embed plugin migrations in binary (ADR-030).** Root cause of entity page errors and DB Explorer showing 0/0: plugin migrations used relative filesystem paths (`internal/plugins/*/migrations/`) that only resolve when the binary's CWD is the project root. In Docker, the binary runs from `/app` so migration directories were never found, tables were never created, and entity pages crashed. Fix: each plugin now embeds its `migrations/*.sql` via Go's `embed.FS`. `PluginSchema.MigrationsDir` (string) replaced with `MigrationsFS` (`fs.FS`). `RegisteredPlugins()` moved from `database` package to `cmd/server/main.go` to avoid import cycles (database can't import plugin packages). `PluginSchemas` stored on `App` struct and passed to `DatabaseExplorer` for on-demand re-migration. New `embed.go` files in calendar, maps, sessions, timeline, syncapi plugins.

.ai/todo.md

@@ -204,7 +204,7 @@ _Quick capture, backlinks, enhanced graph, editor power-ups. See `.ai/obsidian-n
 - [x] **Full-Page Journal & Category Nav Redesign** — Full-page journal view at `/campaigns/:id/journal` with two-panel Obsidian-like layout (note tree sidebar + TipTap editor, search, folder tabs, autosave). Journal link in sidebar nav (gated on notes addon). Notes FAB hidden on journal page to avoid sync conflicts. Removed "Session Journal" topbar button. Redesigned sidebar drill panel: merged header + action bar into compact clickable row (category name opens full page, replacing "View All"), count as pill badge, inline "+" button. Entity tree: folder/page icons, guide lines, smooth transitions, distinct reorder vs reparent D&D feedback.
 - [x] **Sprint V-3: Content Templates** — `content_templates` table, ContentTemplateService with CRUD + seeding, REST API, template picker on entity create form (loads by entity type), "Insert Template" slash command in editor, 4 default templates (Session Recap, NPC Profile, Location, Quest Log) seeded on campaign creation, Customization Hub "Content Templates" tab for management.
 - [ ] **Sprint V-4: Enhanced Graph View & Cover Images** — @mention links in graph, entity type/tag filtering, local graph (N hops), clustering, orphan detection. Cover/banner image layout block type for entity pages.
-- [ ] **Sprint V-5: Session Journal Audio Attachments** — Audio file upload support in Session Journal notes. Users can attach audio recordings (voice memos, session recordings, ambient tracks) to session notes. Privacy controls: share audio with session participants (public to group) or keep private (visible only to uploader). Media plugin integration for storage/serving. Allowed MIME types: audio/mpeg, audio/ogg, audio/wav, audio/webm. Inline audio player in note view. Migration for audio attachment metadata.
+- [x] **Sprint V-5: Session Journal Audio Attachments** — `note_attachments` table (migration 000005), `AttachmentRepository` + `AttachmentService` + REST handlers (list/upload/delete/transcript). Media service extended with audio MIME types (mp3/ogg/wav/webm) and magic bytes validation; `sanitizeImage()` guarded to skip audio. Journal UI: microphone upload button in toolbar, inline `<audio>` players per attachment, collapsible editable transcript textarea, delete support. Also fixed: journal save bug (`_tiptapBundle` → `window.TipTap`), added @mentions (MentionLink + MentionExtension) to journal editor, added session edit modal UI.
 
 ### Phase W: Polish, Ecosystem & Delight
 

db/migrations/000005_note_attachments.down.sql

@@ -0,0 +1 @@
+DROP TABLE IF EXISTS note_attachments;

db/migrations/000005_note_attachments.up.sql

@@ -0,0 +1,20 @@
+-- Note attachments for audio files and transcripts (Sprint V-5).
+CREATE TABLE IF NOT EXISTS note_attachments (
+    id            CHAR(26) NOT NULL,
+    note_id       CHAR(26) NOT NULL,
+    campaign_id   CHAR(26) NOT NULL,
+    file_path     VARCHAR(512) NOT NULL,
+    original_name VARCHAR(255) NOT NULL,
+    mime_type     VARCHAR(100) NOT NULL,
+    file_size     BIGINT NOT NULL DEFAULT 0,
+    duration_secs INT DEFAULT NULL,
+    transcript    LONGTEXT DEFAULT NULL,
+    created_at    TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at    TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+
+    PRIMARY KEY (id),
+    INDEX idx_note_attachments_note (note_id),
+    INDEX idx_note_attachments_campaign (campaign_id),
+
+    CONSTRAINT fk_note_attachments_note FOREIGN KEY (note_id) REFERENCES notes(id) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

internal/app/routes.go

@@ -983,8 +983,11 @@ func (a *App) RegisterRoutes() {
 
 	// Notes widget: personal floating note-taking panel (Google Keep-style).
 	noteRepo := notes.NewNoteRepository(a.DB)
-	noteService := notes.NewNoteService(noteRepo)
-	noteHandler := notes.NewHandler(noteService)
+	attRepo := notes.NewAttachmentRepository(a.DB)
+	noteSvc := notes.NewNoteServiceWithAttachments(noteRepo, attRepo)
+	noteHandler := notes.NewHandler(noteSvc)
+	noteHandler.SetAttachmentService(noteSvc)
+	noteHandler.SetMediaUploader(&mediaUploadAdapter{svc: mediaService})
 	noteHandler.SetMemberLister(campaignService)
 	notes.RegisterRoutes(e, noteHandler, campaignService, authService)
 
@@ -1467,3 +1470,25 @@ func (a *App) RegisterRoutes() {
 	// REST API v1 is registered above via syncapi.RegisterAPIRoutes().
 	// Endpoints: /api/v1/campaigns/:id/{entity-types,entities,sync}
 }
+
+// mediaUploadAdapter adapts MediaService to the notes.MediaUploader interface.
+type mediaUploadAdapter struct {
+	svc media.MediaService
+}
+
+// UploadRaw stores a file via the media service and returns the relative path.
+func (a *mediaUploadAdapter) UploadRaw(ctx context.Context, campaignID, userID string, fileBytes []byte, originalName, mimeType string) (string, error) {
+	file, err := a.svc.Upload(ctx, media.UploadInput{
+		CampaignID:   campaignID,
+		UploadedBy:   userID,
+		OriginalName: originalName,
+		MimeType:     mimeType,
+		FileSize:     int64(len(fileBytes)),
+		UsageType:    "attachment",
+		FileBytes:    fileBytes,
+	})
+	if err != nil {
+		return "", err
+	}
+	return file.Filename, nil
+}

internal/plugins/addons/handler.go

@@ -173,15 +173,14 @@ func (h *Handler) ToggleCampaignAddon(c echo.Context) error {
 		}
 	}
 
-	// If the toggle came from the Plugin Hub page, redirect back there
-	// so it re-renders with updated state.
+	// If the toggle came from the Plugin Hub page, trigger an in-place
+	// refresh of the addon list instead of a full-page redirect.
 	if c.FormValue("redirect_to") == "plugins" {
-		redirectURL := "/campaigns/" + cc.Campaign.ID + "/plugins"
 		if middleware.IsHTMX(c) {
-			c.Response().Header().Set("HX-Redirect", redirectURL)
+			c.Response().Header().Set("HX-Trigger", "plugin-hub-refresh")
 			return c.NoContent(http.StatusNoContent)
 		}
-		return c.Redirect(http.StatusSeeOther, redirectURL)
+		return c.Redirect(http.StatusSeeOther, "/campaigns/"+cc.Campaign.ID+"/plugins")
 	}
 
 	// Return updated addon list for HTMX swap (addons settings page).

internal/plugins/campaigns/branding.templ

@@ -128,10 +128,21 @@ templ AccentColorPicker(campaignID string, currentColor string, csrfToken string
 }
 
 // appearanceTab renders the visual customization editor in the Customization Hub.
-// Contains: faux site outline, brand name/logo, accent color, and topbar styling.
+// Contains: faux site outline, brand name/logo, accent color, topbar styling,
+// and backdrop image. Changes preview locally; a Save button persists them.
 templ appearanceTab(cc *CampaignContext, csrfToken string) {
 	<h2 class="text-base font-semibold text-fg mb-1">Appearance</h2>
-	<p class="text-xs text-fg-secondary mb-6">Customize the visual style of your campaign.</p>
+	<p class="text-xs text-fg-secondary mb-4">Customize the visual style of your campaign. Changes preview instantly — click Save when you're happy.</p>
+
+	<!-- Save bar (shown when there are unsaved changes) -->
+	<div id="appearance-save-bar" class="hidden sticky top-0 z-10 mb-4 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 flex items-center justify-between">
+		<span class="text-sm text-amber-800 dark:text-amber-200">
+			<i class="fa-solid fa-circle-exclamation text-xs mr-1.5"></i> You have unsaved changes
+		</span>
+		<button type="button" id="appearance-save-btn" class="btn-primary text-sm px-4 py-1.5">
+			<i class="fa-solid fa-check text-xs mr-1"></i> Save Changes
+		</button>
+	</div>
 
 	<div
 		data-widget="appearance-editor"
@@ -179,6 +190,15 @@ templ appearanceTab(cc *CampaignContext, csrfToken string) {
 			</div>
 		</div>
 
+		<!-- Backdrop image (saves immediately since file upload requires server) -->
+		<div class="card p-4 mb-4">
+			<h3 class="text-sm font-semibold text-fg mb-2">
+				<i class="fa-solid fa-image text-xs mr-1.5 text-fg-muted"></i> Backdrop Image
+			</h3>
+			<p class="text-xs text-fg-secondary mb-3">Header banner displayed on your campaign dashboard.</p>
+			@BackdropUploadSection(cc.Campaign.ID, cc.Campaign.BackdropPath, csrfToken)
+		</div>
+
 		<!-- Brand name -->
 		<div class="card p-4 mb-4">
 			<h3 class="text-sm font-semibold text-fg mb-2">
@@ -205,13 +225,49 @@ templ appearanceTab(cc *CampaignContext, csrfToken string) {
 			</div>
 		</div>
 
-		<!-- Accent color -->
+		<!-- Accent color (JS-driven, no server calls until Save) -->
 		<div class="card p-4 mb-4">
 			<h3 class="text-sm font-semibold text-fg mb-2">
 				<i class="fa-solid fa-droplet text-xs mr-1.5 text-fg-muted"></i> Accent Color
 			</h3>
 			<p class="text-xs text-fg-secondary mb-3">Theme color used for buttons, links, and highlights.</p>
-			@AccentColorPicker(cc.Campaign.ID, cc.Campaign.ParseSettings().AccentColor, csrfToken)
+			<div id="appearance-accent-colors" class="space-y-3">
+				<div class="flex flex-wrap gap-2">
+					for _, preset := range accentColorPresets {
+						<button
+							type="button"
+							data-accent-color={ preset.Color }
+							class="w-8 h-8 rounded-full border-2 transition-transform hover:scale-110 shrink-0"
+							style={ fmt.Sprintf("background-color: %s", preset.Color) }
+							if cc.Campaign.ParseSettings().AccentColor == preset.Color {
+								class="w-8 h-8 rounded-full border-2 border-white ring-2 ring-offset-2 ring-offset-surface ring-fg transition-transform hover:scale-110 shrink-0"
+							} else {
+								class="w-8 h-8 rounded-full border-2 border-transparent hover:border-white/50 transition-transform hover:scale-110 shrink-0"
+							}
+							title={ preset.Name }
+						></button>
+					}
+					// Reset to default button.
+					<button
+						type="button"
+						data-accent-color=""
+						class="w-8 h-8 rounded-full border-2 border-dashed border-edge flex items-center justify-center hover:border-fg-muted transition-colors shrink-0"
+						if cc.Campaign.ParseSettings().AccentColor == "" {
+							class="w-8 h-8 rounded-full border-2 border-dashed border-fg ring-2 ring-offset-2 ring-offset-surface ring-fg flex items-center justify-center transition-colors shrink-0"
+						}
+						title="Reset to default"
+					>
+						<i class="fa-solid fa-xmark text-[10px] text-fg-muted"></i>
+					</button>
+				</div>
+				<p class="text-[10px] text-fg-muted" id="appearance-accent-label">
+					if cc.Campaign.ParseSettings().AccentColor != "" {
+						Current: { cc.Campaign.ParseSettings().AccentColor }
+					} else {
+						Using default theme color
+					}
+				</p>
+			</div>
 		</div>
 
 		<!-- Topbar style -->