[native] fix(status bar): Try to fix status bar

Signed-off-by: Marcel Klehr <[email protected]>

Author: marcelklehr

_locales/en/messages.json

@@ -745,7 +745,7 @@
     "message": "Git branch"
   },
   "LabelTelemetry": {
-    "message": "\uD83D\uDC1B Automated Error Reporting"
+    "message": "Automated Error Reporting"
   },
   "DescriptionTelemetry": {
     "message": "Floccus can automatically send error data to me, the developer. This is a tremendous help for discovering and resolving bugs in floccus more quickly and will help improve your experience with floccus in the long run. Even when error reporting is enabled, the floccus developers will never be able to see your bookmarks."

android/app/src/main/assets/capacitor.config.json

@@ -18,8 +18,11 @@
 			"enabled": true
 		},
 		"StatusBar": {
-			"overlaysWebView": true
+			"overlaysWebView": false
 		}
 	},
-	"cordova": {}
+	"cordova": {},
+	"android": {
+		"adjustMarginsForEdgeToEdge": "force"
+	}
 }

capacitor.config.json

@@ -18,8 +18,11 @@
       "enabled": true
     },
     "StatusBar": {
-      "overlaysWebView": true
+      "overlaysWebView": false
     }
   },
-  "cordova": {}
+  "cordova": {},
+  "android": {
+    "adjustMarginsForEdgeToEdge": "force"
+  }
 }

ios/App/App/capacitor.config.json

@@ -18,10 +18,13 @@
 			"enabled": true
 		},
 		"StatusBar": {
-			"overlaysWebView": true
+			"overlaysWebView": false
 		}
 	},
 	"cordova": {},
