From e7cd3702997144725ac90289e5aecd101856bc92 Mon Sep 17 00:00:00 2001 From: Fringg Date: Wed, 11 Mar 2026 01:34:44 +0300 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20responsive=20desktop=20nav=20?= =?UTF-8?q?=E2=80=94=20icon-only=20on=20lg,=20icon+text=20on=20xl?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove horizontal scroll from desktop top nav bar. Items now show icons only at 1024-1279px with native tooltips, and icons+labels at 1280px+. All 9 items fit on screen in any language without scrolling. --- src/components/layout/AppShell/AppShell.tsx | 168 ++++++++------------ 1 file changed, 65 insertions(+), 103 deletions(-) diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx index fbc10f8..4b168df 100644 --- a/src/components/layout/AppShell/AppShell.tsx +++ b/src/components/layout/AppShell/AppShell.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useLocation, Link } from 'react-router'; import { useQuery } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; @@ -269,31 +269,6 @@ export function AppShell({ children }: AppShellProps) { haptic.impact('light'); }; - // Desktop nav scroll fade indicators - const navRef = useRef(null); - const [navCanScrollLeft, setNavCanScrollLeft] = useState(false); - const [navCanScrollRight, setNavCanScrollRight] = useState(false); - - const updateNavScroll = useCallback(() => { - const el = navRef.current; - if (!el) return; - setNavCanScrollLeft(el.scrollLeft > 2); - setNavCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 2); - }, []); - - useEffect(() => { - const el = navRef.current; - if (!el) return; - updateNavScroll(); - el.addEventListener('scroll', updateNavScroll, { passive: true }); - const ro = new ResizeObserver(updateNavScroll); - ro.observe(el); - return () => { - el.removeEventListener('scroll', updateNavScroll); - ro.disconnect(); - }; - }, [updateNavScroll]); - // Calculate header height based on fullscreen mode (only on mobile Telegram) // On iOS: contentSafeAreaInset.top includes status bar + dynamic island + Telegram header // On Android: safeAreaInset.top only includes status bar, need to add Telegram header height (~48px) @@ -342,89 +317,76 @@ export function AppShell({ children }: AppShellProps) { {/* Center Navigation */} -
- {/* Left fade */} -
- {/* Right fade */} -
-
+ + )} + {/* Right side actions */}
From 3bae6cf1e1e40c8f1434d64cdc4e99079856bc56 Mon Sep 17 00:00:00 2001 From: Fringg Date: Wed, 11 Mar 2026 01:38:58 +0300 Subject: [PATCH 2/7] fix: show nav labels from 2xl (1536px) instead of xl (1280px) Russian labels with 9 items overflow at xl breakpoint. Push text labels to 2xl where there is enough space for all languages. --- src/components/layout/AppShell/AppShell.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx index 4b168df..3fa97cb 100644 --- a/src/components/layout/AppShell/AppShell.tsx +++ b/src/components/layout/AppShell/AppShell.tsx @@ -332,7 +332,7 @@ export function AppShell({ children }: AppShellProps) { )} > - {item.label} + {item.label} ))} {referralEnabled && ( @@ -348,7 +348,7 @@ export function AppShell({ children }: AppShellProps) { )} > - {t('nav.referral')} + {t('nav.referral')} )} {giftEnabled && ( @@ -364,7 +364,7 @@ export function AppShell({ children }: AppShellProps) { )} > - {t('nav.gift')} + {t('nav.gift')} )} {isAdmin && ( @@ -382,7 +382,7 @@ export function AppShell({ children }: AppShellProps) { )} > - {t('admin.nav.title')} + {t('admin.nav.title')} )} From f0777f0b5db9115b84bdcb37eb9dab6650bd725b Mon Sep 17 00:00:00 2001 From: Fringg Date: Wed, 11 Mar 2026 01:42:54 +0300 Subject: [PATCH 3/7] fix: desktop nav always icon-only with tooltips Text labels overflow even at 2xl with Russian + 9 items. Switch to icon-only mode at all desktop widths. Labels kept as sr-only for accessibility, title attribute provides tooltips. --- src/components/layout/AppShell/AppShell.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx index 3fa97cb..2767068 100644 --- a/src/components/layout/AppShell/AppShell.tsx +++ b/src/components/layout/AppShell/AppShell.tsx @@ -332,7 +332,7 @@ export function AppShell({ children }: AppShellProps) { )} > - {item.label} + {item.label} ))} {referralEnabled && ( @@ -348,7 +348,7 @@ export function AppShell({ children }: AppShellProps) { )} > - {t('nav.referral')} + {t('nav.referral')} )} {giftEnabled && ( @@ -364,7 +364,7 @@ export function AppShell({ children }: AppShellProps) { )} > - {t('nav.gift')} + {t('nav.gift')} )} {isAdmin && ( @@ -382,7 +382,7 @@ export function AppShell({ children }: AppShellProps) { )} > - {t('admin.nav.title')} + {t('admin.nav.title')} )} From 8dab6dc8fb8ef7ba97c94fa71cff5b4ed750198d Mon Sep 17 00:00:00 2001 From: Fringg Date: Wed, 11 Mar 2026 01:52:29 +0300 Subject: [PATCH 4/7] feat: desktop nav expand-on-hover with larger icons Icons enlarged to 18px, padding increased. On hover each button smoothly expands to reveal its label with opacity and max-width transition (200ms). Uses group/group-hover pattern. --- src/components/layout/AppShell/AppShell.tsx | 40 +++++++++++---------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx index 2767068..80abd12 100644 --- a/src/components/layout/AppShell/AppShell.tsx +++ b/src/components/layout/AppShell/AppShell.tsx @@ -317,72 +317,76 @@ export function AppShell({ children }: AppShellProps) { {/* Center Navigation */} -
);