From a73fb5bd86dcf9a155bafe041a166ed1518e382a Mon Sep 17 00:00:00 2001
From: Maksim Sasnouski <qeeqez@gmail.com>
Date: Tue, 3 Dec 2024 00:58:20 +0400
Subject: [PATCH] feat(playground/sdk) show enter / exit fullscreen buttons

---
 playgrounds/react/src/components/Page.tsx     |  2 +-
 .../react/src/pages/ViewportParamsPage.tsx    | 35 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/playgrounds/react/src/components/Page.tsx b/playgrounds/react/src/components/Page.tsx
index 8f98864ef..0848dfc64 100644
--- a/playgrounds/react/src/components/Page.tsx
+++ b/playgrounds/react/src/components/Page.tsx
@@ -24,7 +24,7 @@ export function Page({children, back = true}: PropsWithChildren<{
   }, [back]);
 
   return <div style={{
-    paddingTop: contentInset.top,
+    paddingTop: inset.top + contentInset.top,
     paddingLeft: inset.left,
     paddingRight: inset.right,
   }}>
diff --git a/playgrounds/react/src/pages/ViewportParamsPage.tsx b/playgrounds/react/src/pages/ViewportParamsPage.tsx
index e7e994132..146b88fbd 100644
--- a/playgrounds/react/src/pages/ViewportParamsPage.tsx
+++ b/playgrounds/react/src/pages/ViewportParamsPage.tsx
@@ -1,9 +1,10 @@
 import {
+  hapticFeedback,
   useSignal,
   viewport
 } from '@telegram-apps/sdk-react';
 
-import {List} from '@telegram-apps/telegram-ui';
+import {Button, List} from '@telegram-apps/telegram-ui';
 import {FC, useEffect, useState} from 'react';
 
 import {DisplayData, DisplayDataRow} from '@/components/DisplayData/DisplayData.tsx';
@@ -49,8 +50,40 @@ export const ViewportParamsPage: FC = () => {
     setContentSafeAreaRows(getSafeAreaRows(contentInset));
   }, [contentInset]);
 
+  const requestFullscreen = () => {
+    hapticFeedback.impactOccurred("medium");
+    void viewport.requestFullscreen();
+  }
+
+  const exitFullscreen = () => {
+    hapticFeedback.impactOccurred("medium");
+    void viewport.exitFullscreen();
+  }
+
   return (
     <Page>
+      <div style={{
+        display: "flex",
+        padding: "1rem",
+        gap: "1rem",
+      }}>
+        <Button
+          mode="filled"
+          size="l"
+          onClick={requestFullscreen}
+          style={{flex: "1 1 0%"}}
+        >
+          Request fullscreen
+        </Button>
+        <Button
+          mode="filled"
+          size="l"
+          onClick={exitFullscreen}
+          style={{flex: "1 1 0%"}}
+        >
+          Exit fullscreen
+        </Button>
+      </div>
       <List>
         <DisplayData
           header={'App mode'}