Move the refresh button out of the WatchList component header and into
its own RefreshWatchListButton.svelte component, placing it at the top
of the Home route page with right-alignment. This gives the refresh
control better visibility at the page level rather than being buried
inside the watchlist header.
Replace the removed refresh button in the WatchList header with the new
Sort dropdown component, giving users sort controls directly alongside
the watchlist title.
- Add explicit width (230px) and height (330px) to media cover images
- Apply object-cover class to maintain aspect ratio and prevent distortion
- Ensures uniform sizing across all media cover images in the watch list
This change improves visual consistency in the UI by standardizing the display dimensions of anime/manga cover images.
Enhanced the WatchList component with better layout and manual refresh functionality.
Changes:
- Added Refresh WatchList button with loading state handling
- Restructured header layout using flexbox with justify-between
- Title on left, refresh button on right, vertically aligned with items-center
- Improved button styling with consistent py-2 px-4 padding
- Added CheckIfAniListLoggedInAndLoadWatchList import for refresh functionality
- Maintained mb-4 spacing for consistent vertical rhythm
This gives users manual control over watchlist updates and provides better visual balance to the header section.
UI improvements:
- Horizontal flex container for proper left/right alignment
- Responsive button sizing
- Clear visual separation between title and action
