Search improvements

[deansallinen]

• Adds search history. Shows last 10 searches for the session and the user can navigate between them with keyboard or select them with mouse
• Adds button to close search dialog
• Adds button to submit search
• Fixes horizontal overflow of layout on mobile
• Updates styles on search dialog
• Updates styles on tables
• Refactor button component
• Refactor table components
• Refactor $lib/utils with barrel export index.ts
• Add util function to middle truncate string
• Add tests for new string truncate function
• Add JetBrains monospace font

[cloudflare-workers-and-pages]

Deploying 2nicove with    Cloudflare Pages

Latest commit:	a4ba4ff
Status:	✅  Deploy successful!
Preview URL:	https://7458faa4.unicove2.pages.dev
Branch Preview URL:	https://search-history.unicove2.pages.dev

View logs

[dafuga]

What was the reason to get rid of the table component? I saw that you added the global css, but I didn't mind using a Table component 😅

[dafuga]

I guess the native table element will be more familiar for most devs 🤔 My initial push back was because I always prefer not adding global css when possible, but maybe it's fine in this situation.

[deansallinen]

The component pieces were mainly just applying styles right now. To get things like props, classes, onclick methods, and especially melt-ui builder functions to work it involved adding a lot of complexity with a layer of indirection that I felt wasn't needed.

Additionally, once I started needing "table styles" that weren't on a table element I would need to duplicate the table styles on another component and keep them in sync... Once that happened, it made sense to extract the table styles into a reusable class that could be applied on a <tr> or a <li> or <div class='subgrid'> or whatever.

And at that point, the <Table.Row> component was essentially just a <tr> anyways.

[deansallinen]

Styles are not automatically applied on all tables globally. A class is used on the root <table> to turn them on for all elements in table. And you can apply styles for just the row, or just the header, or just the hover effect (for example) which is what I needed in the search history component.

[dafuga]

Yeah, I think it's fine and like you said we can always go back to having a Table component if we need to in the future 👍

[dafuga]

💪