mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-07-18 00:46:45 +00:00
109f249011
The edge-to-edge support plugin (registered for targetSdk 36, where
edge-to-edge is enforced) natively insets the WebView via margins and
draws the status/navigation bar backgrounds via its own overlay views,
which broke two assumptions of the old native theming path:
- The top bar gained excessive padding: the WebView is already inset
below the status bar by the plugin, yet capacitor-plugin-safe-area
still reported the full decorView inset, which was applied again as
CSS padding-top. Pin the safe-area CSS vars to 0 on Android (the
WebView interior is fully safe there); iOS keeps reading the plugin.
- The bottom navigation/gesture area lost its background color:
Window.setNavigationBarColor / StatusBar.setBackgroundColor are
no-ops under enforced edge-to-edge, and the plugin's overlays default
to transparent. Color them via EdgeToEdge.set{Status,Navigation}Bar
Color reactively with the theme, and seed an initial color in
capacitor.config so the first frame isn't transparent. The custom
NavigationBar plugin is kept solely for nav-bar icon/pill appearance
(still effective on API 30+, and its color path remains valid down to
minSdk 24).
76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
import type { CapacitorConfig } from '@capacitor/cli';
|
|
|
|
const config: CapacitorConfig = {
|
|
appId: 'com.super-productivity.app',
|
|
appName: 'Super Productivity',
|
|
webDir: 'dist/browser',
|
|
plugins: {
|
|
CapacitorHttp: {
|
|
enabled: true,
|
|
},
|
|
LocalNotifications: {
|
|
// Android-specific: small icon for notification
|
|
smallIcon: 'ic_stat_sp',
|
|
},
|
|
Keyboard: {
|
|
// iOS-only: Android excludes @capacitor/keyboard via includePlugins below
|
|
// and uses JavaScriptInterface for keyboard visibility instead.
|
|
// 'native' resizes the WKWebView so 100vh fits above the keyboard.
|
|
resize: 'native',
|
|
// false is required when paired with @capawesome/capacitor-android-edge-
|
|
// to-edge-support; ignored on iOS where this key has no effect.
|
|
resizeOnFullScreen: false,
|
|
},
|
|
StatusBar: {
|
|
// iOS: overlay the status bar so content can sit beneath it.
|
|
// No-op on Android 15+ (targetSdk 36).
|
|
overlaysWebView: true,
|
|
},
|
|
SystemBars: {
|
|
// Disable Capacitor's built-in inset handling so the edge-to-edge plugin
|
|
// can own it. With targetSdk 36 (Android 16) edge-to-edge is mandatory,
|
|
// and the two layers both applying insets fight each other — visible
|
|
// as fixed-position elements scrolling with content when the IME is up.
|
|
insetsHandling: 'disable',
|
|
},
|
|
EdgeToEdge: {
|
|
// Initial status/navigation bar background color, shown before the theme
|
|
// service boots and calls EdgeToEdge.set{Status,Navigation}BarColor.
|
|
// Without this the plugin's overlay views default to transparent, so the
|
|
// bottom navigation/gesture area shows the bare window background. Dark to
|
|
// match the most common mobile theme (cf. the ios backgroundColor below).
|
|
statusBarColor: '#131314',
|
|
navigationBarColor: '#131314',
|
|
},
|
|
},
|
|
android: {
|
|
// Android keyboard visibility is handled by JavaScriptInterface. Keeping
|
|
// @capacitor/keyboard Android-side registers an unused insets callback
|
|
// that can crash in Keyboard$1.onEnd on some devices.
|
|
includePlugins: [
|
|
'@capacitor/browser',
|
|
'@capacitor/status-bar',
|
|
'capacitor-plugin-safe-area',
|
|
'@capacitor/app',
|
|
'@capacitor/filesystem',
|
|
'@capacitor/local-notifications',
|
|
'@capacitor/share',
|
|
'@capawesome/capacitor-android-dark-mode-support',
|
|
'@capawesome/capacitor-android-edge-to-edge-support',
|
|
'@capawesome/capacitor-background-task',
|
|
],
|
|
},
|
|
ios: {
|
|
// Content inset for safe areas (notch, home indicator)
|
|
contentInset: 'never',
|
|
// Background color for safe areas (home indicator, notch)
|
|
// Use dark color to match dark theme (most common on mobile)
|
|
backgroundColor: '#131314',
|
|
// Allow inline media playback
|
|
allowsLinkPreview: true,
|
|
// Scroll behavior
|
|
scrollEnabled: true,
|
|
},
|
|
};
|
|
|
|
export default config;
|