Enhance EntryTraceDialog component by refactoring data display logic into dedicated summary functions for improved readability and maintainability. Update GridTab to streamline checkbox state management with a new toggle function. Refactor RulesCard to simplify window removal logic. Adjust CollectionsPanel, GenresPanel, GroupsPanel, RolesPanel, ShowsPanel, and UsersPanel to import sorting utilities from a centralized location, enhancing code organization. Update ThemeProvider to utilize a shared theme context for better consistency across the application.

frontend/src/theme/ThemeProvider.tsx

@@ -1,22 +1,5 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactNode,
-} from 'react'
-
-type Theme = 'light' | 'dark' | 'system'
-
-type ThemeContextValue = {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-}
-
-const STORAGE_KEY = 'tw-theme'
-const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
+import { THEME_STORAGE_KEY, ThemeContext, type Theme } from './theme-context'
 
 function resolve(theme: Theme): 'light' | 'dark' {
   if (theme === 'system') {
@@ -32,7 +15,7 @@ function applyTheme(theme: Theme) {
 
 export function ThemeProvider({ children }: { children: ReactNode }) {
   const [theme, setThemeState] = useState<Theme>(
-    () => (localStorage.getItem(STORAGE_KEY) as Theme | null) ?? 'dark',
+    () => (localStorage.getItem(THEME_STORAGE_KEY) as Theme | null) ?? 'dark',
   )
 
   useEffect(() => {
@@ -45,7 +28,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   }, [theme])
 
   const setTheme = useCallback((next: Theme) => {
-    localStorage.setItem(STORAGE_KEY, next)
+    localStorage.setItem(THEME_STORAGE_KEY, next)
     setThemeState(next)
   }, [])
 
@@ -54,9 +37,3 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
 
   return <ThemeContext value={value}>{children}</ThemeContext>
 }
-
-export function useTheme(): ThemeContextValue {
-  const ctx = useContext(ThemeContext)
-  if (!ctx) throw new Error('useTheme must be used within ThemeProvider')
-  return ctx
-}

frontend/src/theme/theme-context.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+export type ThemeContextValue = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+export const THEME_STORAGE_KEY = 'tw-theme'
+
+export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext)
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider')
+  return ctx
+}