[PR #78] [MERGED] feat: Add filter persistence with settings integration #198

New issue

Closed

opened 2026-02-26 12:40:34 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 12:40:34 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/78
Author: @michelroegl-brunner
Created: 10/8/2025
Status: ✅ Merged
Merged: 10/8/2025
Merged by: @michelroegl-brunner

Base: main ← Head: feat/settings_menue

📝 Commits (2)

a92968e feat: Add settings modal with GitHub PAT and filter toggle
cbaa851 feat: Add filter persistence with settings integration

📊 Changes

15 files changed (+895 additions, -92 deletions)

View changed files

📝 .env.example (+5 -1)
📝 public/favicon.png (+0 -0)
📝 src/app/_components/DownloadedScriptsTab.tsx (+60 -0)
📝 src/app/_components/FilterBar.tsx (+26 -0)
➕ src/app/_components/GeneralSettingsModal.tsx (+308 -0)
📝 src/app/_components/ScriptsGrid.tsx (+60 -0)
➕ src/app/_components/ServerSettingsButton.tsx (+50 -0)
📝 src/app/_components/SettingsButton.tsx (+7 -26)
📝 src/app/_components/SettingsModal.tsx (+19 -58)
➕ src/app/_components/ui/input.tsx (+23 -0)
➕ src/app/_components/ui/toggle.tsx (+41 -0)
➕ src/app/api/settings/filters/route.ts (+141 -0)
➕ src/app/api/settings/github-token/route.ts (+75 -0)
➕ src/app/api/settings/save-filter/route.ts (+75 -0)
📝 src/app/page.tsx (+5 -7)

📄 Description

🎯 Feature: Filter Persistence System

This PR introduces a comprehensive filter persistence system that allows users to save and restore their script filter preferences across sessions.

✨ Key Features

🔧 Settings Integration

New toggle in General Settings to enable/disable filter persistence
Visual indicator when filters are being saved automatically
Settings modal shows current saved filter status and details

💾 Persistent Storage

Saves complete filter state to FILTERS variable in .env file
Includes search query, type filters, sort order, and updatable status
JSON-based storage for easy parsing and validation

⚡ Smart Auto-Save

Automatically saves filters when changed (with 500ms debounce)
Only saves when persistence is enabled
Graceful error handling and user feedback

🔄 Seamless Restoration

Loads saved filters on page load when persistence is enabled
Falls back to defaults when persistence is disabled
Loading states during filter restoration

📱 Enhanced UX

Loading spinner while restoring filters
Status indicator showing auto-save is active
Clear saved filters option in settings
Works across all script tabs (Available, Downloaded, Installed)

🛠️ Technical Implementation

API Endpoints

POST /api/settings/filters - Save current filters
GET /api/settings/filters - Retrieve saved filters
DELETE /api/settings/filters - Clear saved filters

Components Updated

FilterBar - Added persistence props and loading states
ScriptsGrid - Integrated filter loading/saving logic
DownloadedScriptsTab - Added persistence support
GeneralSettingsModal - Added filter management UI

Data Flow

User toggles persistence in settings
Filters auto-save to .env when changed
Page loads restore saved filters if enabled
Settings show current filter status

🎨 User Experience

When enabled: Filters persist across page reloads and sessions
When disabled: Uses default filters, no persistence
Visual feedback: Clear indicators for loading and auto-save status
Settings management: Easy toggle and filter clearing

This enhancement significantly improves user experience by maintaining their preferred filter settings, reducing the need to reconfigure filters on each visit.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/community-scripts/ProxmoxVE-Local/pull/78 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/8/2025 **Status:** ✅ Merged **Merged:** 10/8/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `feat/settings_menue` --- ### 📝 Commits (2) - [`a92968e`](https://github.com/community-scripts/ProxmoxVE-Local/commit/a92968e89c7f52121b6908a3e71517b7bf7e1990) feat: Add settings modal with GitHub PAT and filter toggle - [`cbaa851`](https://github.com/community-scripts/ProxmoxVE-Local/commit/cbaa851e9e6ffbdea171605bb02366a5c00c5c7e) feat: Add filter persistence with settings integration ### 📊 Changes **15 files changed** (+895 additions, -92 deletions) <details> <summary>View changed files</summary> 📝 `.env.example` (+5 -1) 📝 `public/favicon.png` (+0 -0) 📝 `src/app/_components/DownloadedScriptsTab.tsx` (+60 -0) 📝 `src/app/_components/FilterBar.tsx` (+26 -0) ➕ `src/app/_components/GeneralSettingsModal.tsx` (+308 -0) 📝 `src/app/_components/ScriptsGrid.tsx` (+60 -0) ➕ `src/app/_components/ServerSettingsButton.tsx` (+50 -0) 📝 `src/app/_components/SettingsButton.tsx` (+7 -26) 📝 `src/app/_components/SettingsModal.tsx` (+19 -58) ➕ `src/app/_components/ui/input.tsx` (+23 -0) ➕ `src/app/_components/ui/toggle.tsx` (+41 -0) ➕ `src/app/api/settings/filters/route.ts` (+141 -0) ➕ `src/app/api/settings/github-token/route.ts` (+75 -0) ➕ `src/app/api/settings/save-filter/route.ts` (+75 -0) 📝 `src/app/page.tsx` (+5 -7) </details> ### 📄 Description ## 🎯 Feature: Filter Persistence System This PR introduces a comprehensive filter persistence system that allows users to save and restore their script filter preferences across sessions. ### ✨ Key Features **🔧 Settings Integration** - New toggle in General Settings to enable/disable filter persistence - Visual indicator when filters are being saved automatically - Settings modal shows current saved filter status and details **💾 Persistent Storage** - Saves complete filter state to `FILTERS` variable in .env file - Includes search query, type filters, sort order, and updatable status - JSON-based storage for easy parsing and validation **⚡ Smart Auto-Save** - Automatically saves filters when changed (with 500ms debounce) - Only saves when persistence is enabled - Graceful error handling and user feedback **🔄 Seamless Restoration** - Loads saved filters on page load when persistence is enabled - Falls back to defaults when persistence is disabled - Loading states during filter restoration **📱 Enhanced UX** - Loading spinner while restoring filters - Status indicator showing auto-save is active - Clear saved filters option in settings - Works across all script tabs (Available, Downloaded, Installed) ### 🛠️ Technical Implementation **API Endpoints** - `POST /api/settings/filters` - Save current filters - `GET /api/settings/filters` - Retrieve saved filters - `DELETE /api/settings/filters` - Clear saved filters **Components Updated** - `FilterBar` - Added persistence props and loading states - `ScriptsGrid` - Integrated filter loading/saving logic - `DownloadedScriptsTab` - Added persistence support - `GeneralSettingsModal` - Added filter management UI **Data Flow** 1. User toggles persistence in settings 2. Filters auto-save to .env when changed 3. Page loads restore saved filters if enabled 4. Settings show current filter status ### 🎨 User Experience - **When enabled**: Filters persist across page reloads and sessions - **When disabled**: Uses default filters, no persistence - **Visual feedback**: Clear indicators for loading and auto-save status - **Settings management**: Easy toggle and filter clearing This enhancement significantly improves user experience by maintaining their preferred filter settings, reducing the need to reconfigure filters on each visit. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>