Add badge indicator that loadout has active notes

Author: iamdevlinph

PLANS.md

@@ -31,7 +31,7 @@ Keep this checklist aligned with repository behavior. Check off work in the same
 - [x] Create, edit, duplicate, delete, and copy team loadouts; preview them from any non-button card area and keep the currently unused image-download action hidden.
 - [x] Offer detailed and compact monsterling stat-label share previews.
 - [x] Toggle Monsterlings between cropped stat-icon cards and full stat strips while keeping portraits aligned with visible equipment.
-- [x] Save loadout-specific notes from direct card and preview actions, with the loadout name shown in the notes dialog; keep the More dropdown deferred until it has additional actions.
+- [x] Save loadout-specific notes from direct card and preview actions, with the loadout name shown in the notes dialog and a notification dot on card and preview actions when meaningful notes are saved; keep the More dropdown deferred until it has additional actions.
 - [x] Record eight character build stats, pin up to five per character in canonical editor order (ATK, HP, Crit Rate, Crit DMG, DMG Boost Boss, Special Skill CD, Elemental Weakness, Element ATK), defaulting pins to ATK, Crit Rate, Crit DMG, Special Skill CD, and Element ATK, and show pinned values beside element, awakening, and skill levels in previews.
 - [x] Require three unique owned characters selected through searchable, filterable character cards.
 - [x] Assign three regular and one legendary owned monsterling per character through searchable, multi-tier-filterable cards, with regular-slot swapping and moving within a character.

src/components/loadouts/components/loadout-actions.tsx

@@ -32,6 +32,7 @@ type LoadoutActionsProps = {
 	onDownload?: () => void;
 	onDelete?: () => void;
 	onNotes?: () => void;
+	hasNotes?: boolean;
 	onCreateSnapshot?: () => void;
 	onPreview?: () => void;
 	activeImageAction?: LoadoutImageAction | null;
@@ -47,6 +48,7 @@ export const LoadoutActions = ({
 	onCopy,
 	onDelete,
 	onNotes,
+	hasNotes = false,
 	onCreateSnapshot,
 	onPreview,
 	activeImageAction = null,
@@ -141,12 +143,27 @@ export const LoadoutActions = ({
 					type="button"
 					size="icon-sm"
 					variant="outline"
+					className="relative"
 					disabled={busy}
 					onClick={onNotes}
-					aria-label={`Notes for ${loadoutName}`}
-					title={`Notes for ${loadoutName}`}
+					aria-label={
+						hasNotes
+							? `Notes saved for ${loadoutName}`
+							: `Notes for ${loadoutName}`
+					}
+					title={
+						hasNotes
+							? `Notes saved for ${loadoutName}`
+							: `Notes for ${loadoutName}`
+					}
 				>
 					<FileTextIcon />
+					{hasNotes && (
+						<span
+							aria-hidden="true"
+							className="absolute -right-0.5 -top-0.5 size-2 rounded-full bg-red-600 ring-2 ring-background"
+						/>
+					)}
 				</Button>
 			)}
 			{onCreateSnapshot && (

src/components/loadouts/components/loadout-card.tsx

@@ -83,6 +83,7 @@ export const LoadoutCard = ({
 					onDownload={onDownload}
 					onDelete={onDelete}
 					onNotes={onNotes}
+					hasNotes={Boolean(loadout.notes?.trim())}
 					onCreateSnapshot={onCreateSnapshot}
 					activeImageAction={activeImageAction}
 					disabled={disabled}

src/components/loadouts/components/loadout-preview-dialog.tsx

@@ -164,6 +164,7 @@ export const LoadoutPreviewDialog = ({
 							}
 							onDelete={onDelete}
 							onNotes={onNotes}
+							hasNotes={target === "loadout" && Boolean(loadout.notes?.trim())}
 							onCreateSnapshot={onCreateSnapshot}
 							activeImageAction={imageActions.activeAction}
 							itemType={target === "snapshot" ? "loadout snapshot" : undefined}

src/components/loadouts/components/loadouts-list-ui.test.tsx

@@ -493,7 +493,51 @@ describe("LoadoutsList", () => {
 		fireEvent.click(screen.getByRole("button", { name: "Save notes" }));
 		expect(useAppStore.getState().loadouts.team.notes).toBe("Damage test");
 		expect(event).toHaveBeenCalledWith("loadout_notes_save");
-		expect(screen.getByRole("button", { name: "Notes for Team" })).toBeTruthy();
+		const savedNotesButton = screen.getByRole("button", {
+			name: "Notes saved for Team",
+		});
+		expect(savedNotesButton.title).toBe("Notes saved for Team");
+		expect(
+			savedNotesButton.querySelector('span[aria-hidden="true"]'),
+		).toBeTruthy();
+
+		fireEvent.click(savedNotesButton);
+		fireEvent.change(screen.getByRole("textbox", { name: "Loadout notes" }), {
+			target: { value: "   " },
+		});
+		fireEvent.click(screen.getByRole("button", { name: "Save notes" }));
+		const clearedNotesButton = screen.getByRole("button", {
+			name: "Notes for Team",
+		});
+		expect(
+			clearedNotesButton.querySelector('span[aria-hidden="true"]'),
+		).toBeNull();
+	});
+
+	it("shows saved-note indicators on cards and previews only for meaningful notes", () => {
+		useAppStore.setState({
+			charactersOwned,
+			monsterlingsOwned: {},
+			loadouts: {
+				team: { ...teamLoadout, notes: "Damage test" },
+				blank: { ...teamLoadout, id: "blank", name: "Blank", notes: "  " },
+			},
+		});
+		render(<LoadoutsList />);
+
+		expect(
+			screen.getByRole("button", { name: "Notes saved for Team" }),
+		).toBeTruthy();
+		expect(
+			screen.getByRole("button", { name: "Notes for Blank" }),
+		).toBeTruthy();
+
+		fireEvent.click(
+			screen.getByRole("button", { name: "Preview Team loadout card" }),
+		);
+		expect(
+			screen.getByRole("button", { name: "Notes saved for Team" }),
+		).toBeTruthy();
 	});
 
 	it("duplicates a loadout into the first available name", () => {