Keep system status bar out of the Action Bar area

.gitignore

@@ -1,5 +1,5 @@
 /dist/
-/.idea/
+.idea/
 /node_modules/
 
 .DS_Store

android/app/capacitor.build.gradle

@@ -9,7 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-    implementation project(':capacitor-status-bar')
+    implementation project(':capacitor-community-safe-area')
 
 }
 

android/app/src/main/java/org/microbit/createai/MainActivity.java

@@ -1,5 +1,15 @@
 package org.microbit.createai;
 
+import androidx.activity.EdgeToEdge;
+
 import com.getcapacitor.BridgeActivity;
 
-public class MainActivity extends BridgeActivity {}
+public class MainActivity extends BridgeActivity {
+
+    @Override
+    public void onStart() {
+        super.onStart();
+        EdgeToEdge.enable(this);
+    }
+
+}

android/build.gradle

@@ -7,7 +7,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.7.2'
+        classpath 'com.android.tools.build:gradle:8.13.1'
         classpath 'com.google.gms:google-services:4.4.2'
 
         // NOTE: Do not place your application dependencies here; they belong

android/capacitor.settings.gradle

@@ -2,5 +2,5 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
-include ':capacitor-status-bar'
-project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
+include ':capacitor-community-safe-area'
+project(':capacitor-community-safe-area').projectDir = new File('../node_modules/@capacitor-community/safe-area/android')

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

capacitor.config.ts

@@ -3,7 +3,10 @@ import type { CapacitorConfig } from '@capacitor/cli';
 const config: CapacitorConfig = {
   appId: 'org.microbit.createai',
   appName: 'micro:bit CreateAI',
-  webDir: 'dist'
+  webDir: 'dist',
+  android: {
+    adjustMarginsForEdgeToEdge: 'disable'
+  }
 };
 
 export default config;

index.html

@@ -62,8 +62,6 @@
     style="
       overscroll-behavior-y: none;
       height: 100%;
-      padding-top: env(safe-area-inset-top);
-      padding-bottom: env(safe-area-inset-bottom);
     "
   >
     <div id="root" style="overscroll-behavior-y: none; height: 100%"></div>

ios/App/Podfile

@@ -11,7 +11,7 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
+  pod 'CapacitorCommunitySafeArea', :path => '../../node_modules/@capacitor-community/safe-area'
 end
 
 target 'App' do

ios/App/Podfile.lock

@@ -1,28 +1,28 @@
 PODS:
   - Capacitor (7.4.4):
     - CapacitorCordova
-  - CapacitorCordova (7.4.4)
-  - CapacitorStatusBar (7.0.3):
+  - CapacitorCommunitySafeArea (7.0.0-beta.5):
     - Capacitor
+  - CapacitorCordova (7.4.4)
 
 DEPENDENCIES:
   - "Capacitor (from `../../node_modules/@capacitor/ios`)"
+  - "CapacitorCommunitySafeArea (from `../../node_modules/@capacitor-community/safe-area`)"
   - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
-  - "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)"
 
 EXTERNAL SOURCES:
   Capacitor:
     :path: "../../node_modules/@capacitor/ios"
+  CapacitorCommunitySafeArea:
+    :path: "../../node_modules/@capacitor-community/safe-area"
   CapacitorCordova:
     :path: "../../node_modules/@capacitor/ios"
-  CapacitorStatusBar:
-    :path: "../../node_modules/@capacitor/status-bar"
 
 SPEC CHECKSUMS:
-  Capacitor: 09d9ff8e9618e8c4b3cab2bbee34a17215dd2fef
+  Capacitor: 358dd1c3fdd71d969547b17e159fd8a7736cb45f
+  CapacitorCommunitySafeArea: 53e3ad999bada9892cb4e9aca8fa8012aabad4b2
   CapacitorCordova: bf648a636f3c153f652d312ae145fb508b6ffced
-  CapacitorStatusBar: 7d8fcbd6768db014bd721d75e246590b014928e8
 
-PODFILE CHECKSUM: 2dda0cc353931d1c074294a0067df65453b878b5
+PODFILE CHECKSUM: b14023669789a78b7a53c7515766b1a886b64d37
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2

package.json

@@ -58,10 +58,10 @@
     "vitest-dom": "^0.1.1"
   },
   "dependencies": {
+    "@capacitor-community/safe-area": "^7.0.0-beta.5",
     "@capacitor/android": "^7.4.4",
     "@capacitor/core": "^7.4.4",
     "@capacitor/ios": "^7.4.4",
-    "@capacitor/status-bar": "^7.0.3",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",

src/App.tsx

@@ -6,8 +6,6 @@
  */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { ChakraProvider, useToast } from "@chakra-ui/react";
-import { Capacitor } from "@capacitor/core";
-import { StatusBar, Style } from "@capacitor/status-bar";
 import { MakeCodeFrameDriver } from "@microbit/makecode-embed/react";
 import {
   createRadioBridgeConnection,
@@ -59,6 +57,8 @@ import {
   createNewPageUrl,
   createTestingModelPageUrl,
 } from "./urls";
+import { SafeArea, SystemBarsStyle } from "@capacitor-community/safe-area";
+import { Capacitor } from "@capacitor/core";
 
 export interface ProviderLayoutProps {
   children: ReactNode;
@@ -208,13 +208,9 @@ const createRouter = () => {
 
 const App = () => {
   useEffect(() => {
-    // Configure status bar for native platforms
     if (Capacitor.isNativePlatform()) {
-      StatusBar.setStyle({ style: Style.Light }).catch((err) => {
-        logging.error(err);
-      });
-      StatusBar.setOverlaysWebView({ overlay: false }).catch((err) => {
-        logging.error(err);
+      void SafeArea.setSystemBarsStyle({
+        style: SystemBarsStyle.Dark,
       });
     }
 

src/components/ActionBar/ActionBar.tsx

@@ -25,10 +25,15 @@ const ActionBar = ({
       as="header"
       alignItems="center"
       justifyContent="space-between"
-      bgColor="brand2.500"
-      h="64px"
       gap={0}
-      minH="64px"
+      sx={{
+        // Pad the action bar when it appears under the system status bar
+        maxHeight: "calc(64px + env(safe-area-inset-top))",
+        height: "calc(64px + env(safe-area-inset-top))",
+        paddingTop: "env(safe-area-inset-top)",
+        background:
+          "linear-gradient(to bottom, var(--chakra-colors-brand2-600) env(safe-area-inset-top), var(--chakra-colors-brand2-500) env(safe-area-inset-top))",
+      }}
       {...rest}
     >
       <HStack

src/components/EditCodeDialog.tsx

@@ -24,11 +24,14 @@ const EditCodeDialog = forwardRef<MakeCodeFrameDriver, EditCodeDialogProps>(
       <Flex
         w="100%"
         h="100%"
-        bgColor="white"
+        bgColor="#3454D1" // Matches MakeCode behind status bar, for edge-to-edge appearance
         left={isOpen ? undefined : "-150vw"}
         top={isOpen ? undefined : "-150vh"}
         visibility={isOpen ? "visible" : "hidden"}
         position={isOpen ? undefined : "absolute"}
+        sx={{
+          paddingTop: "env(safe-area-inset-top)",
+        }}
       >
         <Editor ref={ref} style={{ flexGrow: 1 }} />
       </Flex>