Skip to content

Conversation

@dinana
Copy link

@dinana dinana commented Dec 27, 2025

Summary

Adds the ability to link cards together with three relationship types: parent, child, and related. Links are bidirectional - when you link Card A to Card B, both cards show the relationship.

Features

  • Link types: Parent (↑), Child (↓), and Related (↔) with distinct arrow icons
  • Link picker dialog: Click "Link to another card" to open a searchable dialog with link type tabs
  • Server-side search: Type to search cards by title or number
  • Bidirectional display: Links appear on both cards with appropriate inverse icons
  • Easy removal: Hover over a link to reveal the delete button

Implementation

  • CardLink model with source_card, target_card, and link_type enum
  • Card::Linkable concern providing parents, children, related_cards relations
  • Cards::LinksController with Turbo Stream responses for seamless UX
  • Validation prevents self-linking, cross-account linking, and circular parent chains
  • Full test coverage (39 tests for the linking feature)

Screenshots

The link section appears below the card title with:

  • Chain link icon button to add new links
  • Arrow icons indicating relationship direction
  • Card badge with number and truncated title

Test plan

  • Create a new link using the link picker dialog
  • Verify all three link types display correct icons (↑ ↓ ↔)
  • Check that links appear on both linked cards
  • Delete a link and verify it's removed from both cards
  • Search for cards by title and number in the picker
  • Verify cross-account linking is prevented

Allows linking cards with parent/child/related relationships:
- CardLink model with cycle detection for parent chains
- Card::Linkable concern with toggle-style API
- LinksController with turbo stream updates
- Link picker modal with type tabs and search
- Links display with type icons and remove buttons
- Add link.svg icon for the card linking button
- Add .link-picker class with proper sizing (max-content with 28ch minimum)
- Fix popup overflow by following tag-picker styling pattern
- Add spacing between search input and results list
Replace Unicode arrows with proper SVG icons for link type indicators.
Create arrow-down.svg by rotating arrow-up and register it in icons.css.
Replace chain link icon with arrows-horizontal for related link type.
The bidirectional arrow (↔) more clearly indicates the symmetric
relationship between related cards.
Replace custom link icon with a standard chain link design
which is more universally recognized.
Increase size of arrows-horizontal icon to match visual weight
of other link type icons (arrow-up, arrow-down).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant