refactor: Table Component : Touch Optimization

[AbuJulaybeeb]

This PR refactors table rendering to implement proper Touch Optimization. Because the repository lacked a reusable table component, we implemented a new generic Table component in src/components/ui/Table.tsx, exported it through src/components/index.ts, and verified it with a dedicated test suite.

Changes Made

• Touch-Optimized Table Component:
  • Resize Handles: Touch event coordinate mapping (onTouchStart, onTouchMove, onTouchEnd) for dragging. Expanded finger target to 24px while preserving a neat visual line.
  • Swipe-to-Reveal Actions: Horizontal drag listener on each row revealing absolute-positioned actions underneath, styled with smooth CSS transitions.
  • Row Gestures: Handled double-tap actions and long-press triggers (500ms hold with a visual scale-down animation).
  • Scroll Indicators: Visually signals horizontal off-screen columns on touch devices using gradient masks.
  • Accessibility & Targets: Touch target size of at least 48px for row selection checkboxes.
• Unit Testing:
  • Implemented 7 tests in src/components/ui/__tests__/Table.test.tsx verifying column headers, checkboxes, touch/mouse resizing, row swiping, double-tap, and long-press handlers.

Verification

• Verified all tests pass successfully using Vitest.
• Formatted source code using Prettier.
  Closes refactor Table Component : Touch Optimization (Issue 123) #521

[drips-wave]

@AbuJulaybeeb Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits