- Disable decrement button when on first page (page <= 1)
- Disable increment button when on last page (page >= lastPage)
- Prevents users from triggering invalid page navigation requests
- Improves UX by providing visual feedback for boundary conditions
This change prevents unnecessary API calls and improves user experience by clearly indicating when navigation bounds have been reached. The buttons will now be disabled at the appropriate boundaries, matching the behavior already present in the numbered page navigation section.
- Add proper type annotations to changePage function parameter using KeyboardEvent with HTMLInputElement currentTarget
- Add proper type annotations to changeCountPerPage function parameter using Event with HTMLSelectElement currentTarget
- Replace all e.target references with e.currentTarget to access properly typed DOM elements
- Add hover state styling to active page button for better UI feedback
This change resolves TypeScript errors where EventTarget type didn't have access to element-specific properties like 'value'. Using currentTarget instead of target provides the correct type since currentTarget refers to the element that has the event listener attached, ensuring type-safe access to input and select element properties.
- Update indentation from 4-space to 2-space convention throughout the component
- Reformat import statements to follow consistent spacing and alignment
- Standardize function and variable declarations with proper spacing
- Improve code readability with consistent formatting across all elements
- Clean up HTML template structure with proper indentation
- Add newline at end of file for standards compliance
This change ensures the Pagination component follows the project's code style conventions and improves maintainability through consistent formatting.
- 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.
- Disable decrement button when progress is at 0 or below to prevent negative values
- Disable increment button when:
* Media has defined episodes and progress is complete (>= total episodes)
* Or when progress has reached next airing episode boundary (nextAiringEpisode - 2)
- Improves user experience by preventing invalid progress adjustments
- Maintains data integrity by stopping users from setting impossible progress values
Fixed TypeScript compilation error caused by import statement and function declaration being on the same line.
Changes:
- Separated import statement and onMount declaration onto different lines
- Resolved svelte-preprocess type error
- File now compiles correctly
This was a typo from previous commit where the loc import line was incorrectly merged with the existing onMount function declaration.
Removed the .vscode/extensions.json file from the frontend directory.
This file contained workspace-level VSCode extension recommendations which are better managed:
- At user level through personal VSCode settings
- Through project README documentation
- Via devcontainer or editors preferences if needed
Cleanup reduces repository clutter and avoids imposing specific extension recommendations on contributors.
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
Added intelligent watchlist refresh mechanism that only refetches data when changes are actually made, preventing unnecessary API calls and improving performance.
Changes:
- Added watchlistNeedsRefresh store to track when watchlist data has changed
- Implemented reactive watcher in App.svelte that uses svelte-spa-router's loc store to detect navigation to home
- Set dirty flag in Anime.svelte after successful status updates and entry deletions
- Added conditional refresh logic that checks user's primary service (AniList, MAL, or Simkl)
- Parallel refresh support for multiple services when logged in
This resolves the issue where clicking the logo would cause full page reloads and unnecessary re-authentication checks, while also ensuring watchlist data stays current when users make changes.
Technical details:
- Uses $loc.location to detect route changes
- IIFE pattern for async operations in reactive statements
- Only refreshes for logged-in primary services
- Flag resets after successful refresh
Related to: Header.svelte client-side routing fix
- Add try-catch-finally error handling to handleSubmit and deleteEntries
functions to ensure submitting state is always reset, even when API calls
fail or timeout. This fixes the infinite loading spinner bug.
- Preserve genres field after AniList updates, matching the existing tags
preservation pattern. Prevents genres array from being lost after form
submission, which was causing "{#each} only works with iterable values"
error when the page re-rendered.
- Add fallback (|| []) to genres each block to prevent rendering errors
when genres is undefined or null for entries without genre data.
These fixes ensure robust error handling and data consistency during anime
list updates across AniList, MAL, and Simkl services.
Fixes: submit button spinner never stopping after form submission
Fixes: "{#each} only works with iterable values" error on genres display
Bug: Every click of the logo would consistently do a full page reload
- Logo clicking now uses svelte-spa-router's link
Apply consistent formatting to Header.svelte:
- Add semicolons to all statements
- Improve JSX/HTML attribute formatting for better readability
- Add link import from svelte-spa-router for SPA navigation
- Format multi-line attributes with proper indentation
These changes improve code consistency and maintainability without
altering any functionality.
Regenerate the Wails TypeScript models to include the new Genres field
in the MediaList type definition. This is an auto-generated file that
reflects the updated Go backend type structure with the genres []string
field added to the media object.
- Anime.svelte: Add genre display section with clickable badges that link
to AniList search results for each genre. Genres are now displayed above
the existing tags section with consistent styling.
- WebsiteLink.svelte: Enhance component to support custom URLs via the `url`
export parameter. Previously, the component only generated URLs based on
service prefixes (a-, m-, s-). Now it accepts a direct URL parameter for
flexible linking to AniList searches and other external resources.
These changes provide users with an improved browsing experience by making
genres interactive and easily searchable.
Update the AniListCurrentUserWatchListType TypeScript interface to include
the genres field as a string array, matching the updated backend Go type
definition. This ensures type safety and proper IDE autocomplete when
working with genre data in the frontend.
