feat: implement LinkButton

[sarahraines]

Description

A link that looks like a button.

---

Note

Introduce LinkButton and consolidate button styling

• New LinkButton in ui/Button/LinkButton.tsx (React Aria Link styled as a button) with external prop auto-setting target/rel
• Export BUTTON_CLASS_NAMES, ButtonSize, and new ButtonStyleProps; Button updated to consume shared props

Adopt LinkButton and API tweak

• CallBooking now uses LinkButton for "Join call" instead of <Link><Button>
• useCallBookings now takes { limit? } options object; BookkeepingOverview updated accordingly

Styles

• link.scss: remove hardcoded font-size; rely on [data-size]

^{Written by Cursor Bugbot for commit 2332d3c. This will update automatically on new commits. Configure here.}

Greptile Summary

This PR introduces a new LinkButton component that provides a link with button styling, replacing the previous pattern of wrapping a Button inside a Link.

What Changed

New Component:

• Added LinkButton component in src/components/ui/Button/LinkButton.tsx that combines link functionality with button styling
• Uses React Aria's Link component for accessibility while applying button visual styles
• Supports an external prop for convenient handling of external links (automatically sets target="_blank" and rel="noopener noreferrer")

Button Component Updates:

• Exported BUTTON_CLASS_NAMES, ButtonSize, and created a new ButtonStyleProps type to enable code reuse in LinkButton
• Refactored Button component to use the new shared ButtonStyleProps type

Link Styles Cleanup:

• Removed hardcoded font-size: var(--text-md) from link.scss to allow proper size control via data attributes
• Removed verbose comment per coding guidelines

Implementation:

• Updated CallBooking component to use the new LinkButton instead of <Link><Button> pattern for the "Join call" action
• Improved useCallBookings hook API to use an options object parameter instead of positional parameters for better extensibility

Architecture Benefits

The new LinkButton component provides better semantics and developer experience:

• Eliminates awkward <Link><Button> nesting
• Maintains proper link semantics (uses anchor element) while looking like a button
• Provides consistent API with Button component through shared style props
• Handles external link security concerns automatically

Areas for Improvement

While the implementation is functionally correct, there are opportunities to strengthen this addition:

1. Missing tests for the new component (see review comments)
2. Button styles apply user-select: none which may impact link UX (see review comments)

[augmentcode]

🤖 Augment PR Summary

Summary: Adds a new LinkButton component (a link styled like a Layer Button) to avoid nesting interactive elements.

Changes:

• Introduced LinkButton built on React Aria Link, sharing button style props and supporting external links
• Refactored Button to export shared BUTTON_CLASS_NAMES and ButtonStyleProps for reuse
• Updated CallBooking “Join call” to use LinkButton instead of Link + Button
• Changed useCallBookings to accept an options object ({ limit }) and updated BookkeepingOverview usage
• Minor cleanup in link.scss (removes default font-size; sizes handled via attributes)

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. 1 suggestions posted.

Comment augment review to trigger a new review at any time.

[darrensapalo]

LGTM!

[cursor]

String interpolation includes literal "undefined" in rel attribute

Medium Severity

When rel prop is not provided (i.e., undefined), the template literal `${externalRel} ${rel}` produces the string "noopener noreferrer undefined" instead of just "noopener noreferrer". The .trim() only removes leading/trailing whitespace, not the literal "undefined" text. This affects every usage of LinkButton where rel is omitted, including the new usage in CallBooking.tsx, resulting in invalid HTML markup in the rel attribute.