feat: add graceful degradation and conditional favorites filter
Add progressive enhancement to hide filter panel when JavaScript is
disabled, and conditionally render favorites filter based on login status.
Search Component:
- Added showFilters state (default false)
- Set showFilters to true in onMount when JS is enabled
- Wrapped FilterPanel in {#if showFilters} for graceful degradation
- Filters hidden without JavaScript, visible with JS
FilterPanel:
- Split grid layout into two variants:
- with-favorites: 5 columns (120px 120px 1fr 160px 90px)
- without-favorites: 4 columns (120px 120px 1fr 160px)
- Conditionally render FavoritesFilter only when isLoggedIn
- Apply appropriate class based on login status
FavoritesFilter:
- Simplified template (no internal login check)
- Only rendered when user is logged in via FilterPanel
UX:
- Non-JS browsers: Simple search only, filters gracefully hidden
- Not logged in: 4-column layout without favorites filter
- Logged in: 5-column layout with favorites filter
This commit is contained in:
@@ -27,6 +27,7 @@
|
||||
});
|
||||
|
||||
let searchQuery = $state('');
|
||||
let showFilters = $state(false);
|
||||
|
||||
// Filter data loaded from APIs
|
||||
let availableTags = $state([]);
|
||||
@@ -246,6 +247,9 @@
|
||||
clearButton.style.display = 'flex';
|
||||
}
|
||||
|
||||
// Enable filter panel for JS-enabled browsers
|
||||
showFilters = true;
|
||||
|
||||
// Get initial search value from URL if present
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const urlQuery = urlParams.get('q');
|
||||
@@ -340,20 +344,22 @@ scale: 0.8 0.8;
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<FilterPanel
|
||||
availableCategories={categories}
|
||||
{availableTags}
|
||||
{availableIcons}
|
||||
{selectedCategory}
|
||||
{selectedTags}
|
||||
{selectedIcon}
|
||||
{selectedSeasons}
|
||||
{selectedFavoritesOnly}
|
||||
{lang}
|
||||
{isLoggedIn}
|
||||
onCategoryChange={handleCategoryChange}
|
||||
onTagToggle={handleTagToggle}
|
||||
onIconChange={handleIconChange}
|
||||
onSeasonChange={handleSeasonChange}
|
||||
onFavoritesToggle={handleFavoritesToggle}
|
||||
/>
|
||||
{#if showFilters}
|
||||
<FilterPanel
|
||||
availableCategories={categories}
|
||||
{availableTags}
|
||||
{availableIcons}
|
||||
{selectedCategory}
|
||||
{selectedTags}
|
||||
{selectedIcon}
|
||||
{selectedSeasons}
|
||||
{selectedFavoritesOnly}
|
||||
{lang}
|
||||
{isLoggedIn}
|
||||
onCategoryChange={handleCategoryChange}
|
||||
onTagToggle={handleTagToggle}
|
||||
onIconChange={handleIconChange}
|
||||
onSeasonChange={handleSeasonChange}
|
||||
onFavoritesToggle={handleFavoritesToggle}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user