feat: redesign fortune wheel UI and add to mobile nav

- Add wheel button to mobile bottom nav (replaces Support when enabled)
- Slow down LED lights animation (250ms -> 600ms)
- Replace result modal with inline card in Wheel.tsx
- Add haptic feedback on spin result
- AdminWheel.tsx: inline prize editing instead of modal
- AdminWheel.tsx: drag-and-drop for prize reordering
- AdminWheel.tsx: live wheel preview on desktop
- AdminWheel.tsx: group settings into sections
- Replace confirm() with native dialog
- Add translations for all languages
This commit is contained in:
c0mrade
2026-02-02 17:51:46 +03:00
parent e9af285dad
commit 7e2802c5b5
9 changed files with 740 additions and 472 deletions

View File

@@ -6,14 +6,19 @@ import { cn } from '@/lib/utils';
import { usePlatform } from '@/platform';
// Icons
import { HomeIcon, SubscriptionIcon, WalletIcon, UsersIcon, ChatIcon } from './icons';
import { HomeIcon, SubscriptionIcon, WalletIcon, UsersIcon, ChatIcon, WheelIcon } from './icons';
interface MobileBottomNavProps {
isKeyboardOpen: boolean;
referralEnabled?: boolean;
wheelEnabled?: boolean;
}
export function MobileBottomNav({ isKeyboardOpen, referralEnabled }: MobileBottomNavProps) {
export function MobileBottomNav({
isKeyboardOpen,
referralEnabled,
wheelEnabled,
}: MobileBottomNavProps) {
const { t } = useTranslation();
const location = useLocation();
const { haptic } = usePlatform();
@@ -21,12 +26,15 @@ export function MobileBottomNav({ isKeyboardOpen, referralEnabled }: MobileBotto
const isActive = (path: string) => location.pathname === path;
// Core navigation items for bottom bar
// When wheel is enabled, it replaces Support in the bottom nav (Support is still accessible via hamburger menu)
const coreItems = [
{ path: '/', label: t('nav.dashboard'), icon: HomeIcon },
{ path: '/subscription', label: t('nav.subscription'), icon: SubscriptionIcon },
{ path: '/balance', label: t('nav.balance'), icon: WalletIcon },
...(referralEnabled ? [{ path: '/referral', label: t('nav.referral'), icon: UsersIcon }] : []),
{ path: '/support', label: t('nav.support'), icon: ChatIcon },
...(wheelEnabled
? [{ path: '/wheel', label: t('nav.wheel'), icon: WheelIcon }]
: [{ path: '/support', label: t('nav.support'), icon: ChatIcon }]),
];
const handleNavClick = () => {