diff --git a/.gitignore b/.gitignore
index 3468db06e..dd9ba5cfa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
/dist/
-/.idea/
+.idea/
/node_modules/
.DS_Store
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
index 7d5ceefda..06abde545 100644
--- a/android/app/capacitor.build.gradle
+++ b/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')
}
diff --git a/android/app/src/main/java/org/microbit/createai/MainActivity.java b/android/app/src/main/java/org/microbit/createai/MainActivity.java
index d17b6e4d8..358fc44da 100644
--- a/android/app/src/main/java/org/microbit/createai/MainActivity.java
+++ b/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);
+ }
+
+}
\ No newline at end of file
diff --git a/android/build.gradle b/android/build.gradle
index f1b3b0e51..18b9962d1 100644
--- a/android/build.gradle
+++ b/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
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
index c736879f4..3a140470d 100644
--- a/android/capacitor.settings.gradle
+++ b/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')
diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties
index c1d5e0185..ed4c299ad 100644
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/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
diff --git a/capacitor.config.ts b/capacitor.config.ts
index ead7fd938..53346cdff 100644
--- a/capacitor.config.ts
+++ b/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;
diff --git a/index.html b/index.html
index 6e07bf522..c1a2097cd 100644
--- a/index.html
+++ b/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);
"
>
diff --git a/ios/App/Podfile b/ios/App/Podfile
index 1a8e6035a..dcb1691d3 100644
--- a/ios/App/Podfile
+++ b/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
diff --git a/ios/App/Podfile.lock b/ios/App/Podfile.lock
index c16be04b8..454625e81 100644
--- a/ios/App/Podfile.lock
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index 172e64b04..98f997c8d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,10 +10,10 @@
"hasInstallScript": true,
"license": "MIT",
"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",
@@ -374,6 +374,15 @@
"node": ">=6.9.0"
}
},
+ "node_modules/@capacitor-community/safe-area": {
+ "version": "7.0.0-beta.5",
+ "resolved": "https://registry.npmjs.org/@capacitor-community/safe-area/-/safe-area-7.0.0-beta.5.tgz",
+ "integrity": "sha512-IP7+O+oU9Z8uX+lGfe/hDdQBmWcWqa/Bu0L49GAGSWnEARTKsgTrN6Rs3RQaEKlojOcc6BhX91bYNxOBPzPQ1Q==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@capacitor/core": ">=7.0.0"
+ }
+ },
"node_modules/@capacitor/android": {
"version": "7.4.4",
"resolved": "https://registry.npmjs.org/@capacitor/android/-/android-7.4.4.tgz",
@@ -521,15 +530,6 @@
"@capacitor/core": "^7.4.0"
}
},
- "node_modules/@capacitor/status-bar": {
- "version": "7.0.3",
- "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-7.0.3.tgz",
- "integrity": "sha512-JyRpVnKwHij9hgPWolF6PK+HT3e2HSPjN11/h2OmKxq8GAdPGARFLv+97eZl0pvuvm0Kka/LpiLb5whXISBg7Q==",
- "license": "MIT",
- "peerDependencies": {
- "@capacitor/core": ">=7.0.0"
- }
- },
"node_modules/@chakra-ui/accordion": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/@chakra-ui/accordion/-/accordion-2.3.1.tgz",
diff --git a/package.json b/package.json
index 6cc47a6b7..a458a67dd 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.tsx b/src/App.tsx
index 72ec14859..bd1fa826d 100644
--- a/src/App.tsx
+++ b/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,
});
}
diff --git a/src/components/ActionBar/ActionBar.tsx b/src/components/ActionBar/ActionBar.tsx
index 10b4d44f3..a6dfc6ba9 100644
--- a/src/components/ActionBar/ActionBar.tsx
+++ b/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}
>
(