etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-29 18:13:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

bento-grids v0.1

Browse Source
This commit is contained in:
kinvsh
2026-01-21 00:58:24 +05:00
parent 20edc7f63a
commit 11fd2876b2
6 changed files with 853 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/pages/AdminSettings.tsx
View File

@@ -7,8 +7,8 @@ import { brandingApi, setCachedBranding } from '../api/branding'
import { setCachedAnimationEnabled } from '../components/AnimatedBackground'
import { setCachedFullscreenEnabled } from '../hooks/useTelegramWebApp'
import { themeColorsApi } from '../api/themeColors'
import { DEFAULT_THEME_COLORS, DEFAULT_ENABLED_THEMES } from '../types/theme'
import { ColorPicker } from '../components/ColorPicker'
import { DEFAULT_THEME_COLORS, DEFAULT_ENABLED_THEMES, ThemeColors } from '../types/theme'
import { ThemeBentoPicker } from '../components/ThemeBentoPicker'
import { applyThemeColors } from '../hooks/useThemeColors'
import { updateEnabledThemesCache } from '../hooks/useTheme'
@@ -858,6 +858,7 @@ export default function AdminSettings() {
const [searchQuery, setSearchQuery] = useState('')
const [editingName, setEditingName] = useState(false)
const [newName, setNewName] = useState('')
const [localColors, setLocalColors] = useState<ThemeColors | null>(null)
const fileInputRef = useRef<HTMLInputElement>(null)
// Branding query and mutations
@@ -1355,113 +1356,18 @@ export default function AdminSettings() {
Включите нужные темы для пользователей. Минимум одна тема должна быть активна.
</p>
</div>
{/* Accent Color */}
<ColorPicker
label={t('theme.accent')}
description={t('theme.accentDescription')}
value={themeColors?.accent || DEFAULT_THEME_COLORS.accent}
onChange={(color) => updateColorsMutation.mutate({ accent: color })}
disabled={updateColorsMutation.isPending}
<ThemeBentoPicker
currentColors={localColors || themeColors || DEFAULT_THEME_COLORS}
onColorsChange={(colors) => setLocalColors(colors)}
onSave={() => {
if (localColors) {
updateColorsMutation.mutate(localColors)
setLocalColors(null)
}
}}
isSaving={updateColorsMutation.isPending}
/>
{/* Dark Theme Section */}
<div>
<h3 className="text-sm font-medium text-dark-300 mb-3">{t('theme.darkTheme')}</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<ColorPicker
label={t('theme.background')}
value={themeColors?.darkBackground || DEFAULT_THEME_COLORS.darkBackground}
onChange={(color) => updateColorsMutation.mutate({ darkBackground: color })}
disabled={updateColorsMutation.isPending}
/>
<ColorPicker
label={t('theme.surface')}
value={themeColors?.darkSurface || DEFAULT_THEME_COLORS.darkSurface}
onChange={(color) => updateColorsMutation.mutate({ darkSurface: color })}
disabled={updateColorsMutation.isPending}
/>
<ColorPicker
label={t('theme.text')}
value={themeColors?.darkText || DEFAULT_THEME_COLORS.darkText}
onChange={(color) => updateColorsMutation.mutate({ darkText: color })}
disabled={updateColorsMutation.isPending}
/>
<ColorPicker
label={t('theme.textSecondary')}
value={themeColors?.darkTextSecondary || DEFAULT_THEME_COLORS.darkTextSecondary}
onChange={(color) => updateColorsMutation.mutate({ darkTextSecondary: color })}
disabled={updateColorsMutation.isPending}
/>
</div>
</div>
{/* Light Theme Section */}
<div>
<h3 className="text-sm font-medium text-dark-300 mb-3">{t('theme.lightTheme')}</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<ColorPicker
label={t('theme.background')}
value={themeColors?.lightBackground || DEFAULT_THEME_COLORS.lightBackground}
onChange={(color) => updateColorsMutation.mutate({ lightBackground: color })}
disabled={updateColorsMutation.isPending}
/>
<ColorPicker
label={t('theme.surface')}
value={themeColors?.lightSurface || DEFAULT_THEME_COLORS.lightSurface}
onChange={(color) => updateColorsMutation.mutate({ lightSurface: color })}
disabled={updateColorsMutation.isPending}
/>
<ColorPicker
label={t('theme.text')}
value={themeColors?.lightText || DEFAULT_THEME_COLORS.lightText}
onChange={(color) => updateColorsMutation.mutate({ lightText: color })}
disabled={updateColorsMutation.isPending}
/>
<ColorPicker
label={t('theme.textSecondary')}
value={themeColors?.lightTextSecondary || DEFAULT_THEME_COLORS.lightTextSecondary}
onChange={(color) => updateColorsMutation.mutate({ lightTextSecondary: color })}
disabled={updateColorsMutation.isPending}
/>
</div>
</div>
{/* Status Colors */}
<div>
<h3 className="text-sm font-medium text-dark-300 mb-3">{t('theme.statusColors')}</h3>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<ColorPicker
label={t('theme.success')}
value={themeColors?.success || DEFAULT_THEME_COLORS.success}
onChange={(color) => updateColorsMutation.mutate({ success: color })}
disabled={updateColorsMutation.isPending}
/>
<ColorPicker
label={t('theme.warning')}
value={themeColors?.warning || DEFAULT_THEME_COLORS.warning}
onChange={(color) => updateColorsMutation.mutate({ warning: color })}
disabled={updateColorsMutation.isPending}
/>
<ColorPicker
label={t('theme.error')}
value={themeColors?.error || DEFAULT_THEME_COLORS.error}
onChange={(color) => updateColorsMutation.mutate({ error: color })}
disabled={updateColorsMutation.isPending}
/>
</div>
</div>
{/* Preview */}
<div className="p-4 bg-dark-800/50 rounded-xl">
<h4 className="text-sm font-medium text-dark-300 mb-3">{t('theme.preview')}</h4>
<div className="flex flex-wrap gap-2">
<button className="btn-primary text-sm">{t('theme.previewButton')}</button>
<button className="btn-secondary text-sm">{t('theme.previewSecondary')}</button>
<span className="badge-success">{t('theme.success')}</span>
<span className="badge-warning">{t('theme.warning')}</span>
<span className="badge-error">{t('theme.error')}</span>
</div>
</div>
</div>
</div>