81da20c905
Remove theme and locale from instance settings to eliminate duplication and simplify the codebase. These are user-specific preferences and should only exist in user settings, not instance-wide settings. Backend changes: - Remove theme from InstanceGeneralSetting proto - Remove locale from InstanceCustomProfile proto - Update instance service converters to remove theme/locale handling - Simplify RSS feed to use static locale Frontend changes: - Remove theme/locale from instanceStore state - Create unified initialization flow with clear fallback priority: * Theme: user setting → localStorage → system preference * Locale: user setting → browser language - Add applyUserPreferences() to centralize theme/locale application - Simplify App.tsx by removing redundant state synchronization - Update all components to use new helper functions: * getThemeWithFallback() for theme resolution * getLocaleWithFallback() for locale resolution - Remove theme/locale selectors from instance profile dialog Theme utilities refactor: - Organize code into clear sections with JSDoc comments - Extract localStorage operations into getStoredTheme/setStoredTheme helpers - Split DOM manipulation into focused functions - Improve type safety with Theme and ResolvedTheme types - Reduce code duplication and improve maintainability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { Monitor, Moon, MoonStar, Palette, Sun, Wallpaper } from "lucide-react";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { THEME_OPTIONS } from "@/utils/theme";
|
|
|
|
interface ThemeSelectProps {
|
|
value?: string;
|
|
onValueChange?: (theme: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const THEME_ICONS: Record<string, JSX.Element> = {
|
|
system: <Monitor className="w-4 h-4" />,
|
|
default: <Sun className="w-4 h-4" />,
|
|
"default-dark": <Moon className="w-4 h-4" />,
|
|
midnight: <MoonStar className="w-4 h-4" />,
|
|
paper: <Palette className="w-4 h-4" />,
|
|
whitewall: <Wallpaper className="w-4 h-4" />,
|
|
};
|
|
|
|
const ThemeSelect = ({ value, onValueChange, className }: ThemeSelectProps = {}) => {
|
|
const currentTheme = value || "system";
|
|
|
|
const handleThemeChange = (newTheme: string) => {
|
|
if (onValueChange) {
|
|
onValueChange(newTheme);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Select value={currentTheme} onValueChange={handleThemeChange}>
|
|
<SelectTrigger className={className}>
|
|
<div className="flex items-center gap-2">
|
|
<SelectValue placeholder="Select theme" />
|
|
</div>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{THEME_OPTIONS.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
<div className="flex items-center gap-2">
|
|
{THEME_ICONS[option.value]}
|
|
<span>{option.label}</span>
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
};
|
|
|
|
export default ThemeSelect;
|