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

Enhance Layout and useTelegramWebApp hook: add contentSafeAreaInset state and adjust header padding for fullscreen mode to improve layout responsiveness.

Browse Source
This commit is contained in:
PEDZEO
2026-01-20 01:21:40 +03:00
parent fbb87c8b0e
commit 6048d90e46
2 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/layout/Layout.tsx
View File

@@ -142,7 +142,7 @@ export default function Layout({ children }: LayoutProps) {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const { toggleTheme, isDark } = useTheme()
const [userPhotoUrl, setUserPhotoUrl] = useState<string | null>(null)
const { isTelegramWebApp, isFullscreen, isFullscreenSupported, toggleFullscreen } = useTelegramWebApp()
const { isTelegramWebApp, isFullscreen, isFullscreenSupported, toggleFullscreen, safeAreaInset, contentSafeAreaInset } = useTelegramWebApp()
// Fetch enabled themes from API - same source of truth as AdminSettings
const { data: enabledThemes } = useQuery({
@@ -300,7 +300,13 @@ export default function Layout({ children }: LayoutProps) {
<AnimatedBackground />
{/* Header */}
<header className="sticky top-0 z-50 glass border-b border-dark-800/50">
<header
className="sticky top-0 z-50 glass border-b border-dark-800/50"
style={{
// In fullscreen mode, add padding for safe area (notch/camera)
paddingTop: isFullscreen ? `${Math.max(safeAreaInset.top, contentSafeAreaInset.top)}px` : undefined,
}}
>
<div className="w-full mx-auto px-4 sm:px-6">
<div className="flex justify-between items-center h-16 lg:h-20">
{/* Logo */}

14
src/hooks/useTelegramWebApp.ts
View File

@@ -8,6 +8,7 @@ export function useTelegramWebApp() {
const [isFullscreen, setIsFullscreen] = useState(false)
const [isTelegramWebApp, setIsTelegramWebApp] = useState(false)
const [safeAreaInset, setSafeAreaInset] = useState({ top: 0, bottom: 0, left: 0, right: 0 })
const [contentSafeAreaInset, setContentSafeAreaInset] = useState({ top: 0, bottom: 0, left: 0, right: 0 })
const webApp = typeof window !== 'undefined' ? window.Telegram?.WebApp : undefined
@@ -20,6 +21,7 @@ export function useTelegramWebApp() {
setIsTelegramWebApp(true)
setIsFullscreen(webApp.isFullscreen || false)
setSafeAreaInset(webApp.safeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 })
setContentSafeAreaInset(webApp.contentSafeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 })
// Expand WebApp to full height
webApp.expand()
@@ -29,12 +31,23 @@ export function useTelegramWebApp() {
const handleFullscreenChanged = () => {
setIsFullscreen(webApp.isFullscreen || false)
setSafeAreaInset(webApp.safeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 })
setContentSafeAreaInset(webApp.contentSafeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 })
}
// Listen for safe area changes
const handleSafeAreaChanged = () => {
setSafeAreaInset(webApp.safeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 })
setContentSafeAreaInset(webApp.contentSafeAreaInset || { top: 0, bottom: 0, left: 0, right: 0 })
}
webApp.onEvent('fullscreenChanged', handleFullscreenChanged)
webApp.onEvent('safeAreaChanged', handleSafeAreaChanged)
webApp.onEvent('contentSafeAreaChanged', handleSafeAreaChanged)
return () => {
webApp.offEvent('fullscreenChanged', handleFullscreenChanged)
webApp.offEvent('safeAreaChanged', handleSafeAreaChanged)
webApp.offEvent('contentSafeAreaChanged', handleSafeAreaChanged)
}
}, [webApp])
@@ -86,6 +99,7 @@ export function useTelegramWebApp() {
isFullscreen,
isFullscreenSupported,
safeAreaInset,
contentSafeAreaInset,
requestFullscreen,
exitFullscreen,
toggleFullscreen,