fix: minor UI and styling tweaks

[hestro]

This PR adds a set of small UI, styling and accessibility fixes:

• Add the missing breadcrumb to the books page
• Add a role and aria-label to the rating text on book cards, so screen readers announce it as a rating
• Remove the "rating" word from book card ratings on the profile page, where the smaller cards made the text wrap awkwardly
• Set color-scheme for light and dark mode, which reduces the light blue autofill background on the search input in dark mode
• Tweak the selected book layout
• Make it clearer what "unknown" on the cards mean
• Set a dynamic page title on the selected book page, using <title> in the component instead of meta, since the title depends on data about the book

Closes #125
Closes #96

[hestro]

I also noticed our drop-downs currently don't use cursor: pointer, unlike our other buttons. I could add cursor: pointer to them as well if we want it - what do you think?

[martakam]

I also noticed our drop-downs currently don't use cursor: pointer, unlike our other buttons. I could add cursor: pointer to them as well if we want it - what do you think?

Good catch, we should add that as well

[hestro]

I have removed the duplicate title from root.tsx and made sure all dropdowns use cursor: pointer, matching our other buttons.

I also added a log out button to the profile page, since it felt like a logical feature to have there.

[johahor]

Removing this fixed the duplicate titles 👍 but now nothing sets a title on the 404/error page: root has no meta, and ErrorBoundary is the only error boundary. On /project2/finnes-ikke the tab just shows the URL and document.title is empty (WCAG 2.4.2 Page Titled).

Could you add a title in ErrorBoundary?

<title>{`${message === "404" ? "Page not found" : "Error"} | Readr`}</title>

(A meta export in root would bring the duplicate back on the book page, since selectedBook has no meta and would inherit it.)

This comment was written with help of AI