mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 17:43:47 +00:00
Refactor AdminSettings into modular components
Split 1123-line monolithic AdminSettings.tsx into 11 modules: Components: - icons.tsx (85 lines) - All SVG icons - Toggle.tsx (21 lines) - Reusable toggle component - SettingInput.tsx (89 lines) - Text/select input for settings - SettingRow.tsx (104 lines) - Single setting card - BrandingTab.tsx (212 lines) - Logo, name, animation settings - ThemeTab.tsx (277 lines) - Theme presets and custom colors - FavoritesTab.tsx (59 lines) - Starred settings display - SettingsTab.tsx (144 lines) - Accordion categories view Utilities: - constants.ts (55 lines) - MENU_SECTIONS, THEME_PRESETS - utils.ts (35 lines) - formatSettingKey, stripHtml - index.ts (13 lines) - Barrel exports Result: AdminSettings.tsx reduced from 1123 to 251 lines
This commit is contained in:
PEDZEO
212
src/components/admin/BrandingTab.tsx
Normal file
212
src/components/admin/BrandingTab.tsx
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
import { useState, useRef } from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||||
|
import { brandingApi, setCachedBranding } from '../../api/branding'
|
||||||
|
import { setCachedAnimationEnabled } from '../AnimatedBackground'
|
||||||
|
import { setCachedFullscreenEnabled } from '../../hooks/useTelegramWebApp'
|
||||||
|
import { UploadIcon, TrashIcon, PencilIcon, CheckIcon, CloseIcon } from './icons'
|
||||||
|
import { Toggle } from './Toggle'
|
||||||
|
|
||||||
|
interface BrandingTabProps {
|
||||||
|
accentColor?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BrandingTab({ accentColor = '#3b82f6' }: BrandingTabProps) {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||||
|
|
||||||
|
const [editingName, setEditingName] = useState(false)
|
||||||
|
const [newName, setNewName] = useState('')
|
||||||
|
|
||||||
|
// Queries
|
||||||
|
const { data: branding } = useQuery({
|
||||||
|
queryKey: ['branding'],
|
||||||
|
queryFn: brandingApi.getBranding,
|
||||||
|
})
|
||||||
|
|
||||||
|
const { data: animationSettings } = useQuery({
|
||||||
|
queryKey: ['animation-enabled'],
|
||||||
|
queryFn: brandingApi.getAnimationEnabled,
|
||||||
|
})
|
||||||
|
|
||||||
|
const { data: fullscreenSettings } = useQuery({
|
||||||
|
queryKey: ['fullscreen-enabled'],
|
||||||
|
queryFn: brandingApi.getFullscreenEnabled,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Mutations
|
||||||
|
const updateBrandingMutation = useMutation({
|
||||||
|
mutationFn: brandingApi.updateName,
|
||||||
|
onSuccess: (data) => {
|
||||||
|
setCachedBranding(data)
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['branding'] })
|
||||||
|
setEditingName(false)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const uploadLogoMutation = useMutation({
|
||||||
|
mutationFn: brandingApi.uploadLogo,
|
||||||
|
onSuccess: (data) => {
|
||||||
|
setCachedBranding(data)
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['branding'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const deleteLogoMutation = useMutation({
|
||||||
|
mutationFn: brandingApi.deleteLogo,
|
||||||
|
onSuccess: (data) => {
|
||||||
|
setCachedBranding(data)
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['branding'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const updateAnimationMutation = useMutation({
|
||||||
|
mutationFn: (enabled: boolean) => brandingApi.updateAnimationEnabled(enabled),
|
||||||
|
onSuccess: (data) => {
|
||||||
|
setCachedAnimationEnabled(data.enabled)
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['animation-enabled'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const updateFullscreenMutation = useMutation({
|
||||||
|
mutationFn: (enabled: boolean) => brandingApi.updateFullscreenEnabled(enabled),
|
||||||
|
onSuccess: (data) => {
|
||||||
|
setCachedFullscreenEnabled(data.enabled)
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['fullscreen-enabled'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleLogoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = e.target.files?.[0]
|
||||||
|
if (file) {
|
||||||
|
uploadLogoMutation.mutate(file)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Logo & Name */}
|
||||||
|
<div className="p-6 rounded-2xl bg-dark-800/50 border border-dark-700/50">
|
||||||
|
<h3 className="text-lg font-semibold text-dark-100 mb-4">{t('admin.settings.logoAndName')}</h3>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-6">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<div
|
||||||
|
className="w-20 h-20 rounded-2xl flex items-center justify-center text-3xl font-bold text-white overflow-hidden"
|
||||||
|
style={{
|
||||||
|
background: `linear-gradient(135deg, ${accentColor}, ${accentColor}dd)`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{branding?.has_custom_logo ? (
|
||||||
|
<img src={brandingApi.getLogoUrl(branding) ?? undefined} alt="Logo" className="w-full h-full object-cover" />
|
||||||
|
) : (
|
||||||
|
branding?.logo_letter || 'V'
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-2 mt-3">
|
||||||
|
<input
|
||||||
|
ref={fileInputRef}
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={handleLogoUpload}
|
||||||
|
className="hidden"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => fileInputRef.current?.click()}
|
||||||
|
disabled={uploadLogoMutation.isPending}
|
||||||
|
className="flex-1 flex items-center justify-center gap-1 px-3 py-2 rounded-xl bg-dark-700 hover:bg-dark-600 text-dark-200 text-sm transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<UploadIcon />
|
||||||
|
</button>
|
||||||
|
{branding?.has_custom_logo && (
|
||||||
|
<button
|
||||||
|
onClick={() => deleteLogoMutation.mutate()}
|
||||||
|
disabled={deleteLogoMutation.isPending}
|
||||||
|
className="px-3 py-2 rounded-xl bg-dark-700 hover:bg-error-500/20 text-dark-400 hover:text-error-400 transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<TrashIcon />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Name */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<label className="block text-sm font-medium text-dark-300 mb-2">{t('admin.settings.projectName')}</label>
|
||||||
|
{editingName ? (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newName}
|
||||||
|
onChange={(e) => setNewName(e.target.value)}
|
||||||
|
className="flex-1 px-4 py-2 rounded-xl bg-dark-700 border border-dark-600 text-dark-100 focus:outline-none focus:border-accent-500"
|
||||||
|
maxLength={50}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => updateBrandingMutation.mutate(newName)}
|
||||||
|
disabled={updateBrandingMutation.isPending}
|
||||||
|
className="px-4 py-2 rounded-xl bg-accent-500 text-white hover:bg-accent-600 transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<CheckIcon />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setEditingName(false)}
|
||||||
|
className="px-4 py-2 rounded-xl bg-dark-700 text-dark-300 hover:bg-dark-600 transition-colors"
|
||||||
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-lg text-dark-100">{branding?.name || t('admin.settings.notSpecified')}</span>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setNewName(branding?.name ?? '')
|
||||||
|
setEditingName(true)
|
||||||
|
}}
|
||||||
|
className="p-1.5 rounded-lg text-dark-400 hover:text-dark-200 hover:bg-dark-700 transition-colors"
|
||||||
|
>
|
||||||
|
<PencilIcon />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Animation & Fullscreen toggles */}
|
||||||
|
<div className="p-6 rounded-2xl bg-dark-800/50 border border-dark-700/50">
|
||||||
|
<h3 className="text-lg font-semibold text-dark-100 mb-4">{t('admin.settings.interfaceOptions')}</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between p-4 rounded-xl bg-dark-700/30">
|
||||||
|
<div>
|
||||||
|
<span className="font-medium text-dark-100">{t('admin.settings.animatedBackground')}</span>
|
||||||
|
<p className="text-sm text-dark-400">{t('admin.settings.animatedBackgroundDesc')}</p>
|
||||||
|
</div>
|
||||||
|
<Toggle
|
||||||
|
checked={animationSettings?.enabled ?? true}
|
||||||
|
onChange={() => updateAnimationMutation.mutate(!(animationSettings?.enabled ?? true))}
|
||||||
|
disabled={updateAnimationMutation.isPending}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between p-4 rounded-xl bg-dark-700/30">
|
||||||
|
<div>
|
||||||
|
<span className="font-medium text-dark-100">{t('admin.settings.autoFullscreen')}</span>
|
||||||
|
<p className="text-sm text-dark-400">{t('admin.settings.autoFullscreenDesc')}</p>
|
||||||
|
</div>
|
||||||
|
<Toggle
|
||||||
|
checked={fullscreenSettings?.enabled ?? false}
|
||||||
|
onChange={() => updateFullscreenMutation.mutate(!(fullscreenSettings?.enabled ?? false))}
|
||||||
|
disabled={updateFullscreenMutation.isPending}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
59
src/components/admin/FavoritesTab.tsx
Normal file
59
src/components/admin/FavoritesTab.tsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||||
|
import { SettingDefinition, adminSettingsApi } from '../../api/adminSettings'
|
||||||
|
import { StarIcon } from './icons'
|
||||||
|
import { SettingRow } from './SettingRow'
|
||||||
|
|
||||||
|
interface FavoritesTabProps {
|
||||||
|
settings: SettingDefinition[]
|
||||||
|
isFavorite: (key: string) => boolean
|
||||||
|
toggleFavorite: (key: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FavoritesTab({ settings, isFavorite, toggleFavorite }: FavoritesTabProps) {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
const updateSettingMutation = useMutation({
|
||||||
|
mutationFn: ({ key, value }: { key: string; value: string }) => adminSettingsApi.updateSetting(key, value),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['admin-settings'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const resetSettingMutation = useMutation({
|
||||||
|
mutationFn: (key: string) => adminSettingsApi.resetSetting(key),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['admin-settings'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
if (settings.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="p-12 rounded-2xl bg-dark-800/30 border border-dark-700/30 text-center">
|
||||||
|
<div className="flex justify-center mb-4 text-dark-500">
|
||||||
|
<StarIcon filled={false} />
|
||||||
|
</div>
|
||||||
|
<p className="text-dark-400">{t('admin.settings.favoritesEmpty')}</p>
|
||||||
|
<p className="text-dark-500 text-sm mt-1">{t('admin.settings.favoritesHint')}</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||||
|
{settings.map((setting) => (
|
||||||
|
<SettingRow
|
||||||
|
key={setting.key}
|
||||||
|
setting={setting}
|
||||||
|
isFavorite={isFavorite(setting.key)}
|
||||||
|
onToggleFavorite={() => toggleFavorite(setting.key)}
|
||||||
|
onUpdate={(value) => updateSettingMutation.mutate({ key: setting.key, value })}
|
||||||
|
onReset={() => resetSettingMutation.mutate(setting.key)}
|
||||||
|
isUpdating={updateSettingMutation.isPending}
|
||||||
|
isResetting={resetSettingMutation.isPending}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,259 +0,0 @@
|
|||||||
import { useState, useCallback } from 'react'
|
|
||||||
|
|
||||||
interface SettingChoice {
|
|
||||||
value: string
|
|
||||||
label: string
|
|
||||||
description?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SettingDefinition {
|
|
||||||
key: string
|
|
||||||
name: string
|
|
||||||
description?: string
|
|
||||||
category: string
|
|
||||||
type: string
|
|
||||||
is_optional: boolean
|
|
||||||
current: string | number | boolean | null
|
|
||||||
original: string | number | boolean | null
|
|
||||||
has_override: boolean
|
|
||||||
read_only: boolean
|
|
||||||
choices?: SettingChoice[]
|
|
||||||
hint?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SettingCardProps {
|
|
||||||
setting: SettingDefinition
|
|
||||||
translatedName?: string
|
|
||||||
translatedDescription?: string
|
|
||||||
isFavorite: boolean
|
|
||||||
onToggleFavorite: () => void
|
|
||||||
onUpdate: (value: string) => void
|
|
||||||
onReset: () => void
|
|
||||||
disabled?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icons
|
|
||||||
const StarIcon = ({ filled }: { filled: boolean }) => (
|
|
||||||
<svg className="w-4 h-4" fill={filled ? 'currentColor' : 'none'} viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
|
|
||||||
const RefreshIcon = () => (
|
|
||||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
|
|
||||||
const LockIcon = () => (
|
|
||||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
|
|
||||||
const CheckIcon = () => (
|
|
||||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
|
|
||||||
const CloseIcon = () => (
|
|
||||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
|
|
||||||
export function SettingCard({
|
|
||||||
setting,
|
|
||||||
translatedName,
|
|
||||||
translatedDescription,
|
|
||||||
isFavorite,
|
|
||||||
onToggleFavorite,
|
|
||||||
onUpdate,
|
|
||||||
onReset,
|
|
||||||
disabled
|
|
||||||
}: SettingCardProps) {
|
|
||||||
const [isEditing, setIsEditing] = useState(false)
|
|
||||||
const [editValue, setEditValue] = useState('')
|
|
||||||
|
|
||||||
const displayName = translatedName || setting.name || setting.key
|
|
||||||
const displayDescription = translatedDescription || setting.description
|
|
||||||
|
|
||||||
const handleStartEdit = useCallback(() => {
|
|
||||||
if (setting.read_only) return
|
|
||||||
setEditValue(String(setting.current ?? ''))
|
|
||||||
setIsEditing(true)
|
|
||||||
}, [setting.current, setting.read_only])
|
|
||||||
|
|
||||||
const handleSave = useCallback(() => {
|
|
||||||
onUpdate(editValue)
|
|
||||||
setIsEditing(false)
|
|
||||||
}, [editValue, onUpdate])
|
|
||||||
|
|
||||||
const handleCancel = useCallback(() => {
|
|
||||||
setIsEditing(false)
|
|
||||||
setEditValue('')
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
handleSave()
|
|
||||||
} else if (e.key === 'Escape') {
|
|
||||||
handleCancel()
|
|
||||||
}
|
|
||||||
}, [handleSave, handleCancel])
|
|
||||||
|
|
||||||
const handleToggle = useCallback(() => {
|
|
||||||
if (setting.read_only) return
|
|
||||||
const newValue = setting.current === true || setting.current === 'true' ? 'false' : 'true'
|
|
||||||
onUpdate(newValue)
|
|
||||||
}, [setting.current, setting.read_only, onUpdate])
|
|
||||||
|
|
||||||
const handleSelectChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
||||||
onUpdate(e.target.value)
|
|
||||||
}, [onUpdate])
|
|
||||||
|
|
||||||
// Render input based on type
|
|
||||||
const renderInput = () => {
|
|
||||||
// Read-only display
|
|
||||||
if (setting.read_only) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2 text-dark-400">
|
|
||||||
<LockIcon />
|
|
||||||
<span className="font-mono text-sm">{String(setting.current ?? '-')}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Boolean toggle
|
|
||||||
if (setting.type === 'bool') {
|
|
||||||
const isChecked = setting.current === true || setting.current === 'true'
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
onClick={handleToggle}
|
|
||||||
disabled={disabled}
|
|
||||||
className={`relative w-12 h-6 rounded-full transition-colors ${
|
|
||||||
isChecked ? 'bg-accent-500' : 'bg-dark-600'
|
|
||||||
} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
|
||||||
>
|
|
||||||
<div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
|
|
||||||
isChecked ? 'left-7' : 'left-1'
|
|
||||||
}`} />
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Select dropdown
|
|
||||||
if (setting.choices && setting.choices.length > 0) {
|
|
||||||
return (
|
|
||||||
<select
|
|
||||||
value={String(setting.current ?? '')}
|
|
||||||
onChange={handleSelectChange}
|
|
||||||
disabled={disabled}
|
|
||||||
className="bg-dark-700 border border-dark-600 rounded-lg px-3 py-1.5 text-sm text-dark-100 focus:outline-none focus:border-accent-500 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{setting.choices.map(choice => (
|
|
||||||
<option key={choice.value} value={choice.value}>
|
|
||||||
{choice.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Text/number input
|
|
||||||
if (isEditing) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type={setting.type === 'int' || setting.type === 'float' ? 'number' : 'text'}
|
|
||||||
value={editValue}
|
|
||||||
onChange={e => setEditValue(e.target.value)}
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
autoFocus
|
|
||||||
className="bg-dark-700 border border-accent-500 rounded-lg px-3 py-1.5 text-sm text-dark-100 focus:outline-none w-40"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={handleSave}
|
|
||||||
className="p-1.5 rounded-lg bg-accent-500 text-white hover:bg-accent-600 transition-colors"
|
|
||||||
>
|
|
||||||
<CheckIcon />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleCancel}
|
|
||||||
className="p-1.5 rounded-lg bg-dark-600 text-dark-300 hover:bg-dark-500 transition-colors"
|
|
||||||
>
|
|
||||||
<CloseIcon />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
onClick={handleStartEdit}
|
|
||||||
disabled={disabled}
|
|
||||||
className="bg-dark-700 border border-dark-600 rounded-lg px-3 py-1.5 text-sm text-dark-200 hover:border-dark-500 hover:text-dark-100 transition-colors disabled:opacity-50 min-w-[100px] text-left font-mono"
|
|
||||||
>
|
|
||||||
{String(setting.current ?? '-')}
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`group p-4 rounded-xl bg-dark-800/50 border border-dark-700/50 hover:border-dark-600 transition-all ${
|
|
||||||
setting.has_override ? 'ring-1 ring-warning-500/30' : ''
|
|
||||||
}`}>
|
|
||||||
<div className="flex items-start justify-between gap-4">
|
|
||||||
{/* Left side - info */}
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center gap-2 mb-1">
|
|
||||||
<span className="font-medium text-dark-100 truncate">{displayName}</span>
|
|
||||||
{setting.has_override && (
|
|
||||||
<span className="px-1.5 py-0.5 text-xs rounded bg-warning-500/20 text-warning-400">
|
|
||||||
Изменено
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{displayDescription && (
|
|
||||||
<p className="text-sm text-dark-400 line-clamp-2">{displayDescription}</p>
|
|
||||||
)}
|
|
||||||
{setting.hint && (
|
|
||||||
<p className="text-xs text-warning-400 mt-1">{setting.hint}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right side - controls */}
|
|
||||||
<div className="flex items-center gap-2 flex-shrink-0">
|
|
||||||
{/* Favorite button */}
|
|
||||||
<button
|
|
||||||
onClick={onToggleFavorite}
|
|
||||||
className={`p-1.5 rounded-lg transition-colors ${
|
|
||||||
isFavorite
|
|
||||||
? 'text-warning-400 bg-warning-500/10'
|
|
||||||
: 'text-dark-500 hover:text-dark-300 opacity-0 group-hover:opacity-100'
|
|
||||||
}`}
|
|
||||||
title={isFavorite ? 'Убрать из избранного' : 'Добавить в избранное'}
|
|
||||||
>
|
|
||||||
<StarIcon filled={isFavorite} />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Input control */}
|
|
||||||
{renderInput()}
|
|
||||||
|
|
||||||
{/* Reset button */}
|
|
||||||
{setting.has_override && !setting.read_only && (
|
|
||||||
<button
|
|
||||||
onClick={onReset}
|
|
||||||
disabled={disabled}
|
|
||||||
className="p-1.5 rounded-lg text-dark-400 hover:text-dark-200 hover:bg-dark-700 transition-colors disabled:opacity-50"
|
|
||||||
title="Сбросить к значению по умолчанию"
|
|
||||||
>
|
|
||||||
<RefreshIcon />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
89
src/components/admin/SettingInput.tsx
Normal file
89
src/components/admin/SettingInput.tsx
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { SettingDefinition } from '../../api/adminSettings'
|
||||||
|
import { CheckIcon, CloseIcon } from './icons'
|
||||||
|
|
||||||
|
interface SettingInputProps {
|
||||||
|
setting: SettingDefinition
|
||||||
|
onUpdate: (value: string) => void
|
||||||
|
disabled?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SettingInput({ setting, onUpdate, disabled }: SettingInputProps) {
|
||||||
|
const [isEditing, setIsEditing] = useState(false)
|
||||||
|
const [value, setValue] = useState('')
|
||||||
|
|
||||||
|
const handleStart = () => {
|
||||||
|
setValue(String(setting.current ?? ''))
|
||||||
|
setIsEditing(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
onUpdate(value)
|
||||||
|
setIsEditing(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setIsEditing(false)
|
||||||
|
setValue('')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dropdown for choices
|
||||||
|
if (setting.choices && setting.choices.length > 0) {
|
||||||
|
return (
|
||||||
|
<select
|
||||||
|
value={String(setting.current ?? '')}
|
||||||
|
onChange={(e) => onUpdate(e.target.value)}
|
||||||
|
disabled={disabled}
|
||||||
|
className="bg-dark-700 border border-dark-600 rounded-lg px-3 py-1.5 text-sm text-dark-100 focus:outline-none focus:border-accent-500 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{setting.choices.map((choice, idx) => (
|
||||||
|
<option key={idx} value={String(choice.value)}>
|
||||||
|
{choice.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Editing mode
|
||||||
|
if (isEditing) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type={setting.type === 'int' || setting.type === 'float' ? 'number' : 'text'}
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => setValue(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') handleSave()
|
||||||
|
if (e.key === 'Escape') handleCancel()
|
||||||
|
}}
|
||||||
|
autoFocus
|
||||||
|
className="bg-dark-700 border border-accent-500 rounded-lg px-3 py-1.5 text-sm text-dark-100 focus:outline-none w-32"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
className="p-1.5 rounded-lg bg-accent-500 text-white hover:bg-accent-600 transition-colors"
|
||||||
|
>
|
||||||
|
<CheckIcon />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleCancel}
|
||||||
|
className="p-1.5 rounded-lg bg-dark-600 text-dark-300 hover:bg-dark-500 transition-colors"
|
||||||
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Display mode
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={handleStart}
|
||||||
|
disabled={disabled}
|
||||||
|
className="bg-dark-700 border border-dark-600 rounded-lg px-3 py-1.5 text-sm text-dark-200 hover:border-dark-500 transition-colors disabled:opacity-50 min-w-[80px] text-left font-mono truncate max-w-[150px]"
|
||||||
|
>
|
||||||
|
{String(setting.current ?? '-')}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
104
src/components/admin/SettingRow.tsx
Normal file
104
src/components/admin/SettingRow.tsx
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { SettingDefinition } from '../../api/adminSettings'
|
||||||
|
import { StarIcon, LockIcon, RefreshIcon } from './icons'
|
||||||
|
import { SettingInput } from './SettingInput'
|
||||||
|
import { Toggle } from './Toggle'
|
||||||
|
import { formatSettingKey, stripHtml } from './utils'
|
||||||
|
|
||||||
|
interface SettingRowProps {
|
||||||
|
setting: SettingDefinition
|
||||||
|
isFavorite: boolean
|
||||||
|
onToggleFavorite: () => void
|
||||||
|
onUpdate: (value: string) => void
|
||||||
|
onReset: () => void
|
||||||
|
isUpdating?: boolean
|
||||||
|
isResetting?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SettingRow({
|
||||||
|
setting,
|
||||||
|
isFavorite,
|
||||||
|
onToggleFavorite,
|
||||||
|
onUpdate,
|
||||||
|
onReset,
|
||||||
|
isUpdating,
|
||||||
|
isResetting
|
||||||
|
}: SettingRowProps) {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const formattedKey = formatSettingKey(setting.name || setting.key)
|
||||||
|
const displayName = t(`admin.settings.settingNames.${formattedKey}`, formattedKey)
|
||||||
|
const description = setting.hint?.description ? stripHtml(setting.hint.description) : null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="group p-4 rounded-xl bg-dark-800/30 border border-dark-700/30 hover:border-dark-600/50 transition-all">
|
||||||
|
{/* Top row - name and badge */}
|
||||||
|
<div className="flex items-start justify-between gap-3 mb-2">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
<span className="font-medium text-dark-100">{displayName}</span>
|
||||||
|
{setting.has_override && (
|
||||||
|
<span className="px-1.5 py-0.5 text-xs rounded bg-warning-500/20 text-warning-400">
|
||||||
|
{t('admin.settings.modified')}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{description && (
|
||||||
|
<p className="text-sm text-dark-400 mt-1 line-clamp-2">{description}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Favorite button */}
|
||||||
|
<button
|
||||||
|
onClick={onToggleFavorite}
|
||||||
|
className={`p-1.5 rounded-lg transition-all flex-shrink-0 ${
|
||||||
|
isFavorite
|
||||||
|
? 'text-warning-400 bg-warning-500/10'
|
||||||
|
: 'text-dark-500 hover:text-dark-300 opacity-0 group-hover:opacity-100'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<StarIcon filled={isFavorite} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom row - control */}
|
||||||
|
<div className="flex items-center justify-between gap-3 mt-3 pt-3 border-t border-dark-700/30">
|
||||||
|
<span className="text-xs text-dark-500 font-mono truncate max-w-[200px]">{setting.key}</span>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 flex-shrink-0">
|
||||||
|
{/* Setting control */}
|
||||||
|
{setting.read_only ? (
|
||||||
|
<div className="flex items-center gap-2 text-dark-400">
|
||||||
|
<LockIcon />
|
||||||
|
<span className="font-mono text-sm max-w-[150px] truncate">{String(setting.current ?? '-')}</span>
|
||||||
|
</div>
|
||||||
|
) : setting.type === 'bool' ? (
|
||||||
|
<Toggle
|
||||||
|
checked={setting.current === true || setting.current === 'true'}
|
||||||
|
onChange={() => onUpdate(setting.current === true || setting.current === 'true' ? 'false' : 'true')}
|
||||||
|
disabled={isUpdating}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<SettingInput
|
||||||
|
setting={setting}
|
||||||
|
onUpdate={onUpdate}
|
||||||
|
disabled={isUpdating}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Reset button */}
|
||||||
|
{setting.has_override && !setting.read_only && (
|
||||||
|
<button
|
||||||
|
onClick={onReset}
|
||||||
|
disabled={isResetting}
|
||||||
|
className="p-1.5 rounded-lg text-dark-400 hover:text-dark-200 hover:bg-dark-700 transition-colors"
|
||||||
|
title={t('admin.settings.reset')}
|
||||||
|
>
|
||||||
|
<RefreshIcon />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
144
src/components/admin/SettingsTab.tsx
Normal file
144
src/components/admin/SettingsTab.tsx
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||||
|
import { SettingDefinition, adminSettingsApi } from '../../api/adminSettings'
|
||||||
|
import { ChevronDownIcon } from './icons'
|
||||||
|
import { SettingRow } from './SettingRow'
|
||||||
|
|
||||||
|
interface CategoryGroup {
|
||||||
|
key: string
|
||||||
|
label: string
|
||||||
|
settings: SettingDefinition[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SettingsTabProps {
|
||||||
|
categories: CategoryGroup[]
|
||||||
|
searchQuery: string
|
||||||
|
filteredSettings: SettingDefinition[]
|
||||||
|
isFavorite: (key: string) => boolean
|
||||||
|
toggleFavorite: (key: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SettingsTab({
|
||||||
|
categories,
|
||||||
|
searchQuery,
|
||||||
|
filteredSettings,
|
||||||
|
isFavorite,
|
||||||
|
toggleFavorite
|
||||||
|
}: SettingsTabProps) {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set())
|
||||||
|
|
||||||
|
const toggleSection = (key: string) => {
|
||||||
|
setExpandedSections(prev => {
|
||||||
|
const next = new Set(prev)
|
||||||
|
if (next.has(key)) {
|
||||||
|
next.delete(key)
|
||||||
|
} else {
|
||||||
|
next.add(key)
|
||||||
|
}
|
||||||
|
return next
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateSettingMutation = useMutation({
|
||||||
|
mutationFn: ({ key, value }: { key: string; value: string }) => adminSettingsApi.updateSetting(key, value),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['admin-settings'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const resetSettingMutation = useMutation({
|
||||||
|
mutationFn: (key: string) => adminSettingsApi.resetSetting(key),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['admin-settings'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// If searching, show flat list
|
||||||
|
if (searchQuery) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{filteredSettings.length === 0 ? (
|
||||||
|
<div className="p-12 rounded-2xl bg-dark-800/30 border border-dark-700/30 text-center">
|
||||||
|
<p className="text-dark-400">{t('admin.settings.noSettings')}</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||||
|
{filteredSettings.map((setting) => (
|
||||||
|
<SettingRow
|
||||||
|
key={setting.key}
|
||||||
|
setting={setting}
|
||||||
|
isFavorite={isFavorite(setting.key)}
|
||||||
|
onToggleFavorite={() => toggleFavorite(setting.key)}
|
||||||
|
onUpdate={(value) => updateSettingMutation.mutate({ key: setting.key, value })}
|
||||||
|
onReset={() => resetSettingMutation.mutate(setting.key)}
|
||||||
|
isUpdating={updateSettingMutation.isPending}
|
||||||
|
isResetting={resetSettingMutation.isPending}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show accordion for subcategories
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{categories.map((cat) => {
|
||||||
|
const isExpanded = expandedSections.has(cat.key)
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={cat.key}
|
||||||
|
className="rounded-2xl bg-dark-800/30 border border-dark-700/30 overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Accordion header */}
|
||||||
|
<button
|
||||||
|
onClick={() => toggleSection(cat.key)}
|
||||||
|
className="w-full flex items-center justify-between p-4 hover:bg-dark-800/50 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="font-medium text-dark-100">{cat.label}</span>
|
||||||
|
<span className="px-2 py-0.5 text-xs rounded-full bg-dark-700 text-dark-400">
|
||||||
|
{cat.settings.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={`transition-transform duration-200 text-dark-400 ${isExpanded ? 'rotate-180' : ''}`}>
|
||||||
|
<ChevronDownIcon />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Accordion content */}
|
||||||
|
{isExpanded && (
|
||||||
|
<div className="p-4 pt-0 border-t border-dark-700/30">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 pt-4">
|
||||||
|
{cat.settings.map((setting) => (
|
||||||
|
<SettingRow
|
||||||
|
key={setting.key}
|
||||||
|
setting={setting}
|
||||||
|
isFavorite={isFavorite(setting.key)}
|
||||||
|
onToggleFavorite={() => toggleFavorite(setting.key)}
|
||||||
|
onUpdate={(value) => updateSettingMutation.mutate({ key: setting.key, value })}
|
||||||
|
onReset={() => resetSettingMutation.mutate(setting.key)}
|
||||||
|
isUpdating={updateSettingMutation.isPending}
|
||||||
|
isResetting={resetSettingMutation.isPending}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{categories.length === 0 && (
|
||||||
|
<div className="p-12 rounded-2xl bg-dark-800/30 border border-dark-700/30 text-center">
|
||||||
|
<p className="text-dark-400">{t('admin.settings.noSettings')}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
277
src/components/admin/ThemeTab.tsx
Normal file
277
src/components/admin/ThemeTab.tsx
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||||
|
import { themeColorsApi } from '../../api/themeColors'
|
||||||
|
import { DEFAULT_THEME_COLORS } from '../../types/theme'
|
||||||
|
import { ColorPicker } from '../ColorPicker'
|
||||||
|
import { applyThemeColors } from '../../hooks/useThemeColors'
|
||||||
|
import { updateEnabledThemesCache } from '../../hooks/useTheme'
|
||||||
|
import { MoonIcon, SunIcon, ChevronDownIcon } from './icons'
|
||||||
|
import { Toggle } from './Toggle'
|
||||||
|
import { THEME_PRESETS } from './constants'
|
||||||
|
|
||||||
|
export function ThemeTab() {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set(['presets']))
|
||||||
|
|
||||||
|
const toggleSection = (section: string) => {
|
||||||
|
setExpandedSections(prev => {
|
||||||
|
const next = new Set(prev)
|
||||||
|
if (next.has(section)) {
|
||||||
|
next.delete(section)
|
||||||
|
} else {
|
||||||
|
next.add(section)
|
||||||
|
}
|
||||||
|
return next
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Queries
|
||||||
|
const { data: themeColors } = useQuery({
|
||||||
|
queryKey: ['theme-colors'],
|
||||||
|
queryFn: themeColorsApi.getColors,
|
||||||
|
})
|
||||||
|
|
||||||
|
const { data: enabledThemes } = useQuery({
|
||||||
|
queryKey: ['enabled-themes'],
|
||||||
|
queryFn: themeColorsApi.getEnabledThemes,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Mutations
|
||||||
|
const updateColorsMutation = useMutation({
|
||||||
|
mutationFn: themeColorsApi.updateColors,
|
||||||
|
onSuccess: (data) => {
|
||||||
|
applyThemeColors(data)
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['theme-colors'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const resetColorsMutation = useMutation({
|
||||||
|
mutationFn: themeColorsApi.resetColors,
|
||||||
|
onSuccess: (data) => {
|
||||||
|
applyThemeColors(data)
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['theme-colors'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const updateEnabledThemesMutation = useMutation({
|
||||||
|
mutationFn: themeColorsApi.updateEnabledThemes,
|
||||||
|
onSuccess: (data) => {
|
||||||
|
updateEnabledThemesCache(data)
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['enabled-themes'] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Theme toggles */}
|
||||||
|
<div className="p-6 rounded-2xl bg-dark-800/50 border border-dark-700/50">
|
||||||
|
<h3 className="text-lg font-semibold text-dark-100 mb-4">{t('admin.settings.availableThemes')}</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="flex items-center justify-between p-4 rounded-xl bg-dark-700/30">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<MoonIcon />
|
||||||
|
<span className="font-medium text-dark-200">{t('admin.settings.darkTheme')}</span>
|
||||||
|
</div>
|
||||||
|
<Toggle
|
||||||
|
checked={enabledThemes?.dark ?? true}
|
||||||
|
onChange={() => {
|
||||||
|
if ((enabledThemes?.dark ?? true) && !(enabledThemes?.light ?? true)) return
|
||||||
|
updateEnabledThemesMutation.mutate({ dark: !(enabledThemes?.dark ?? true) })
|
||||||
|
}}
|
||||||
|
disabled={updateEnabledThemesMutation.isPending}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between p-4 rounded-xl bg-dark-700/30">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<SunIcon />
|
||||||
|
<span className="font-medium text-dark-200">{t('admin.settings.lightTheme')}</span>
|
||||||
|
</div>
|
||||||
|
<Toggle
|
||||||
|
checked={enabledThemes?.light ?? true}
|
||||||
|
onChange={() => {
|
||||||
|
if ((enabledThemes?.light ?? true) && !(enabledThemes?.dark ?? true)) return
|
||||||
|
updateEnabledThemesMutation.mutate({ light: !(enabledThemes?.light ?? true) })
|
||||||
|
}}
|
||||||
|
disabled={updateEnabledThemesMutation.isPending}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Presets */}
|
||||||
|
<div className="p-6 rounded-2xl bg-dark-800/50 border border-dark-700/50">
|
||||||
|
<button
|
||||||
|
onClick={() => toggleSection('presets')}
|
||||||
|
className="w-full flex items-center justify-between"
|
||||||
|
>
|
||||||
|
<h3 className="text-lg font-semibold text-dark-100">{t('admin.settings.quickPresets')}</h3>
|
||||||
|
<div className={`transition-transform ${expandedSections.has('presets') ? 'rotate-180' : ''}`}>
|
||||||
|
<ChevronDownIcon />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{expandedSections.has('presets') && (
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-4">
|
||||||
|
{THEME_PRESETS.map((preset) => (
|
||||||
|
<button
|
||||||
|
key={preset.id}
|
||||||
|
onClick={() => updateColorsMutation.mutate(preset.colors)}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
className="p-3 rounded-xl border border-dark-600 hover:border-dark-500 transition-all hover:scale-[1.02]"
|
||||||
|
style={{ backgroundColor: preset.colors.darkBackground }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<div
|
||||||
|
className="w-4 h-4 rounded-full ring-2 ring-white/20"
|
||||||
|
style={{ backgroundColor: preset.colors.accent }}
|
||||||
|
/>
|
||||||
|
<span className="text-xs font-medium" style={{ color: preset.colors.darkText }}>
|
||||||
|
{t(`admin.settings.presets.${preset.id}`)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
<div className="w-3 h-3 rounded" style={{ backgroundColor: preset.colors.success }} />
|
||||||
|
<div className="w-3 h-3 rounded" style={{ backgroundColor: preset.colors.warning }} />
|
||||||
|
<div className="w-3 h-3 rounded" style={{ backgroundColor: preset.colors.error }} />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Custom Colors */}
|
||||||
|
<div className="p-6 rounded-2xl bg-dark-800/50 border border-dark-700/50">
|
||||||
|
<button
|
||||||
|
onClick={() => toggleSection('colors')}
|
||||||
|
className="w-full flex items-center justify-between"
|
||||||
|
>
|
||||||
|
<h3 className="text-lg font-semibold text-dark-100">{t('admin.settings.customColors')}</h3>
|
||||||
|
<div className={`transition-transform ${expandedSections.has('colors') ? 'rotate-180' : ''}`}>
|
||||||
|
<ChevronDownIcon />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{expandedSections.has('colors') && (
|
||||||
|
<div className="mt-4 space-y-6">
|
||||||
|
{/* Accent */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-medium text-dark-300 mb-3">{t('admin.settings.accentColor')}</h4>
|
||||||
|
<ColorPicker
|
||||||
|
label={t('theme.accent')}
|
||||||
|
value={themeColors?.accent || DEFAULT_THEME_COLORS.accent}
|
||||||
|
onChange={(color) => updateColorsMutation.mutate({ accent: color })}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dark theme */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-medium text-dark-300 mb-3 flex items-center gap-2">
|
||||||
|
<MoonIcon /> {t('admin.settings.darkTheme')}
|
||||||
|
</h4>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<ColorPicker
|
||||||
|
label={t('admin.settings.colors.background')}
|
||||||
|
value={themeColors?.darkBackground || DEFAULT_THEME_COLORS.darkBackground}
|
||||||
|
onChange={(color) => updateColorsMutation.mutate({ darkBackground: color })}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
/>
|
||||||
|
<ColorPicker
|
||||||
|
label={t('admin.settings.colors.surface')}
|
||||||
|
value={themeColors?.darkSurface || DEFAULT_THEME_COLORS.darkSurface}
|
||||||
|
onChange={(color) => updateColorsMutation.mutate({ darkSurface: color })}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
/>
|
||||||
|
<ColorPicker
|
||||||
|
label={t('admin.settings.colors.text')}
|
||||||
|
value={themeColors?.darkText || DEFAULT_THEME_COLORS.darkText}
|
||||||
|
onChange={(color) => updateColorsMutation.mutate({ darkText: color })}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
/>
|
||||||
|
<ColorPicker
|
||||||
|
label={t('admin.settings.colors.textSecondary')}
|
||||||
|
value={themeColors?.darkTextSecondary || DEFAULT_THEME_COLORS.darkTextSecondary}
|
||||||
|
onChange={(color) => updateColorsMutation.mutate({ darkTextSecondary: color })}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Light theme */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-medium text-dark-300 mb-3 flex items-center gap-2">
|
||||||
|
<SunIcon /> {t('admin.settings.lightTheme')}
|
||||||
|
</h4>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<ColorPicker
|
||||||
|
label={t('admin.settings.colors.background')}
|
||||||
|
value={themeColors?.lightBackground || DEFAULT_THEME_COLORS.lightBackground}
|
||||||
|
onChange={(color) => updateColorsMutation.mutate({ lightBackground: color })}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
/>
|
||||||
|
<ColorPicker
|
||||||
|
label={t('admin.settings.colors.surface')}
|
||||||
|
value={themeColors?.lightSurface || DEFAULT_THEME_COLORS.lightSurface}
|
||||||
|
onChange={(color) => updateColorsMutation.mutate({ lightSurface: color })}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
/>
|
||||||
|
<ColorPicker
|
||||||
|
label={t('admin.settings.colors.text')}
|
||||||
|
value={themeColors?.lightText || DEFAULT_THEME_COLORS.lightText}
|
||||||
|
onChange={(color) => updateColorsMutation.mutate({ lightText: color })}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
/>
|
||||||
|
<ColorPicker
|
||||||
|
label={t('admin.settings.colors.textSecondary')}
|
||||||
|
value={themeColors?.lightTextSecondary || DEFAULT_THEME_COLORS.lightTextSecondary}
|
||||||
|
onChange={(color) => updateColorsMutation.mutate({ lightTextSecondary: color })}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status colors */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-medium text-dark-300 mb-3">{t('admin.settings.statusColors')}</h4>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||||
|
<ColorPicker
|
||||||
|
label={t('admin.settings.colors.success')}
|
||||||
|
value={themeColors?.success || DEFAULT_THEME_COLORS.success}
|
||||||
|
onChange={(color) => updateColorsMutation.mutate({ success: color })}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
/>
|
||||||
|
<ColorPicker
|
||||||
|
label={t('admin.settings.colors.warning')}
|
||||||
|
value={themeColors?.warning || DEFAULT_THEME_COLORS.warning}
|
||||||
|
onChange={(color) => updateColorsMutation.mutate({ warning: color })}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
/>
|
||||||
|
<ColorPicker
|
||||||
|
label={t('admin.settings.colors.error')}
|
||||||
|
value={themeColors?.error || DEFAULT_THEME_COLORS.error}
|
||||||
|
onChange={(color) => updateColorsMutation.mutate({ error: color })}
|
||||||
|
disabled={updateColorsMutation.isPending}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reset button */}
|
||||||
|
<button
|
||||||
|
onClick={() => resetColorsMutation.mutate()}
|
||||||
|
disabled={resetColorsMutation.isPending}
|
||||||
|
className="px-4 py-2 rounded-xl bg-dark-700 text-dark-300 hover:bg-dark-600 transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{t('admin.settings.resetAllColors')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
21
src/components/admin/Toggle.tsx
Normal file
21
src/components/admin/Toggle.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
interface ToggleProps {
|
||||||
|
checked: boolean
|
||||||
|
onChange: () => void
|
||||||
|
disabled?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Toggle({ checked, onChange, disabled }: ToggleProps) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={onChange}
|
||||||
|
disabled={disabled}
|
||||||
|
className={`relative w-12 h-6 rounded-full transition-colors ${
|
||||||
|
checked ? 'bg-accent-500' : 'bg-dark-600'
|
||||||
|
} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
||||||
|
>
|
||||||
|
<div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
|
||||||
|
checked ? 'left-7' : 'left-1'
|
||||||
|
}`} />
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
55
src/components/admin/constants.ts
Normal file
55
src/components/admin/constants.ts
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
import { ThemeColors, DEFAULT_THEME_COLORS } from '../../types/theme'
|
||||||
|
|
||||||
|
// Menu item types
|
||||||
|
export interface MenuItem {
|
||||||
|
id: string
|
||||||
|
iconType?: 'star' | null
|
||||||
|
categories?: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MenuSection {
|
||||||
|
id: string
|
||||||
|
items: MenuItem[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sidebar menu configuration
|
||||||
|
export const MENU_SECTIONS: MenuSection[] = [
|
||||||
|
{
|
||||||
|
id: 'main',
|
||||||
|
items: [
|
||||||
|
{ id: 'favorites', iconType: 'star' },
|
||||||
|
{ id: 'branding', iconType: null },
|
||||||
|
{ id: 'theme', iconType: null },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'settings',
|
||||||
|
items: [
|
||||||
|
{ id: 'payments', iconType: null, categories: ['PAYMENT', 'PAYMENT_VERIFICATION', 'YOOKASSA', 'CRYPTOBOT', 'HELEKET', 'PLATEGA', 'TRIBUTE', 'MULENPAY', 'PAL24', 'WATA', 'TELEGRAM'] },
|
||||||
|
{ id: 'subscriptions', iconType: null, categories: ['SUBSCRIPTIONS_CORE', 'SIMPLE_SUBSCRIPTION', 'PERIODS', 'SUBSCRIPTION_PRICES', 'TRAFFIC', 'TRAFFIC_PACKAGES', 'TRIAL', 'AUTOPAY'] },
|
||||||
|
{ id: 'interface', iconType: null, categories: ['INTERFACE', 'INTERFACE_BRANDING', 'INTERFACE_SUBSCRIPTION', 'CONNECT_BUTTON', 'MINIAPP', 'HAPP', 'SKIP', 'ADDITIONAL'] },
|
||||||
|
{ id: 'notifications', iconType: null, categories: ['NOTIFICATIONS', 'ADMIN_NOTIFICATIONS', 'ADMIN_REPORTS'] },
|
||||||
|
{ id: 'database', iconType: null, categories: ['DATABASE', 'POSTGRES', 'SQLITE', 'REDIS'] },
|
||||||
|
{ id: 'system', iconType: null, categories: ['CORE', 'REMNAWAVE', 'SERVER_STATUS', 'MONITORING', 'MAINTENANCE', 'BACKUP', 'VERSION', 'WEB_API', 'WEBHOOK', 'LOG', 'DEBUG', 'EXTERNAL_ADMIN'] },
|
||||||
|
{ id: 'users', iconType: null, categories: ['SUPPORT', 'LOCALIZATION', 'CHANNEL', 'TIMEZONE', 'REFERRAL', 'MODERATION'] },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// Theme preset type
|
||||||
|
export interface ThemePreset {
|
||||||
|
id: string
|
||||||
|
colors: ThemeColors
|
||||||
|
}
|
||||||
|
|
||||||
|
// Theme presets
|
||||||
|
export const THEME_PRESETS: ThemePreset[] = [
|
||||||
|
{ id: 'standard', colors: DEFAULT_THEME_COLORS },
|
||||||
|
{ id: 'ocean', colors: { accent: '#0ea5e9', darkBackground: '#0c1222', darkSurface: '#1e293b', darkText: '#f1f5f9', darkTextSecondary: '#94a3b8', lightBackground: '#e0f2fe', lightSurface: '#f0f9ff', lightText: '#0c4a6e', lightTextSecondary: '#0369a1', success: '#22c55e', warning: '#f59e0b', error: '#ef4444' } },
|
||||||
|
{ id: 'forest', colors: { accent: '#22c55e', darkBackground: '#0a1a0f', darkSurface: '#14532d', darkText: '#f0fdf4', darkTextSecondary: '#86efac', lightBackground: '#dcfce7', lightSurface: '#f0fdf4', lightText: '#14532d', lightTextSecondary: '#166534', success: '#22c55e', warning: '#f59e0b', error: '#ef4444' } },
|
||||||
|
{ id: 'sunset', colors: { accent: '#f97316', darkBackground: '#1c1009', darkSurface: '#2d1a0e', darkText: '#fff7ed', darkTextSecondary: '#fdba74', lightBackground: '#ffedd5', lightSurface: '#fff7ed', lightText: '#7c2d12', lightTextSecondary: '#c2410c', success: '#22c55e', warning: '#f59e0b', error: '#ef4444' } },
|
||||||
|
{ id: 'violet', colors: { accent: '#a855f7', darkBackground: '#0f0a1a', darkSurface: '#1e1b2e', darkText: '#faf5ff', darkTextSecondary: '#c4b5fd', lightBackground: '#f3e8ff', lightSurface: '#faf5ff', lightText: '#581c87', lightTextSecondary: '#7e22ce', success: '#22c55e', warning: '#f59e0b', error: '#ef4444' } },
|
||||||
|
{ id: 'rose', colors: { accent: '#f43f5e', darkBackground: '#1a0a10', darkSurface: '#2d1520', darkText: '#fff1f2', darkTextSecondary: '#fda4af', lightBackground: '#ffe4e6', lightSurface: '#fff1f2', lightText: '#881337', lightTextSecondary: '#be123c', success: '#22c55e', warning: '#f59e0b', error: '#ef4444' } },
|
||||||
|
{ id: 'midnight', colors: { accent: '#6366f1', darkBackground: '#030712', darkSurface: '#111827', darkText: '#f9fafb', darkTextSecondary: '#9ca3af', lightBackground: '#e5e7eb', lightSurface: '#f3f4f6', lightText: '#111827', lightTextSecondary: '#4b5563', success: '#22c55e', warning: '#f59e0b', error: '#ef4444' } },
|
||||||
|
{ id: 'turquoise', colors: { accent: '#14b8a6', darkBackground: '#0a1614', darkSurface: '#134e4a', darkText: '#f0fdfa', darkTextSecondary: '#5eead4', lightBackground: '#ccfbf1', lightSurface: '#f0fdfa', lightText: '#134e4a', lightTextSecondary: '#0f766e', success: '#22c55e', warning: '#f59e0b', error: '#ef4444' } },
|
||||||
|
]
|
||||||
85
src/components/admin/icons.tsx
Normal file
85
src/components/admin/icons.tsx
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
// Admin Settings Icons
|
||||||
|
|
||||||
|
export const BackIcon = () => (
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const SearchIcon = () => (
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const StarIcon = ({ filled }: { filled?: boolean }) => (
|
||||||
|
<svg className="w-5 h-5" fill={filled ? 'currentColor' : 'none'} viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const ChevronDownIcon = () => (
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const UploadIcon = () => (
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const TrashIcon = () => (
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const PencilIcon = () => (
|
||||||
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const RefreshIcon = () => (
|
||||||
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const LockIcon = () => (
|
||||||
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const CheckIcon = () => (
|
||||||
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const CloseIcon = () => (
|
||||||
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const SunIcon = () => (
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const MoonIcon = () => (
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
export const MenuIcon = () => (
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
13
src/components/admin/index.ts
Normal file
13
src/components/admin/index.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
// Components
|
||||||
|
export * from './icons'
|
||||||
|
export * from './Toggle'
|
||||||
|
export * from './SettingInput'
|
||||||
|
export * from './SettingRow'
|
||||||
|
export * from './BrandingTab'
|
||||||
|
export * from './ThemeTab'
|
||||||
|
export * from './FavoritesTab'
|
||||||
|
export * from './SettingsTab'
|
||||||
|
|
||||||
|
// Constants and utils
|
||||||
|
export * from './constants'
|
||||||
|
export * from './utils'
|
||||||
35
src/components/admin/utils.ts
Normal file
35
src/components/admin/utils.ts
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
// Format setting key from Snake_Case / CamelCase to readable text
|
||||||
|
export function formatSettingKey(name: string): string {
|
||||||
|
if (!name) return ''
|
||||||
|
|
||||||
|
return name
|
||||||
|
// CamelCase -> spaces
|
||||||
|
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
||||||
|
// snake_case -> spaces
|
||||||
|
.replace(/_/g, ' ')
|
||||||
|
// Remove extra spaces
|
||||||
|
.replace(/\s+/g, ' ')
|
||||||
|
.trim()
|
||||||
|
// Capitalize first letter
|
||||||
|
.replace(/^./, c => c.toUpperCase())
|
||||||
|
}
|
||||||
|
|
||||||
|
// Strip HTML tags and template descriptions from setting descriptions
|
||||||
|
export function stripHtml(html: string): string {
|
||||||
|
if (!html) return ''
|
||||||
|
let cleaned = html
|
||||||
|
.replace(/<[^>]*>/g, '')
|
||||||
|
.replace(/ /g, ' ')
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.trim()
|
||||||
|
|
||||||
|
// Remove template descriptions like "Параметр X управляет категорией Y"
|
||||||
|
if (cleaned.match(/^Параметр .+ управляет категорией/)) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
return cleaned
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user