Files
ProxmoxVE-Local/src/app/_components/ServerSettingsButton.tsx
Michel Roegl-Brunner 5eaafbde48 feat: Add filter persistence with settings integration (#78)
* feat: Add settings modal with GitHub PAT and filter toggle

- Add GeneralSettingsModal with General and GitHub tabs
- Create GitHub PAT input field that saves to .env as GITHUB_TOKEN
- Add animated toggle component for SAVE_FILTER setting
- Create API endpoints for settings management
- Add Input and Toggle UI components
- Implement smooth animations for toggle interactions
- Add proper error handling and user feedback

* feat: Add filter persistence with settings integration

- Add filter persistence system that saves user filter preferences to .env
- Create FILTERS variable in .env to store complete filter state as JSON
- Add SAVE_FILTER toggle in settings to enable/disable persistence
- Implement auto-save functionality with 500ms debounce
- Add loading states and visual feedback for filter restoration
- Create API endpoints for managing saved filters
- Add filter management UI in settings modal
- Support for search query, type filters, sort order, and updatable status
- Seamless integration across all script tabs (Available, Downloaded, Installed)
- Auto-clear saved filters when persistence is disabled
2025-10-08 15:37:36 +02:00

51 lines
1.8 KiB
TypeScript

'use client';
import { useState } from 'react';
import { SettingsModal } from './SettingsModal';
import { Button } from './ui/button';
export function ServerSettingsButton() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<div className="flex flex-col sm:flex-row sm:items-center gap-3">
<div className="text-sm text-muted-foreground font-medium">
Add and manage PVE Servers:
</div>
<Button
onClick={() => setIsOpen(true)}
variant="outline"
size="default"
className="inline-flex items-center"
title="Add PVE Server"
>
<svg
className="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
Manage PVE Servers
</Button>
</div>
<SettingsModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
</>
);
}