refactor: redesign web UI to match Arr-style dark theme and improve UX

Complete frontend redesign following Radarr/Sonarr/Lidarr design patterns:

## UI/UX Improvements
- Implement dark Arr-style theme with consistent color palette (#0d0d0d, #1a1a1a, #262626)
- Redesign sidebar navigation with collapsible Settings submenu
- Replace top header with integrated sidebar navigation (save vertical space)
- Add clickable dashboard stat cards that navigate to filtered views
- Implement skeleton loading states for dashboard metrics
- Add confirmation dialogs for all destructive actions (protect/unprotect)
- Enhance empty states with context-aware messages and helpful CTAs
- Improve form layouts in Settings with better visual hierarchy
- Add service status indicators with health checks

## Component Architecture
- Replace AppHeader with new AppLayout component
- Create ErrorBoundary for graceful error handling
- Add ServiceStatusCard for integration health monitoring
- Implement Skeleton component for loading states
- Remove theme toggle (hardcoded dark theme for consistency)

## Error Handling & Resilience
- Add comprehensive error boundary with user-friendly error UI
- Create client-side error logging service with structured logging
- Configure React Query with smart retry logic (exponential backoff)
- Add error callbacks for query/mutation failures
- Skip retries for 401/403/404, retry network errors up to 2 times

## Performance
- Add memoization for expensive calculations (scheduledDeletionsCount)
- Optimize query caching with proper staleTime and gcTime
- Add loading skeletons to prevent layout shift

## API Changes
- Add GET /api/services/status endpoint for health checks
- Return service configuration and connectivity status

## Code Quality
- Remove unused theme store
- Clean up duplicate components and unused imports
- Add comprehensive TODO comments for future server-side pagination
- Fix TypeScript errors and improve type safety

This refactor brings the UI in line with the Arr ecosystem's familiar
interface while adding modern UX patterns like confirmations, better
empty states, and comprehensive error handling.

Author: ramonskie

internal/api/handlers/services.go

@@ -0,0 +1,124 @@
+package handlers
+
+import (
+	"context"
+	"encoding/json"
+	"net/http"
+	"sync"
+	"time"
+
+	"github.com/ramonskie/oxicleanarr/internal/clients"
+	"github.com/ramonskie/oxicleanarr/internal/config"
+)
+
+// ServiceStatusHandler handles checking the status of connected services
+type ServiceStatusHandler struct {
+	config *config.Config
+}
+
+// NewServiceStatusHandler creates a new ServiceStatusHandler
+func NewServiceStatusHandler(cfg *config.Config) *ServiceStatusHandler {
+	return &ServiceStatusHandler{
+		config: cfg,
+	}
+}
+
+// ServiceStatus represents the status of a service
+type ServiceStatus struct {
+	Name    string `json:"name"`
+	Enabled bool   `json:"enabled"`
+	Online  bool   `json:"online"`
+	Error   string `json:"error,omitempty"`
+	Latency string `json:"latency,omitempty"`
+}
+
+// ServiceStatusResponse represents the response for service status check
+type ServiceStatusResponse struct {
+	Services []ServiceStatus `json:"services"`
+}
+
+// CheckStatus handles GET /api/system/services
+func (h *ServiceStatusHandler) CheckStatus(w http.ResponseWriter, r *http.Request) {
+	// Always get fresh config to reflect current settings
+	cfg := config.Get()
+
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	var wg sync.WaitGroup
+	results := make([]ServiceStatus, 0)
+	resultsChan := make(chan ServiceStatus, 5)
+
+	// Helper to check service
+	checkService := func(name string, enabled bool, pinger func(context.Context) error) {
+		defer wg.Done()
+		status := ServiceStatus{
+			Name:    name,
+			Enabled: enabled,
+		}
+
+		if !enabled {
+			resultsChan <- status
+			return
+		}
+
+		start := time.Now()
+		if err := pinger(ctx); err != nil {
+			status.Online = false
+			status.Error = err.Error()
+		} else {
+			status.Online = true
+			status.Latency = time.Since(start).String()
+		}
+		resultsChan <- status
+	}
+
+	// Jellyfin
+	wg.Add(1)
+	go func() {
+		client := clients.NewJellyfinClient(cfg.Integrations.Jellyfin)
+		checkService("Jellyfin", cfg.Integrations.Jellyfin.Enabled, client.Ping)
+	}()
+
+	// Radarr
+	wg.Add(1)
+	go func() {
+		client := clients.NewRadarrClient(cfg.Integrations.Radarr)
+		checkService("Radarr", cfg.Integrations.Radarr.Enabled, client.Ping)
+	}()
+
+	// Sonarr
+	wg.Add(1)
+	go func() {
+		client := clients.NewSonarrClient(cfg.Integrations.Sonarr)
+		checkService("Sonarr", cfg.Integrations.Sonarr.Enabled, client.Ping)
+	}()
+
+	// Jellyseerr
+	wg.Add(1)
+	go func() {
+		client := clients.NewJellyseerrClient(cfg.Integrations.Jellyseerr)
+		checkService("Jellyseerr", cfg.Integrations.Jellyseerr.Enabled, client.Ping)
+	}()
+
+	// Jellystat
+	wg.Add(1)
+	go func() {
+		client := clients.NewJellystatClient(cfg.Integrations.Jellystat)
+		checkService("Jellystat", cfg.Integrations.Jellystat.Enabled, client.Ping)
+	}()
+
+	// Wait for all checks to complete
+	go func() {
+		wg.Wait()
+		close(resultsChan)
+	}()
+
+	// Collect results
+	for status := range resultsChan {
+		results = append(results, status)
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(ServiceStatusResponse{Services: results})
+}

internal/api/router.go

@@ -9,6 +9,7 @@ import (
 	"github.com/go-chi/cors"
 	"github.com/ramonskie/oxicleanarr/internal/api/handlers"
 	mw "github.com/ramonskie/oxicleanarr/internal/api/middleware"
+	"github.com/ramonskie/oxicleanarr/internal/config"
 	"github.com/ramonskie/oxicleanarr/internal/services"
 	"github.com/ramonskie/oxicleanarr/internal/storage"
 )
@@ -52,6 +53,7 @@ func NewRouter(deps *RouterDependencies) *chi.Mux {
 	configHandler := handlers.NewConfigHandler(deps.SyncEngine)
 	rulesHandler := handlers.NewRulesHandler()
 	systemHandler := handlers.NewSystemHandler(deps.SyncEngine, deps.ShutdownCh)
+	servicesHandler := handlers.NewServiceStatusHandler(config.Get())
 
 	// Public routes
 	r.Get("/health", healthHandler.Handle)
@@ -107,6 +109,7 @@ func NewRouter(deps *RouterDependencies) *chi.Mux {
 			r.Post("/system/restart", systemHandler.Restart)
 			r.Get("/system/health", systemHandler.HealthCheck)
 			r.Get("/system/info", systemHandler.GetInfo)
+			r.Get("/system/services", servicesHandler.CheckStatus)
 		})
 	})
 

