[Redesign] Saved Companies List

[mehalyna]

As a user managing my saved companies,
I want to see a list view of saved companies with sector filters and updated design elements,
So that I can easily browse, categorize, and manage my saved companies with a clear and engaging interface.

Acceptance Criteria:

1. Page Header

   • The page title "Мої збережені" is prominently displayed at the top.
   • Navigation tabs are available for quick access to different categories: "Усі підприємства," "Компанії," and "Стартапи."
   • The currently selected tab is visually distinguished to indicate the active category.

2. Sector Filter Bar

   • A filter bar is displayed below the category tabs, allowing users to filter their saved companies by sector:
     • Options include "Усі сектори," "Виробники," "Імпортери," "Роздрібні мережі," "HORECA," and "Інші послуги."
   • When a sector is selected, only companies within that sector are displayed.
   • The active filter is visually highlighted to indicate which sector is currently applied.

3. Saved Company Cards

   • Each saved company is represented in a card format containing the following details:
     • Image: A thumbnail or logo of the company.
     • Status Tag (optional): A label such as "Оновлено" is displayed on top of cards to signify recently updated profiles.
     • Company Name: Displayed prominently, such as "Ассоціація рітейлерів України."
     • Category Label: Short description under the company name indicating the category, e.g., "Інші послуги."
     • Location Information: City and region are shown below the category.
     • Action Button: A "Послуги" button is provided for quick navigation to the company’s profile.
     • Saved Indicator: An icon (such as a star) is highlighted on each card, indicating that the company is saved.

4. Company Count Display

   • The page displays a total count of saved companies at the top right (e.g., "30 ПІДПРИЄМСТВ") to inform the user of the total number of saved items.

5. Footer Consistency

   • The footer is displayed at the bottom of the page, matching the design style of other pages.
   • Contains essential contact information, policy links like "Політика конфіденційності," "Умови користування," and links to sector categories for further navigation.

6. Responsive Design

   • The redesign is fully responsive, adjusting the card layout, filters, and navigation elements for various screen sizes.
   • On smaller screens, the cards should display in a compact view while maintaining readability and accessibility of key features.

7. User Interaction Feedback

   • When a user selects or deselects a filter, there is a smooth transition, and the filtered companies update dynamically without page reload.
   • A visual cue (e.g., color change or icon animation) is applied to the "star" icon when a company is saved or unsaved directly from this view.

8. Empty State

   • If there are no saved companies within a selected filter, display a message in Ukrainian:
     • "У вас немає збережених компаній у цій категорії."
   • This message is centered and styled to match the design, encouraging users to explore and save companies.

---

---

Link to mockup

https://www.figma.com/design/pdh0xc92SJqnUmix7dkeRT/Forum-Project-(New)?node-id=2116-31255&node-type=frame&t=IT1oAksqbNfmMnSL-0