feat(ui): replace alert() with showError() in UploadModal and update design system guidelines

Co-authored-by: PR0M3TH3AN <[email protected]>

docs/agents/task-logs/weekly/_completed.md

@@ -0,0 +1,19 @@
+# Weekly Agent Task Log: 2025-02-21 (Jules)
+
+**Agent:** ui-ux-marketing-expert
+**Status:** Completed
+
+## Execution Summary
+
+1.  **Scheduler Setup:**
+    *   Skipped `nostr-lock.mjs` as the script was missing from the environment.
+    *   Created log directory.
+
+2.  **UI/UX Expert Task:**
+    *   **Audit:** Audited `js/ui/profileModalController.js` and `views/` for hardcoded styles. No significant violations found (clean use of utility classes).
+    *   **Remediation:** Identified `alert()` calls in `js/ui/components/UploadModal.js` as a UX violation (blocking UI). Replaced all instances with `this.showError()` or `this.showSuccess()` to align with the design system.
+    *   **Documentation:** Updated `docs/design-system.md` to explicitly forbid `alert()`/`confirm()` and recommend non-blocking alternatives.
+
+3.  **Verification:**
+    *   Ran `tests/ui/uploadModal-integration.test.mjs`: Passed.
+    *   Ran `npm run lint`: Passed.

docs/design-system.md

@@ -181,6 +181,12 @@ Mix in Tailwind utilities for icon spacing (`gap-3`), sizing (`px-lg`, `py-sm`),
 
 `.badge` renders an inline pill (`bg-panel`, uppercase text). Opt into semantic variants with `data-variant="info"`, `data-variant="critical"`, or `data-variant="neutral"`. Layer on utilities for icon alignment or truncation.
 
+### Interaction Guidelines
+
+- **No blocking alerts:** Do not use `window.alert()` or `window.confirm()`. These native modals block the main thread and disrupt the user experience.
+- **Preferred pattern:** Use the `showError(message)` and `showSuccess(message)` callbacks provided to controllers, or render inline `.notification-banner` elements for persistent feedback.
+- **Complex confirmations:** For destructive actions requiring confirmation, use a dedicated modal or a two-step button state (e.g., "Click to confirm") rather than a native confirm dialog.
+
 ### Messaging & Notification Tokens
 
 Use the dedicated messaging tokens when styling chat surfaces and banners so they inherit theme-safe contrast and icon colors: