[RecentDesigns] Split list items into dual hyperlinks for kanvasURL and cloud URL

[Copilot]

Notes for Reviewers

This PR fixes #

Splits the Recent Designs list into two distinct click targets:

• Main content (icon, name, date) → Opens design in local Kanvas extension via window.location.href
• External link icon → Opens design in Layer5 Cloud via window.ddClient.host.openExternal

Changes:

• Split openDesign() into openDesignInKanvas() and openDesignInCloud()
• Added e.stopPropagation() on IconButton to prevent event bubbling
• Added encodeURIComponent() for URL safety
• Changed replaceAll() to regex /\s+/g for browser compatibility

const openDesignInKanvas = (design) => {
  const kanvasURL = `http://localhost:9081/extension/meshmap?mode=design&design=${encodeURIComponent(design.id)}`;
  window.location.href = kanvasURL;
};

const openDesignInCloud = (design) => {
  const name = encodeURIComponent(design.name.replace(/\s+/g, "-").toLowerCase());
  const myDesignsURL = `https://cloud.layer5.io/catalog/content/my-designs/${name}-${design.id}?source=...`;
  window.ddClient.host.openExternal(myDesignsURL);
};

Signed commits

• Yes, I signed my commits.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Activate kanvasURL in Recent Designs list</issue_title>
<issue_description>### Current Behavior
Split the list of recent designs into two hyperlinks: one for most of the list item content and the other for the external link icon at the end of each list item.

Desired Behavior

In the RecentDesigns.js component, the and should open the kanvasURL location.

<ListItemIcon>
                  <DesignIcon />
                </ListItemIcon>
                <ListItemText primary={design.name} style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", marginRight: "1rem" }} />
                <ListItemText style={{ color: "#ccc", textAlign: "right" }}
                  primary={`Updated ${getFormatDate(design.updated_at)}`}
                />
              

In the RecentDesigns.js component, the IconButton should continue to behave as it does now, opening the myDesignsURL location.

<IconButton
                    onClick={() => openDesign(design)}
                    edge="end"
                    aria-label="open"
                  >
                    <ExternalLinkIcon width="16" fill="#eee" />
                  </IconButton>

---

Contributor Guide

• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
  </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Activate kanvasURL in Recent Designs list #61

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.