feat(map): make zoom-in message clickable

[escapedcat]

User description

Make "zoom in" info icon clickable

---

PR Type

Enhancement

---

Description

• Make zoom-in message icon clickable to zoom to nearby level

• Add zoomToNearbyLevel function with map animation and panel offset

• Pass new callback to MerchantListPanel component

• Wrap icon in button with hover/focus styles and accessibility label

---

Diagram Walkthrough

flowchart LR
  User["User clicks zoom icon"] -- "triggers onZoomToNearbyLevel" --> Handler["zoomToNearbyLevel function"]
  Handler -- "calculates offset" --> Offset["Panel offset compensation"]
  Offset -- "animates map" --> MapView["Map zooms to MERCHANT_LIST_MIN_ZOOM"]
  Handler -- "tracks event" --> Analytics["zoom_in_click event"]

Loading

File Walkthrough

Relevant files

Enhancement

+page.svelte Add zoom-to-nearby function with animation                              src/routes/map/+page.svelte Import MERCHANT_LIST_MIN_ZOOM constant for zoom target level Add zoomToNearbyLevel function that animates map to nearby zoom level with panel offset compensation Track analytics event when zoom is triggered Pass onZoomToNearbyLevel callback to MerchantListPanel component +22/-0    MerchantListPanel.svelte Make zoom-in icon clickable with button wrapper                    src/routes/map/components/MerchantListPanel.svelte Add onZoomToNearbyLevel callback export for zoom functionality Convert zoom-in icon from static display to clickable button element Add button styling with hover and focus states for better UX Add accessibility label to button for screen readers Update comment to clarify only icon is clickable +10/-8

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
🔴	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Unguarded callback call: The click handler directly references onZoomToNearbyLevel even though it is typed as optional, which can cause a runtime error if the prop is undefined. Referred Code <button on:click={onZoomToNearbyLevel} class="rounded-full p-2 transition-colors hover:bg-gray-100 focus:ring-2 focus:ring-primary/20 focus:outline-none dark:hover:bg-white/10" Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[netlify]

✅ Deploy Preview for btcmap ready!

Name	Link
🔨 Latest commit	d3a836e
🔍 Latest deploy log	https://app.netlify.com/projects/btcmap/deploys/6980fe9d6835290008acf141
😎 Deploy Preview	https://deploy-preview-664--btcmap.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 82 (🔴 down 8 from production) Accessibility: 97 (no change from production) Best Practices: 92 (🔴 down 8 from production) SEO: 100 (no change from production) PWA: 90 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Guard undefined click callback Use optional chaining (onZoomToNearbyLevel?.()) for the on:click event to prevent a runtime error if the onZoomToNearbyLevel prop is not provided. src/routes/map/components/MerchantListPanel.svelte [463-469] <button - on:click={onZoomToNearbyLevel} + on:click={() => onZoomToNearbyLevel?.()} class="rounded-full p-2 transition-colors hover:bg-gray-100 focus:ring-2 focus:ring-primary/20 focus:outline-none dark:hover:bg-white/10" aria-label="Zoom in to see nearby merchants" > <Icon w="48" h="48" icon="zoom_in" type="material" class="text-link dark:text-white" /> </button> Apply / Chat Suggestion importance[1-10]: 8 __ Why: The suggestion correctly prevents a potential runtime error by adding an optional chaining guard for the onZoomToNearbyLevel callback, which is defined as potentially undefined.	Medium
General	Prevent redundant zoom action Add a check to the zoomToNearbyLevel function to exit early if the map's current zoom level is already at or above the target zoom, preventing unnecessary animations. src/routes/map/+page.svelte [882-899] const zoomToNearbyLevel = () => { if (!map || !browser) return; + if (map.getZoom() >= MERCHANT_LIST_MIN_ZOOM) return; trackEvent('zoom_in_click'); // ... }; [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: This is a good optimization that prevents a redundant and potentially jarring map animation when the user is already zoomed in sufficiently, improving the user experience.	Medium
	Make the entire message area clickable Wrap the "Zoom in to see nearby merchants" message and icon within a single button to make the entire area clickable, improving usability and accessibility. src/routes/map/components/MerchantListPanel.svelte [461-475] - <!-- Nearby mode: zoom in message (only icon is clickable) --> - <div class="flex flex-col items-center justify-center gap-3 px-4 py-12 text-center"> - <button - on:click={onZoomToNearbyLevel} - class="rounded-full p-2 transition-colors hover:bg-gray-100 focus:ring-2 focus:ring-primary/20 focus:outline-none dark:hover:bg-white/10" - aria-label="Zoom in to see nearby merchants" - > - <Icon w="48" h="48" icon="zoom_in" type="material" class="text-link dark:text-white" /> - </button> + <!-- Nearby mode: zoom in message --> + <button + on:click={onZoomToNearbyLevel} + class="flex w-full flex-col items-center justify-center gap-3 rounded-lg px-4 py-12 text-center transition-colors hover:bg-gray-100 focus:ring-2 focus:ring-primary/20 focus:outline-none dark:hover:bg-white/10" + > + <Icon w="48" h="48" icon="zoom_in" type="material" class="text-link dark:text-white" /> <div> <p class="text-sm font-medium text-primary dark:text-white"> Zoom in to see nearby merchants </p> </div> - </div> + </button> [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies a usability improvement by making the entire message area clickable, which provides a larger, more intuitive target for users, even though a comment in the PR implies this was intentional.	Low
More