feat: Implement Proxy Groups for Better Organization

[Wikid82]

Summary

Add the ability to organize proxy hosts into named groups (e.g., "Media Stack", "Home Automation", "Development") for easier bulk management and better UX across multiple pages.

Motivation

Currently, users must manually select individual proxy hosts for bulk operations. As the number of proxies grows, this becomes tedious. Proxy groups would allow users to:

• Organize proxies by purpose/function
• Quickly apply ACLs to entire groups with one click
• View uptime status by group
• Perform bulk operations on logical groupings

Affected Pages & Features

1. Proxy Hosts Page

• Add "Group" column to the proxy table
• Add group filter dropdown (show all / show only group X)
• Allow selecting entire groups with one click
• Show group badge/tag on each proxy row
• Add ability to assign/change group when creating/editing a proxy

2. Bulk ACL Modal

• Add "Select by Group" section above individual ACL selection
• When a group is selected, automatically select all proxies in that group
• Show group names in the "Applying to X hosts" summary

3. Uptime Page

• Group uptime monitors by proxy group
• Collapsible sections for each group
• Group-level status summary (e.g., "Media Stack: 5/5 Up")
• Ability to filter by group

4. Dashboard (future consideration)

• Group status cards showing health of each group

Backend Changes Required

New Model: ProxyGroup

type ProxyGroup struct {
    ID          uint      `gorm:"primaryKey"`
    UUID        string    `gorm:"uniqueIndex;size:36"`
    Name        string    `gorm:"not null;size:100"`
    Description string    `gorm:"size:500"`
    Color       string    `gorm:"size:7"` // Hex color for UI badge
    Icon        string    `gorm:"size:50"` // Optional icon name
    CreatedAt   time.Time
    UpdatedAt   time.Time
}

ProxyHost Model Update

type ProxyHost struct {
    // ... existing fields ...
    GroupID *uint       `gorm:"index"`
    Group   *ProxyGroup `gorm:"foreignKey:GroupID"`
}

New API Endpoints

• GET /api/v1/proxy-groups - List all groups
• POST /api/v1/proxy-groups - Create a new group
• GET /api/v1/proxy-groups/:uuid - Get group details
• PUT /api/v1/proxy-groups/:uuid - Update group
• DELETE /api/v1/proxy-groups/:uuid - Delete group (unassign proxies, don't delete them)
• POST /api/v1/proxy-groups/:uuid/proxies - Bulk assign proxies to group
• DELETE /api/v1/proxy-groups/:uuid/proxies - Bulk unassign proxies from group

Frontend Changes Required

New Files

• frontend/src/api/proxyGroups.ts - API client
• frontend/src/hooks/useProxyGroups.ts - React Query hooks
• frontend/src/components/ProxyGroupBadge.tsx - Group badge component
• frontend/src/components/ProxyGroupSelector.tsx - Dropdown/modal for assigning groups
• frontend/src/pages/ProxyGroups.tsx - (Optional) Dedicated groups management page

Modified Files

• ProxyHosts.tsx - Add group column, filtering, and bulk group selection
• ProxyHostForm.tsx - Add group selector to form
• Uptime.tsx - Group monitors by proxy group
• Bulk ACL modal - Add group selection option

UI/UX Considerations

1. Default Group: Consider having an "Ungrouped" pseudo-group for proxies without assignment
2. Colors: Allow users to assign colors to groups for visual distinction
3. Icons: Optional icons from Lucide icon set for groups
4. Drag & Drop: Future enhancement - drag proxies between groups

Implementation Order

1. Backend: Create ProxyGroup model and migrate
2. Backend: Create CRUD handlers for groups
3. Backend: Add group_id to ProxyHost and update handlers
4. Frontend: Create API client and hooks
5. Frontend: Add group management UI (could be a modal or dedicated page)
6. Frontend: Update ProxyHosts page with group column and filtering
7. Frontend: Update ProxyHostForm with group selector
8. Frontend: Update Bulk ACL modal with group selection
9. Frontend: Update Uptime page with group organization

Acceptance Criteria

• Users can create, edit, and delete proxy groups
• Users can assign proxies to groups during creation/editing
• Proxy hosts page shows group information and can filter by group
• Bulk ACL modal can select all proxies in a group with one click
• Uptime page organizes monitors by group
• All existing tests continue to pass
• New tests cover group functionality
• Documentation updated

Labels

enhancement, frontend, backend, ux

---

Priority: High - This is foundational work that should be done before adding more features to avoid rework.