onClick of pin icon to move client to top of the table

Issue (Updated 10/31/2023 by Ka Hung Lee):

At the moment, we had replaced the old Contact List Table with a Data Grid from Material UI. (See screenshot below):

The "Pin" column has been removed, however, it still utilizes the same list of objects (called contacts in ContactListTable.jsx) pulled from Solid to generate the list:

Direction:

Two thoughts (original):

1. Create a "priority" field in the .ttl file - so we can toggle it true/false.
2. Create a function that pushes this client to the front of the sorted clientList array (and thus top of table)
3. Another approach entirely 🤷🏻‍♂️

(Previous styling for table)

Updates (10/31/2023):

Personally, I like the first approach suggested by Scott and think could be a viable solution. We could simply add "priority"/"pinned" as part of each Person object in contacts and have it be represented by a boolean, similar to how messages are utilizes booleans for the read/unread status. A true status would render a red pin and false would render an outlined pin. As for how we could get the people to show up first, we could include this new attribute as part of the initialState in the MUI Data Grid.

The custom useContactsList hook is how we currently fetch this data from Solid. It also includes the code where this object is generated as a serialized RDF Thing on Solid, (see Line 18 in src/hooks/useContactsList.js of Development).

Start with ContactListTable.jsx and src/hooks/useContactsList.js, where contacts are fetched from Solid and serialized. Review how the MUI Data Grid initialState and current contact objects are built, then confirm the chosen pin or priority approach. Done means a pin can be toggled and the pinned client appears at the top of the table with the intended visual state.