feat:add truncate peer id

[DarkLord017]

Resolves #135

📝 Description

This pull request introduces a new CompactPeerID component to improve how Peer IDs are displayed and interacted with across the application.

Problem Solved:
Long Peer IDs cluttered table layouts, were difficult to read, and required multiple steps to copy. The new component resolves these issues by providing a cleaner UI and faster interaction.

Type: New feature / UI enhancement / Refactor

---

🛠️ Key Changes

• Introduced the new CompactPeerID component with:

  • Truncated display for long Peer IDs
  • Full Peer ID shown on hover/focus
  • One-click copy-to-clipboard support
  • (src/components/CompactPeerID.tsx)

• Added truncatePeerID utility for consistent truncation logic

  • (src/utils/truncate-peer-id.ts)

• Updated Service Providers table to replace PeerID with CompactPeerID and applied max column sizing

  • (src/app/service-providers/data/column-definition.tsx)

• Updated Warm Storage Service table to use CompactPeerID

  • (src/app/warm-storage-service/data/column-definition.tsx)

---

📌 To-Do Before Merging

• Confirm accessibility (hover, focus, screen reader text)
• Validate that copy-to-clipboard works across all supported browsers
• Add unit tests for truncatePeerID
• Add Storybook / UI docs for CompactPeerID (optional)

---

🧪 How to Test

Setup

• Pull the branch locally

• Run the dev server:

  npm run dev

Steps to Test

1. Navigate to Service Providers table
2. Confirm Peer IDs appear truncated
3. Hover or focus on the Peer ID to view full value
4. Click the copy button/icon
5. Verify the correct full Peer ID is copied to clipboard
6. Navigate to Warm Storage Service table
7. Repeat the same validation steps there

Expected Results

• Peer IDs should display in truncated form (e.g., 12D3K...8H9Q)
• Tooltip or hover should show full Peer ID
• Clicking the copy icon should copy the full Peer ID
• Table layout should be cleaner and more compact

Additional Notes

• Ensure no regressions in sorting, filtering, or row alignment
• Confirm that mobile responsiveness is not affected

---

📸 Screenshots

[vercel]

@DarkLord017 is attempting to deploy a commit to the FilOz's projects Team on Vercel.

A member of the Team first needs to authorize it.

[mirhamasala]

@DarkLord017 Thank you for this. We'll have a look. 🙏🏼

@CharlyMartin Would you like to review and pull the relevant bits into the component library? There's a design but it may be incomplete. I think we also need to give the user feedback once copied like we have on the Warm Storage Service page for the "copy code snippet" bit.

#135