Updated sort and search

[nickslick03]

Here's the rundown:

• Clicking a header will sort first ascending, descending, and then none unless another header is clicked in between.
• I removed the border between the headers and table since the border and underlines looked clunky together (sorry border), and made the headers for the table sticky.
• Wrote a filter function and added search, where the search returns every meal where the key matches the beginning of a word in the meal name or location.
• Added a custom-only meals checkbox, when checked only shows the custom meals.

One thing I noticed is that when I search, the table cells change their width. I'm sure there's a way to make it so they retain their width (display: flex; && flex: 1; perhaps), but I am too tired. Just thought this might be a point to bring up in the UI.

Another UI issue is that I don't think the search bar and checkbox look aesthetically pleasing right now so if you have any styling ideas I'm all ears.

[nickslick03]

I'm also thinking maybe the search bar only needs to appear on the available meals table?

[cdrice26]

Alright, I've looked at the code and overall it looks great! I did modify the styling, let me know what you think. Basically I did the following:

• Made the search bar expand to fill the space available, and replaced the checkbox (which, with the label, was too wide for mobile) with a toggle switch for custom meal filtering. It has icons and text, but text is only on desktop to keep it small enough on mobile. I also restyled the bar to fit the app better.
• Switched the sort indicator arrows to react-icons so that they would not be right next to the underline. This did have the side effect of causing the table to be too wide for mobile when Location was selected, so I replaced all instances of the word "Location" in the app with "Place" which fixed it. (I realize find-and-replace operations like this can sometimes cause issues but I did test the workflow of the app and everything appeared to function as intended.)
• I see what you mean about not having a border, though I do think there needs to be some differentiation. I put a shadow in there for now and I think it looks reasonably nice. I was originally just going to add padding and put the border back but the border wouldn't stay sticky and it seemed the solution to that was not straightforward so I used a shadow instead.
• Set the sorted column to Place by default so that the indicator shows when you first start the app. Also set it to sort by Place when you click a header 3 times. This is because no sorting effectively sorts by place anyway given the way we entered the data and even if it wasn't there is no value in an unsorted table as far as I'm concerned.

I did not directly address the issue of columns changing widths, and while you're right that we could apply flex:1 to them or something like that, I'm not sure we should because that would make them all the same width, which we don't really want as the name needs more space than the other columns. We'd need to apply static widths that best fit the columns and that could get messy, so personally I'm not sure if this is a big enough problem to merit dealing with it or not, let me know what you think.

As to the search bar only being necessary on AvailableMeals, I would agree. I've added a searchable prop to the MealTable and MealContainer that shows or hides the search bar and set it to false on the MealQueue and DayEditor.

[nickslick03]

Firstly, the new search bar and custom filtering look BOUGIEE. Also, the "implicit" header to sort from is a UI design I've noticed in other sorting tables, I can see why this design would cause confusion. I removed any reminiscence of it.