web/src/App.tsx

@@ -3,7 +3,8 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from 'sonner';
 import { useAuthStore } from '@/store/auth';
-import { useThemeStore } from '@/store/theme';
+import ErrorBoundary from '@/components/ErrorBoundary';
+import { errorLogger } from '@/lib/error-logger';
 import LoginPage from '@/pages/LoginPage';
 import DashboardPage from '@/pages/DashboardPage';
 import TimelinePage from '@/pages/TimelinePage';
@@ -17,26 +18,50 @@ import ProtectedRoute from '@/components/ProtectedRoute';
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      retry: 1,
+      retry: (failureCount, error: any) => {
+        // Don't retry on 401/403 (auth errors)
+        if (error?.response?.status === 401 || error?.response?.status === 403) {
+          return false;
+        }
+        // Don't retry on 404 (not found)
+        if (error?.response?.status === 404) {
+          return false;
+        }
+        // Retry up to 2 times for other errors (network issues, 500s, etc.)
+        return failureCount < 2;
+      },
+      retryDelay: (attemptIndex) => {
+        // Exponential backoff: 1s, 2s, 4s
+        return Math.min(1000 * 2 ** attemptIndex, 30000);
+      },
       refetchOnWindowFocus: true,
       staleTime: 30000, // Consider data stale after 30 seconds
+      gcTime: 300000, // Keep unused data in cache for 5 minutes
+    },
+    mutations: {
+      retry: false, // Don't retry mutations by default
+      onError: (error: any) => {
+        // Log mutation errors
+        errorLogger.error('React Query mutation failed', error, {
+          type: 'mutation',
+        });
+      },
     },
   },
 });
 
 function App() {
   const initializeAuth = useAuthStore((state) => state.initialize);
-  const initializeTheme = useThemeStore((state) => state.initialize);
 
   useEffect(() => {
     initializeAuth();
-    initializeTheme();
-  }, [initializeAuth, initializeTheme]);
+  }, [initializeAuth]);
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <Routes>
+    <ErrorBoundary>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <Routes>
           <Route path="/login" element={<LoginPage />} />
           <Route
             path="/"
@@ -80,6 +105,10 @@ function App() {
           />
           <Route
             path="/configuration"
+            element={<Navigate to="/settings/general" replace />}
+          />
+          <Route
+            path="/settings/:section"
             element={
               <ProtectedRoute>
                 <ConfigurationPage />
@@ -95,10 +124,11 @@ function App() {
             }
           />
           <Route path="*" element={<Navigate to="/" replace />} />
-        </Routes>
-      </BrowserRouter>
-      <Toaster position="top-right" richColors />
-    </QueryClientProvider>
+          </Routes>
+        </BrowserRouter>
+        <Toaster position="top-right" richColors />
+      </QueryClientProvider>
+    </ErrorBoundary>
   );
 }