Devlog 30: Image Export Feature & Template Refactoring

Image Export Feature

• Integrated html2canvas library to enable one-click PNG image export of the active progress dashboard.
• Added an “Export as Image” button inside the custom sidebar menu with dedicated styling.
• Handled theme-aware background rendering by dynamically querying computed global CSS variables (--bg-app).

DOM Template & Dynamic Watermark

• Refactored dynamic watermark creation using the HTML <template> element (#export-watermark-template), cleanly separating DOM structure from JavaScript execution logic.
• Configured dynamic timestamps using now.toLocaleString() to inject real-time snapshot dates and times into exported images.
• Added ignoreElements filtering in html2canvas to prevent unchecked/hidden .progress-card elements from creating top/bottom visual gaps in exported images.

Bug Fixes & Refactor

• Fixed a TypeError on insertBefore/appendChild by referencing clone.firstElementChild to extract the correct Element Node from DocumentFragment.
• Resolved HTML/JS ID typos (export-watermark-template) and method call mismatches to ensure reliable script execution.