[Task]: Refact board UI

[luizhcastro]

Objective

Currently, we have a board screen, but we are updating the application's design and need to refactor the boards for the new design available at this link: https://www.figma.com/design/fwgpxrsQ9mFoA30JR3c7xu/Blaboard---Prototype?node-id=61-913&t=WROYgVHwUEmU8HrQ-4

Note that you will refactor only the UI board and action buttons at the top of the board; this does not include the sidebar. We already have another issue open for its refactoring.

Scope

In Scope

UI Board Components

• Refactor the board columns layout (Backlog, Todo, In Progress, Review)
• Update card design according to Figma specifications
• Implement new visual styling for task cards including:
  • Labels display
  • Priority indicators
  • Assignee avatars
  • Status indicators
• Update drag-and-drop functionality to match new design

Action Buttons

• Refactor top action bar buttons
• Update button styles and icons
• Implement new filter options UI
• Add search functionality UI
• Update view mode toggles (if applicable)

Interactions

• Maintain existing drag-and-drop functionality
• Ensure responsive design for different screen sizes
• Implement hover states and animations as specified in Figma

Out of Scope

• Sidebar navigation (covered in issue [Task]: Refact side bar with new design #52)
• Backend API changes
• Task CRUD operations logic
• Authentication/Authorization
• Websocket real-time updates (covered in issue Implement Websocket Board Integration #34)
• Filter functionality logic (covered in issue Implement task filtering functionality (Linear-inspired) #26)

Acceptance criteria

• Board UI matches the Figma design specifications
• Drag-and-drop functionality works smoothly between columns (this one is absolutely important for this issue, i recommend staying with the actual implementation)
• All board columns (Backlog, Todo, In Progress, Review) are properly styled
• Task cards display all required information:
  • Task title
  • Labels
  • Priority indicator
  • Assignee avatar
  • Status indicator
• Top action bar buttons are refactored and styled according to Figma
• Filter options UI is implemented
• Search functionality UI is implemented
• All hover states and animations work as specified
• Board is responsive on desktop, tablet, and mobile viewports
• No visual regressions compared to Figma design
• Existing board functionality remains intact (CRUD operations still work)
• Code follows project's coding standards and conventions