+	"android": {
+		"adjustMarginsForEdgeToEdge": "force"
+	},
 	"packageClassList": [
 		"OAuth2ClientPlugin",
 		"AppPlugin",

src/lib/native/NativeController.js

@@ -4,6 +4,7 @@ import Cryptography from '../Crypto'
 import NativeAccountStorage from './NativeAccountStorage'
 import Account from '../Account'
 import { STATUS_ALLGOOD, STATUS_DISABLED, STATUS_ERROR, STATUS_SYNCING } from '../interfaces/Controller'
+import { initSharp } from '../sentry'
 
 const INACTIVITY_TIMEOUT = 1000 * 7
 const MAX_BACKOFF_INTERVAL = 1000 * 60 * 60 // 1 hour
@@ -244,6 +245,10 @@ export default class NativeController {
   }
 
   async onLoad() {
+    if (await NativeAccountStorage.getEntry('telemetryEnabled', false)) {
+      initSharp()
+    }
+
     const accounts = await Account.getAllAccounts()
     await Promise.all(
       accounts.map(async acc => {

src/ui/NativeApp.vue

@@ -10,6 +10,7 @@
 import { version as VERSION } from '../../package.json'
 import { actions } from './store/definitions'
 import Controller from '../lib/Controller'
+import {StatusBar, Style} from '@capacitor/status-bar'
 export default {
   name: 'NativeApp',
   data() {
@@ -28,6 +29,13 @@ export default {
     }
   },
   async created() {
+    if (this.$vuetify.theme.dark) {
+      StatusBar.setStyle({ style: Style.Light })
+      StatusBar.setBackgroundColor(this.background)
+    } else {
+      StatusBar.setStyle({ style: Style.Dark })
+      StatusBar.setBackgroundColor(this.background)
+    }
     const controller = await Controller.getSingleton()
     await controller.onLoad()
     setInterval(() => {

src/ui/NativeRouter.js

@@ -4,8 +4,6 @@ import Tree from './views/native/Tree'
 import Home from './views/native/Home'
 import AddBookmarkIntent from './views/native/AddBookmarkIntent'
 import ImportExport from './views/native/ImportExport'
-import About from './views/native/About'
-import Feedback from './views/native/Feedback.vue'
 
 Vue.use(Router)
 
@@ -20,7 +18,8 @@ export const routes = {
   IMPORTEXPORT: 'IMPORTEXPORT',
   FEEDBACK: 'FEEDBACK',
   DONATE: 'DONATE',
-  ABOUT: 'ABOUT'
+  ABOUT: 'ABOUT',
+  TELEMETRY: 'TELEMETRY',
 }
 
 export const router = new Router({
@@ -64,12 +63,17 @@ export const router = new Router({
     {
       path: '/feedback',
       name: routes.FEEDBACK,
-      component: Feedback,
+      component: () => import(/* webpackPrefetch: true */ './views/native/Feedback'),
+    },
+    {
+      path: '/telemetry',
+      name: routes.TELEMETRY,
+      component: () => import(/* webpackPrefetch: true */ './views/native/Telemetry'),
     },
     {
       path: '/about',
       name: routes.ABOUT,
-      component: About,
+      component: () => import(/* webpackPrefetch: true */ './views/native/About'),
     },
   ],
 })

src/ui/components/native/Drawer.vue

@@ -71,7 +71,7 @@
         </v-list-item-content>
       </v-list-item>
       <v-list-item
-        key="bugs"
+        key="feedback"
         link
         :to="{name: routes.FEEDBACK}">
         <v-list-item-icon>
@@ -81,6 +81,17 @@
           <v-list-item-title>{{ t('LabelGivefeedback') }}</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
+      <v-list-item
+        key="telemetry"
+        link
+        :to="{name: routes.TELEMETRY}">
+        <v-list-item-icon>
+          <v-icon>mdi-bug-play-outline</v-icon>
+        </v-list-item-icon>
+        <v-list-item-content>
+          <v-list-item-title>{{ t('LabelTelemetry') }}</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
       <v-list-item
         key="about"
         link

src/ui/views/native/Telemetry.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="native-scroll-container">
+    <v-main>
+      <v-container>
+        <v-card
+          class="options mt-3">
+          <v-container class="pa-5">
+            <v-card-title>
+              {{ t("LabelTelemetry") }}
+            </v-card-title>
+            <v-card-text>
+              <div class="body-1">
+                {{ t("DescriptionTelemetry") }}
+              </div>
+              <v-radio-group
+                v-model="telemetry"
+                class="mt-4">
+                <v-radio :value="true">
+                  <template #label>
+                    <div class="heading">
+                      {{ t("LabelTelemetryenable") }}
+                    </div>
+                  </template>
+                </v-radio>
+                <v-radio :value="false">
+                  <template #label>
+                    <div class="heading">
+                      {{ t("LabelTelemetrydisable") }}
+                    </div>
+                  </template>
+                </v-radio>
+              </v-radio-group>
+            </v-card-text>
+            <v-card-title>
+              {{ t("LabelReportproblem") }}
+            </v-card-title>
+            <v-card-text>
+              <div class="body-1">
+                {{ t("DescriptionReportproblem") }}
+              </div>
+              <v-btn href="https://github.com/floccusaddon/floccus/issues">
+                {{ t("LabelReportproblem") }}
+              </v-btn>
+            </v-card-text>
+          </v-container>
+        </v-card>
+      </v-container>
+    </v-main>
+  </div>
+</template>
+
+<script>
+import NativeAccountStorage from '../../../lib/native/NativeAccountStorage'
+
+export default {
+  name: 'Telemetry',
+  components: {},
+  data() {
+    return {
+      telemetry: false,
+    }
+  },
+  watch: {
+    telemetry(enabled) {
+      NativeAccountStorage.changeEntry('telemetryEnabled', () => enabled, false)
+    },
+  },
+  async created() {
+    const telemetryEnabled = await NativeAccountStorage.getEntry('telemetryEnabled', false)
+    this.telemetry = telemetryEnabled
+  },
+}
+</script>
+
+<style scoped>
+    .options {
+        max-width: 600px;
+        margin: 0 auto;
+    }
+</style>