diff --git a/app/app.js b/app/app.js
index eb0a52c..476979d 100644
--- a/app/app.js
+++ b/app/app.js
@@ -1,14 +1,15 @@
 //@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
 
-import Vue from 'nativescript-vue'
+import { createApp, registerElement } from 'nativescript-vue'
 
 import { FontIcon, fonticon } from '@nativescript-community/fonticon';
-import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
+import { BottomSheetPlugin } from '@nativescript-community/ui-material-bottomsheet/vue3';
+import { install as installBottomSheet } from "@nativescript-community/ui-material-bottomsheet";
 import CanvasSVG from '@nativescript-community/ui-svg/vue';
 import ButtonPlugin from '@nativescript-community/ui-material-button/vue';
-import WebViewPlugin from '@nativescript-community/ui-webview/vue';
+import WebView from '@nativescript-community/ui-webview/vue';
 import { CheckBox } from '@nstudio/nativescript-checkbox';
-import CollectionView from '@nativescript-community/ui-collectionview/vue';
+import CollectionView from '@nativescript-community/ui-collectionview/vue3';
 import RipplePlugin from '@nativescript-community/ui-material-ripple/vue';
 import { ImageCacheIt } from '@triniwiz/nativescript-image-cache-it';
 
@@ -20,25 +21,17 @@ import { initializeTracing } from './app-trace';
 initializeTracing();
 ImageCacheIt.enableAutoMM();
 
+// Install BottomSheet plugin
+installBottomSheet();
+
 FontIcon.paths = {
   'fa': './assets/css/Font-Awesome.css',
 };
 FontIcon.loadCssSync();
-Vue.filter('fonticon', fonticon);
-
-import { install } from "@nativescript-community/ui-material-bottomsheet";
-install();
-Vue.use(BottomSheetPlugin);
-
-Vue.use(CanvasSVG);
-Vue.use(ButtonPlugin);
-Vue.use(WebViewPlugin);
-Vue.use(CollectionView);
-Vue.use(RipplePlugin);
 
-Vue.registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
-Vue.registerElement('ImageCacheIt', () => require('@triniwiz/nativescript-image-cache-it').ImageCacheIt);
-Vue.registerElement(
+registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
+registerElement('ImageCacheIt', () => require('@triniwiz/nativescript-image-cache-it').ImageCacheIt);
+registerElement(
   'CheckBox',
   () => CheckBox,
   {
@@ -49,9 +42,18 @@ Vue.registerElement(
   }
 );
 
-Vue.config.silent = false;
+const app = createApp(Main);
+
+app.config.globalProperties.$filters = {
+  fonticon: fonticon
+};
+
+app.use(store);
+app.use(WebView);
+app.use(CollectionView);
+app.use(CanvasSVG);
+app.use(ButtonPlugin);
+app.use(RipplePlugin);
+app.use(BottomSheetPlugin);
 
-new Vue({
-  render: (h) => h('frame', [h(Main)]),
-  store
-}).$start()
+app.start();
diff --git a/app/components/AppControlPanel/AppControlListView.vue b/app/components/AppControlPanel/AppControlListView.vue
new file mode 100644
index 0000000..977d0fc
--- /dev/null
+++ b/app/components/AppControlPanel/AppControlListView.vue
@@ -0,0 +1,393 @@
+//@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
+
+<template>
+  <ListView
+    :items="listItems"
+    :itemTemplateSelector="templateSelector"
+    @itemTap="onItemTap"
+    separatorColor="#00000000"
+  >
+    <template #default="{ item }">
+      <Label text="Unknown item type" />
+    </template>
+
+    <template #action-buttons-group="{ item }">
+      <GridLayout
+        columns="*, *, *, *"
+        rows="90"
+        class="action-buttons-block"
+      >
+        <StackLayout
+          v-for="(button, index) in item.buttons"
+          :key="button.id"
+          :col="index"
+          class="btn"
+          @tap="onActionButtonTap(button.id)"
+        >
+          <Label class="fa icon" :text="$filters.fonticon(button.icon)" horizontalAlignment="center" />
+          <Label class="text" :text="button.text" horizontalAlignment="center" />
+        </StackLayout>
+      </GridLayout>
+    </template>
+
+    <template #navigation-item="{ item }">
+      <GridLayout
+        class="navigation-item"
+        columns="42, *"
+        rows="42"
+        @tap="onNavigationItemTap(item.id)"
+      >
+        <Label class="fa icon" :text="$filters.fonticon(item.icon)" col="0" row="0" />
+        <Label class="navigation-item-label" :text="item.text" col="1" row="0" />
+      </GridLayout>
+    </template>
+
+    <template #select-fields-group="{ item }">
+      <GridLayout
+        columns="*, 8, *"
+        rows="28, 52"
+        class="select-fields-block"
+      >
+        <!-- Highlighter column -->
+        <Label
+          v-if="item.fields[0].visible"
+          col="0"
+          row="0"
+          class="select-label"
+          :text="item.fields[0].label"
+        />
+        <SelectField
+          v-if="item.fields[0].visible"
+          col="0"
+          row="1"
+          :items="item.fields[0].items"
+          :selectedIndex="item.fields[0].items.indexOf(item.fields[0].selectedValue)"
+          title="Select Highlighter"
+          @change="onHighlighterSelected"
+        />
+
+        <!-- Base layer column -->
+        <Label
+          v-if="item.fields[1].visible"
+          col="2"
+          row="0"
+          class="select-label"
+          :text="item.fields[1].label"
+        />
+        <SelectField
+          v-if="item.fields[1].visible"
+          col="2"
+          row="1"
+          :items="item.fields[1].items"
+          :selectedIndex="item.fields[1].selectedIndex"
+          idField="layerId"
+          textField="name"
+          title="Select Base Layer"
+          @change="onBaseLayerSelected"
+        />
+      </GridLayout>
+    </template>
+
+    <template #portal-icons-group="{ item }">
+      <GridLayout
+        columns="*, *, *, *, *, *, *, *, *"
+        rows="52"
+        class="portal-icons-block"
+      >
+        <template v-for="(portal, index) in item.portals" :key="portal.layerId">
+          <SVGView
+            v-if="index <= 8"
+            class="overlay-portal"
+            :class="{ 'overlay-portal--active': portal.active === true }"
+            :col="index"
+            @tap="onOverlayPortalToggle($event, portal.index)"
+            :src="'~/assets/icons/portals/portal_L'+index+'_'+String(portal.active)+'.svg'"
+            stretch="aspectFit"
+          />
+        </template>
+      </GridLayout>
+    </template>
+
+    <template #switch-pair="{ item }">
+      <GridLayout
+        columns="*, 8, *"
+        rows="62"
+        class="switch-pair-block"
+      >
+        <GridLayout
+          v-for="(switchItem, colIndex) in item.items"
+          :key="switchItem.layerId"
+          :col="colIndex * 2"
+          class="btn-primary"
+          columns="*, 50"
+          rows="50"
+        >
+          <Label
+            class="overlay-item-label"
+            :text="switchItem.name"
+            @tap="onOverlayToggle(switchItem.index, 'label')"
+            col="0"
+            row="0"
+          />
+          <Switch
+            class="switch"
+            :checked="switchItem.active"
+            @checkedChange="args => onOverlayToggle(switchItem.index, args.value)"
+            col="1"
+            row="0"
+          />
+        </GridLayout>
+      </GridLayout>
+    </template>
+
+    <template #switch-single="{ item }">
+      <GridLayout
+        class="switch-single-block"
+        columns="*, 50"
+        rows="50"
+      >
+        <Label
+          class="overlay-item-label"
+          :text="item.item.name"
+          @tap="onOverlayToggle(item.item.index, 'label')"
+          col="0"
+          row="0"
+        />
+        <Switch
+          class="switch"
+          :checked="item.item.active"
+          @checkedChange="args => onOverlayToggle(item.item.index, args.value)"
+          col="1"
+          row="0"
+        />
+      </GridLayout>
+    </template>
+  </ListView>
+</template>
+
+<script>
+import SelectField from "@/components/base/SelectField.vue";
+import { mapState } from 'vuex';
+import { $navigateTo } from 'nativescript-vue';
+import SettingsView from '@/components/Settings/SettingsView';
+import PluginsView from '@/components/Settings/PluginsView';
+
+export default {
+  name: 'AppControlListView',
+
+  components: {
+    SelectField
+  },
+
+  props: {
+    listItems: {
+      type: Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      settingsScreen: SettingsView,
+      pluginsScreen: PluginsView,
+    }
+  },
+
+  computed: {
+    ...mapState({
+      isDebugActive: state => state.ui.isDebugActive
+    })
+  },
+
+  methods: {
+    // Template selector function - determines which template to use
+    templateSelector(data) {
+      const validTypes = [
+        'action-buttons-group',
+        'navigation-item',
+        'select-fields-group',
+        'portal-icons-group',
+        'switch-pair',
+        'switch-single'
+      ];
+      const itemType = data.item.type;
+      return validTypes.includes(itemType) ? itemType : 'default';
+    },
+
+    onItemTap(args) {
+      // Handle general item tap if needed
+    },
+
+    onActionButtonTap(buttonId) {
+      switch(buttonId) {
+        case 'settings':
+          this.openSettings();
+          break;
+        case 'plugins':
+          this.openPlugins();
+          break;
+        case 'debug':
+          this.toggleDebugMode();
+          break;
+        case 'reload':
+          this.reloadWebView();
+          break;
+      }
+    },
+
+    onNavigationItemTap(paneName) {
+      this.switchToPane(paneName);
+    },
+
+    onBaseLayerSelected(args) {
+      const id = args.selectedId;
+      if (id !== undefined && id !== this.$store.state.map.baseLayerSelected) {
+        this.$store.dispatch('map/setActiveBaseLayer', id);
+      }
+    },
+
+    onOverlayPortalToggle(e, index) {
+      const currentLayer = this.$store.state.map.overlayLayers[index];
+      const active = !currentLayer.active;
+      e.object.src = '~/assets/icons/portals/portal_L'+index+'_'+String(active)+'.svg';
+      this.$store.dispatch('map/setOverlayLayerProperty', {index, active});
+    },
+
+    onOverlayToggle(index, value) {
+      if (typeof value === 'boolean') {
+        // Direct value from switch event
+        this.$store.dispatch('map/setOverlayLayerProperty', {index, active: value});
+      } else {
+        // Label tap - toggle current state
+        const currentLayer = this.$store.state.map.overlayLayers[index];
+        if (currentLayer) {
+          this.$store.dispatch('map/setOverlayLayerProperty', {index, active: !currentLayer.active});
+        }
+      }
+    },
+
+    onHighlighterSelected(args) {
+      if (args.item) {
+        this.$store.dispatch('map/setActiveHighlighter', args.item);
+      }
+    },
+
+    // Action button methods
+    openSettings() {
+      $navigateTo(this.settingsScreen, {
+        animated: true,
+        transition: {
+          name: 'slideLeft',
+          duration: 300
+        }
+      });
+    },
+
+    openPlugins() {
+      $navigateTo(this.pluginsScreen, {
+        animated: true,
+        transition: {
+          name: 'slideLeft',
+          duration: 300
+        }
+      });
+    },
+
+    toggleDebugMode() {
+      this.$store.dispatch('ui/toggleDebugMode');
+    },
+
+    reloadWebView() {
+      this.$store.dispatch('ui/reloadWebView');
+    },
+
+    switchToPane(name) {
+      this.$store.dispatch('navigation/setCurrentPane', name);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/app';
+
+.action-buttons-block {
+  margin-bottom: $spacing-m;
+}
+
+.btn {
+  font-size: $font-size;
+  text-align: center;
+  padding: 0 $spacing-s;
+}
+
+.btn .icon {
+  margin: 0 0 $spacing-xs 0;
+  width: 54;
+  height: 54;
+  font-size: $font-size-headline;
+  border-radius: $radius-large;
+  color: $on-primary;
+  background-color: $surface-bright;
+  box-shadow: 0 2 4 rgba(0, 0, 0, 0.05);
+}
+
+.btn .text {
+  color: $text;
+}
+
+.navigation-item {
+  margin-bottom: $spacing-xs;
+}
+
+.icon {
+  font-size: 18;
+  width: 32;
+  vertical-align: center;
+  text-align: center;
+}
+
+.navigation-item-label {
+  font-size: $font-size;
+  padding-left: 15;
+}
+
+.select-fields-block {
+  margin-bottom: $spacing-m;
+}
+
+.select-label {
+  font-size: $font-small-size;
+}
+
+.portal-icons-block {
+  margin-bottom: $spacing-m;
+}
+
+.overlay-portal {
+  margin: $spacing-xs;
+  border-radius: $radius-large;
+  horizontal-align: center;
+
+  &--active {
+    background-color: $surface-bright;
+    box-shadow: 0 2 5 rgba(0, 0, 0, 0.1);
+  }
+}
+
+.switch-pair-block {
+  margin-bottom: $spacing-xs;
+}
+
+.switch-single-block {
+  margin-bottom: $spacing-xs;
+}
+
+.overlay-item-label {
+  font-size: $font-size;
+}
+
+.switch {
+  width: 50;
+}
+</style>
diff --git a/app/components/AppControlPanel/AppControlPanel.vue b/app/components/AppControlPanel/AppControlPanel.vue
index 6455a09..254ea65 100644
--- a/app/components/AppControlPanel/AppControlPanel.vue
+++ b/app/components/AppControlPanel/AppControlPanel.vue
@@ -5,6 +5,7 @@
     class="app-control-panel"
     width="100%"
     height="100%"
+    :minHeight="screenHeight / 2"
     rows="auto, auto, *"
     columns="*">
 
@@ -23,7 +24,7 @@
         rippleColor="#ffffff"
         class="fa app-control-button"
         :class="{ 'app-control-button--active': isPanelOpen && (activeButton === 'quick' || activeButton === null) }"
-        :text="'fa-bars' | fonticon"
+        :text="$filters.fonticon('fa-bars')"
         @tap="handleControlButtonTap('quick', $event)"
         @pan="handleControlButtonPan('quick', $event)"
       />
@@ -35,7 +36,7 @@
         rippleColor="#ffffff"
         class="fa app-control-button"
         :class="{ 'app-control-button--active': isPanelOpen && activeButton === 'search' }"
-        :text="'fa-search' | fonticon"
+        :text="$filters.fonticon('fa-search')"
         @tap="handleControlButtonTap('search', $event)"
         @pan="handleControlButtonPan('search', $event)"
       />
@@ -46,7 +47,7 @@
         variant="flat"
         rippleColor="#ffffff"
         class="fa app-control-button"
-        :text="locationButtonIcon | fonticon"
+        :text="$filters.fonticon(locationButtonIcon)"
         @tap="onLocate"
       />
 
@@ -57,7 +58,7 @@
         rippleColor="#ffffff"
         class="fa app-control-button"
         :class="{ 'app-control-button--active': isPanelOpen && activeButton === 'layers' }"
-        :text="'fa-layer-group' | fonticon"
+        :text="$filters.fonticon('fa-layer-group')"
         @tap="handleControlButtonTap('layers', $event)"
         @pan="handleControlButtonPan('layers', $event)"
       />
@@ -65,28 +66,19 @@
     </GridLayout>
 
     <!-- content -->
-    <ScrollView row="2" col="0" :height="maxHeight - 64" verticalAlignment="top">
-      <StackLayout class="panel-body">
-        <QuickAccessView
-          v-show="activeButton === 'quick' || activeButton === null"
-        />
-
-        <LayersView
-          v-show="activeButton === 'layers'"
-        />
-
-        <SearchView
-          v-show="activeButton === 'search'"
-        />
-      </StackLayout>
-    </ScrollView>
+    <AppControlListView
+      row="2"
+      col="0"
+      verticalAlignment="top"
+      :height="maxHeight - 64"
+      :listItems="currentListItems"
+    />
   </GridLayout>
 </template>
 
 <script>
-import QuickAccessView from "./components/QuickAccessView.vue";
-import LayersView from "./components/LayersView.vue";
-import SearchView from "./components/SearchView.vue";
+import AppControlListView from "./AppControlListView.vue";
+import { ControlPanelDataService } from "./services/controlPanelDataService.js";
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { buttonGestureHandlerMixin } from './button-gesture-handler';
 
@@ -96,9 +88,7 @@ export default {
   mixins: [buttonGestureHandlerMixin],
 
   components: {
-    QuickAccessView,
-    LayersView,
-    SearchView,
+    AppControlListView,
   },
 
   props: {
@@ -132,10 +122,18 @@ export default {
 
     ...mapState({
       storedActivePanel: state => state.ui.activePanel,
-      isPanelOpen: state => state.ui.panelState.isOpen
+      isPanelOpen: state => state.ui.panelState.isOpen,
+      screenHeight: state => state.ui.screenHeight
     }),
 
-    ...mapGetters('map', ['isFollowingUser'])
+    ...mapGetters('map', ['isFollowingUser']),
+
+    /**
+     * Generate list items for current active button
+     */
+    currentListItems() {
+      return ControlPanelDataService.generateListData(this.activeButton, this.$store);
+    }
   },
 
   data() {
diff --git a/app/components/AppControlPanel/button-gesture-handler.js b/app/components/AppControlPanel/button-gesture-handler.js
index 0a6313c..bc3cece 100644
--- a/app/components/AppControlPanel/button-gesture-handler.js
+++ b/app/components/AppControlPanel/button-gesture-handler.js
@@ -116,7 +116,7 @@ export const buttonGestureHandlerMixin = {
     });
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this._buttonGestureHandler) {
       this._buttonGestureHandler.cleanup();
     }
diff --git a/app/components/AppControlPanel/components/LayersView.vue b/app/components/AppControlPanel/components/LayersView.vue
deleted file mode 100644
index 8446c02..0000000
--- a/app/components/AppControlPanel/components/LayersView.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-//@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
-
-<template>
-  <StackLayout>
-
-    <GridLayout
-      columns="*, 8, *"
-      rows="auto, auto"
-      class="block"
-      v-if="(highlightersList && highlightersList.length > 0) || (baseLayersList && baseLayersList.length > 0)"
-    >
-      <!-- Highlighter column -->
-      <Label
-        col="0"
-        row="0"
-        class="select-label"
-        text="Highlighter"
-        v-if="highlightersList && highlightersList.length > 0"
-      />
-      <SelectField
-        col="0"
-        row="1"
-        :items="highlightersList"
-        :selectedIndex="highlightersList.indexOf(highlighterSelected)"
-        title="Select Highlighter"
-        @change="onHighlighterSelected"
-        v-if="highlightersList && highlightersList.length > 0"
-      />
-
-      <!-- Base layer column -->
-      <Label
-        col="2"
-        row="0"
-        class="select-label"
-        text="Base layer"
-        v-if="baseLayersList && baseLayersList.length > 0"
-      />
-      <SelectField
-        col="2"
-        row="1"
-        :items="baseLayersList"
-        :selectedIndex="baseLayerSelected"
-        idField="layerId"
-        textField="name"
-        title="Select Base Layer"
-        @change="onBaseLayerSelected"
-        v-if="baseLayersList && baseLayersList.length > 0"
-      />
-    </GridLayout>
-
-    <GridLayout
-      columns="*, *, *, *, *, *, *, *, *"
-      rows="50"
-      class="block"
-    >
-        <SVGView
-          class="overlay-portal"
-          :class="{ 'overlay-portal--active': layer.active === true }"
-          :col="index"
-          v-for="(layer, index) in overlayLayers"
-          v-bind:key="layer.layerId"
-          v-if="index <= 8"
-          @tap="onOverlayPortalToggle($event, index)"
-          :src="'~/assets/icons/portals/portal_L'+index+'_'+String(layer.active)+'.svg'"
-          stretch="aspectFit"
-        />
-    </GridLayout>
-
-    <StackLayout class="block">
-      <GridLayout
-        v-for="(row, rowIndex) in pairedItemRows"
-        :key="'row-' + rowIndex"
-        columns="*, 8, *"
-        rows="auto"
-        class="paired-row"
-      >
-        <GridLayout
-          v-for="(item, colIndex) in row"
-          :key="item.layerId"
-          :col="colIndex * 2"
-          class="btn-primary"
-          columns="*, 50"
-          rows="50"
-        >
-          <Label
-            class="overlay-item-label"
-            :text="item.name"
-            @tap="onOverlayToggle(item.index, 'label')"
-            col="0"
-            row="0"
-          />
-          <Switch
-            class="switch"
-            :checked="item.active"
-            @checkedChange="args => onOverlayToggle(item.index, args.value)"
-            col="1"
-            row="0"
-          />
-        </GridLayout>
-      </GridLayout>
-
-      <GridLayout
-        v-for="layer in singleItems"
-        :key="layer.layerId"
-        class="list-item"
-        columns="*, 50"
-        rows="50"
-      >
-        <Label
-          class="overlay-item-label"
-          :text="layer.name"
-          @tap="onOverlayToggle(layer.index, 'label')"
-          col="0"
-          row="0"
-        />
-        <Switch
-          class="switch"
-          :checked="layer.active"
-          @checkedChange="args => onOverlayToggle(layer.index, args.value)"
-          col="1"
-          row="0"
-        />
-      </GridLayout>
-    </StackLayout>
-  </StackLayout>
-</template>
-
-<script>
-  import SelectField from "@/components/base/SelectField.vue";
-  import { mapState } from 'vuex';
-
-  export default {
-    data() {
-      return {
-      }
-    },
-
-    components: {
-      SelectField
-    },
-
-    computed: {
-      ...mapState({
-        baseLayerSelected: state => state.map.baseLayerSelected,
-        baseLayersList: state => state.map.baseLayersList,
-        overlayLayers: state => state.map.overlayLayers,
-        highlightersList: state => state.map.highlightersList,
-        highlighterSelected: state => state.map.highlighterSelected,
-      }),
-      filteredLayers() {
-        return this.overlayLayers
-          .map((layer, index) => ({ ...layer, index }))
-          .filter(layer => layer.index > 8);
-      },
-      pairedItemRows() {
-        const itemsPerRow = 2;
-        const rows = [];
-        const pairedItems = this.filteredLayers.slice(0, 4);
-
-        for (let i = 0; i < pairedItems.length; i += itemsPerRow) {
-          rows.push(pairedItems.slice(i, i + itemsPerRow));
-        }
-
-        return rows;
-      },
-      singleItems() {
-        return this.filteredLayers.slice(4);
-      }
-    },
-
-    methods: {
-      onBaseLayerSelected(args) {
-        const id = args.selectedId;
-        if (id !== undefined && id !== this.baseLayerSelected) {
-          this.$store.dispatch('map/setActiveBaseLayer', id);
-        }
-      },
-
-      onOverlayPortalToggle(e, index) {
-        const active = !this.overlayLayers[index].active;
-        e.object.src = '~/assets/icons/portals/portal_L'+index+'_'+String(active)+'.svg';
-        this.$store.dispatch('map/setOverlayLayerProperty', {index, active});
-      },
-
-      onOverlayToggle(index, value) {
-        if (typeof value === 'boolean') {
-          // Direct value from switch event
-          this.$store.dispatch('map/setOverlayLayerProperty', {index, active: value});
-        } else {
-          // Label tap - toggle current state
-          const currentLayer = this.overlayLayers[index];
-          if (currentLayer) {
-            this.$store.dispatch('map/setOverlayLayerProperty', {index, active: !currentLayer.active});
-          }
-        }
-      },
-
-      onHighlighterSelected(args) {
-        if (args.item) {
-          this.$store.dispatch('map/setActiveHighlighter', args.item);
-        }
-      },
-    }
-  };
-</script>
-
-<style scoped lang="scss">
-  @import '@/app';
-
-  .block {
-    margin-bottom: $spacing-m;
-  }
-
-  .select-label {
-    font-size: $font-small-size;
-  }
-
-  .overlay-portal {
-    margin: $spacing-xs;
-    border-radius: $radius-large;
-    horizontal-align: center;
-
-    &--active {
-      background-color: $surface-bright;
-      box-shadow: 0 2 5 rgba(0, 0, 0, 0.1);
-    }
-  }
-
-  .overlay-item-label {
-    font-size: $font-size;
-  }
-
-  .switch {
-    width: 50;
-  }
-</style>
diff --git a/app/components/AppControlPanel/components/QuickAccessView.vue b/app/components/AppControlPanel/components/QuickAccessView.vue
deleted file mode 100644
index b107a6f..0000000
--- a/app/components/AppControlPanel/components/QuickAccessView.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-//@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
-
-<template>
-  <GridLayout
-    rows="auto, *"
-    columns="*"
-  >
-
-    <GridLayout
-      row="0"
-      col="0"
-      columns="*, *, *, *"
-      class="block"
-    >
-      <!-- Settings Button -->
-      <StackLayout
-        col="0"
-        class="btn"
-        @tap="openSettings"
-      >
-        <Label class="fa icon" :text="'fa-tools' | fonticon" horizontalAlignment="center" />
-        <Label class="text" text="Settings" horizontalAlignment="center" />
-      </StackLayout>
-
-      <!-- Plugins Button -->
-      <StackLayout
-        col="1"
-        class="btn"
-        @tap="openPlugins"
-      >
-        <Label class="fa icon" :text="'fa-toolbox' | fonticon" horizontalAlignment="center" />
-        <Label class="text" text="Plugins" horizontalAlignment="center" />
-      </StackLayout>
-
-      <!-- Debug Button -->
-      <StackLayout
-        col="2"
-        class="btn"
-        :class="{ 'active': isDebugActive }"
-        @tap="toggleDebugMode"
-      >
-        <Label class="fa icon" :class="{ 'active-icon': isDebugActive }" :text="'fa-terminal' | fonticon" horizontalAlignment="center" />
-        <Label class="text" :class="{ 'active-text': isDebugActive }" text="Debug" horizontalAlignment="center" />
-      </StackLayout>
-
-      <!-- Reload Button -->
-      <StackLayout
-        col="3"
-        class="btn"
-        @tap="reloadWebView"
-      >
-        <Label class="fa icon" :text="'fa-redo' | fonticon" horizontalAlignment="center" />
-        <Label class="text" text="Reload IITC" horizontalAlignment="center" />
-      </StackLayout>
-    </GridLayout>
-
-    <StackLayout row="1" col="0">
-      <GridLayout
-        v-for="(pane, index) in filteredPanes"
-        :key="pane.name"
-        class="list-item"
-        columns="auto, *"
-        rows="50"
-        @tap="switchToPane(pane.name)"
-      >
-        <Label class="fa icon" :text="pane.icon | fonticon" col="0" row="0" />
-        <Label class="pane-item-label" :text="pane.label" col="1" row="0" />
-      </GridLayout>
-    </StackLayout>
-
-  </GridLayout>
-</template>
-
-<script>
-  import { mapState } from 'vuex';
-  import SettingsView from '@/components/Settings/SettingsView';
-  import PluginsView from '@/components/Settings/PluginsView';
-
-  export default {
-    data() {
-      return {
-        settingsScreen: SettingsView,
-        pluginsScreen: PluginsView,
-      }
-    },
-
-    computed: {
-      ...mapState({
-        panes: state => state.navigation.panes,
-        isDebugActive: state => state.ui.isDebugActive
-      }),
-
-      filteredPanes() {
-        const START_EXCLUDE = 3;
-        const END_EXCLUDE = 5;
-        return this.panes.filter((_, index) => index < START_EXCLUDE || index >= END_EXCLUDE);
-      },
-    },
-
-    methods: {
-      openSettings() {
-        this.$navigateTo(this.settingsScreen, {
-          animated: true,
-          transition: {
-            name: 'slideLeft',
-            duration: 300
-          }
-        });
-      },
-      reloadWebView() {
-        this.$store.dispatch('ui/reloadWebView');
-      },
-      switchToPane(name) {
-        this.$store.dispatch('navigation/setCurrentPane', name);
-      },
-      toggleDebugMode() {
-        this.$store.dispatch('ui/toggleDebugMode');
-      },
-      openPlugins() {
-        this.$navigateTo(this.pluginsScreen, {
-          animated: true,
-          transition: {
-            name: 'slideLeft',
-            duration: 300
-          }
-        });
-      }
-    }
-  };
-</script>
-
-<style scoped lang="scss">
-  @import '@/app';
-
-  .block {
-    height: 80;
-    margin-bottom: $spacing-m;
-  }
-
-  .btn {
-    font-size: $font-size;
-    text-align: center;
-    padding: 0 $spacing-s;
-
-    &.active {
-      opacity: 0.9;
-    }
-  }
-
-  .btn .icon {
-    margin: 0 0 $spacing-xs 0;
-    width: 54;
-    height: 54;
-    font-size: $font-size-headline;
-    border-radius: $radius-large;
-    color: $on-primary;
-    background-color: $surface-bright;
-    box-shadow: 0 2 4 rgba(0, 0, 0, 0.05);
-
-    &.active-icon {
-      background-color: $primary;
-      color: $on-primary;
-    }
-  }
-
-  .btn .text {
-    &.active-text {
-      color: $primary;
-      font-weight: bold;
-    }
-  }
-
-  .icon {
-    font-size: 18;
-    width: 24;
-    vertical-align: center;
-    text-align: center;
-  }
-
-  .pane-item-label {
-    font-size: $font-size;
-    padding: 15;
-  }
-
-</style>
diff --git a/app/components/AppControlPanel/components/SearchView.vue b/app/components/AppControlPanel/components/SearchView.vue
deleted file mode 100644
index 2b13952..0000000
--- a/app/components/AppControlPanel/components/SearchView.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-//@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
-
-<template>
-  <StackLayout></StackLayout>
-</template>
-
-<script>
-export default {
-  name: 'SearchView',
-}
-</script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/app/components/AppControlPanel/services/controlPanelDataService.js b/app/components/AppControlPanel/services/controlPanelDataService.js
new file mode 100644
index 0000000..4099d49
--- /dev/null
+++ b/app/components/AppControlPanel/services/controlPanelDataService.js
@@ -0,0 +1,145 @@
+//@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
+
+export class ControlPanelDataService {
+  static generateListData(activeButton, store) {
+    switch(activeButton) {
+      case 'quick': 
+      case null: 
+        return this.getQuickAccessData(store);
+      case 'layers': 
+        return this.getLayersData(store);
+      case 'search': 
+        return this.getSearchData(store);
+      default: 
+        return this.getQuickAccessData(store);
+    }
+  }
+  
+  static getQuickAccessData(store) {
+    const data = [
+      {
+        type: 'action-buttons-group',
+        id: 'action-buttons',
+        buttons: [
+          { id: 'settings', icon: 'fa-tools', text: 'Settings' },
+          { id: 'plugins', icon: 'fa-toolbox', text: 'Plugins' },
+          { id: 'debug', icon: 'fa-terminal', text: 'Debug' },
+          { id: 'reload', icon: 'fa-redo', text: 'Reload IITC' }
+        ]
+      }
+    ];
+
+    // Add navigation items from store
+    const filteredPanes = this.getFilteredPanes(store.state.navigation.panes);
+    filteredPanes.forEach(pane => {
+      data.push({
+        type: 'navigation-item',
+        id: pane.name,
+        icon: pane.icon,
+        text: pane.label
+      });
+    });
+
+    return data;
+  }
+  
+  static getLayersData(store) {
+    const data = [];
+
+    // Add select fields group if there are highlighters or base layers
+    const highlightersList = store.state.map.highlightersList;
+    const baseLayersList = store.state.map.baseLayersList;
+    
+    if ((highlightersList && highlightersList.length > 0) || (baseLayersList && baseLayersList.length > 0)) {
+      data.push({
+        type: 'select-fields-group',
+        id: 'select-fields',
+        fields: [
+          { 
+            type: 'highlighter', 
+            label: 'Highlighter', 
+            items: highlightersList,
+            selectedValue: store.state.map.highlighterSelected,
+            visible: highlightersList && highlightersList.length > 0
+          },
+          { 
+            type: 'base-layer', 
+            label: 'Base layer', 
+            items: baseLayersList,
+            selectedIndex: store.state.map.baseLayerSelected,
+            visible: baseLayersList && baseLayersList.length > 0
+          }
+        ]
+      });
+    }
+
+    // Add portal icons group (first 9 overlay layers)
+    const overlayLayers = store.state.map.overlayLayers;
+    if (overlayLayers && overlayLayers.length > 0) {
+      data.push({
+        type: 'portal-icons-group',
+        id: 'portal-icons',
+        portals: overlayLayers.slice(0, 9).map((layer, index) => ({
+          ...layer,
+          index
+        }))
+      });
+
+      // Add switch items for remaining layers
+      const switchItems = this.generateSwitchItems(overlayLayers);
+      data.push(...switchItems);
+    }
+
+    return data;
+  }
+  
+  static getSearchData(store) {
+    // Search view is currently empty
+    return [];
+  }
+
+  static generateSwitchItems(overlayLayers) {
+    const filteredLayers = overlayLayers
+      .map((layer, index) => ({ ...layer, index }))
+      .filter(layer => layer.index > 8);
+
+    const items = [];
+    
+    // First 4 items as pairs (2 per row)
+    const pairedItems = filteredLayers.slice(0, 4);
+    for (let i = 0; i < pairedItems.length; i += 2) {
+      const pair = pairedItems.slice(i, i + 2);
+      if (pair.length === 2) {
+        items.push({
+          type: 'switch-pair',
+          id: `switch-pair-${i/2}`,
+          items: pair
+        });
+      } else if (pair.length === 1) {
+        items.push({
+          type: 'switch-single',
+          id: `switch-single-${pair[0].index}`,
+          item: pair[0]
+        });
+      }
+    }
+
+    // Remaining items as single switches
+    const singleItems = filteredLayers.slice(4);
+    singleItems.forEach(item => {
+      items.push({
+        type: 'switch-single',
+        id: `switch-single-${item.index}`,
+        item
+      });
+    });
+
+    return items;
+  }
+
+  static getFilteredPanes(panes) {
+    const START_EXCLUDE = 3;
+    const END_EXCLUDE = 5;
+    return panes.filter((_, index) => index < START_EXCLUDE || index >= END_EXCLUDE);
+  }
+}
\ No newline at end of file
diff --git a/app/components/AppWebView.vue b/app/components/AppWebView.vue
index 53fbd41..4464aa8 100644
--- a/app/components/AppWebView.vue
+++ b/app/components/AppWebView.vue
@@ -173,7 +173,7 @@ export default {
     });
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.store_unsubscribe();
   }
 };
diff --git a/app/components/BaseWebView.vue b/app/components/BaseWebView.vue
index 8ed4e46..298d59c 100644
--- a/app/components/BaseWebView.vue
+++ b/app/components/BaseWebView.vue
@@ -1,7 +1,7 @@
 //@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
 
 <template>
-  <WebViewExt
+  <AWebView
     ref="webview"
     :src="src"
     :viewPortSize="viewPortSize"
@@ -11,12 +11,11 @@
     @loadFinished="onLoadFinished"
     @loadError="onLoadError"
     @shouldOverrideUrlLoading="onShouldOverrideUrlLoading"
-    @JSBridge="onJSBridge"
   />
 </template>
 
 <script>
-import WebViewExt from '@nota/nativescript-webview-ext/vue'
+import { AWebView } from '@nativescript-community/ui-webview';
 import { isAndroid } from "@nativescript/core";
 import { applyWebViewSettings } from "@/utils/webview/webview-settings";
 import { BaseWebChromeClient } from '@/utils/webview/base-chrome-client';
@@ -123,6 +122,11 @@ export default {
 
       // Setup console log event handlers
       this.setupDebugEventHandlers();
+
+      // Setup JSBridge event handler
+      this.webViewInstance.on('JSBridge', (msg) => {
+        this.$emit('bridge-message', msg.data);
+      });
     },
 
     // Setup event handlers for console bridge
@@ -192,9 +196,6 @@ export default {
       }
     },
 
-    onJSBridge(args) {
-      this.$emit('bridge-message', args.data);
-    },
 
     // Execute JavaScript command in webview
     executeCommand(command) {
@@ -223,7 +224,7 @@ export default {
             this.chromeClient = null;
           }
 
-          const events = ['loaded', 'loadStarted', 'loadFinished', 'loadError', 'shouldOverrideUrlLoading', 'console:log'];
+          const events = ['loaded', 'loadStarted', 'loadFinished', 'loadError', 'shouldOverrideUrlLoading', 'console:log', 'JSBridge'];
           events.forEach(event => {
             try {
               this.webViewInstance.removeEventListener(event);
@@ -265,7 +266,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     try {
       this.cleanupWebView();
 
diff --git a/app/components/DebugConsole/ControlsPanel.vue b/app/components/DebugConsole/ControlsPanel.vue
index 72eaaa8..807c5d3 100644
--- a/app/components/DebugConsole/ControlsPanel.vue
+++ b/app/components/DebugConsole/ControlsPanel.vue
@@ -11,7 +11,7 @@
       <MDButton
         col="0"
         class="fa control-button"
-        :text="'fa-arrow-left' | fonticon"
+        :text="$filters.fonticon('fa-arrow-left')"
         variant="flat"
         rippleColor="#ffffff"
         @tap="handleClose"
@@ -19,7 +19,7 @@
       <MDButton
         col="2"
         class="fa control-button trash"
-        :text="'fa-trash' | fonticon"
+        :text="$filters.fonticon('fa-trash')"
         variant="flat"
         rippleColor="#ffffff"
         @tap="$emit('clear')"
@@ -27,7 +27,7 @@
       <MDButton
         col="3"
         class="fa control-button"
-        :text="'fa-arrow-up' | fonticon"
+        :text="$filters.fonticon('fa-arrow-up')"
         variant="flat"
         rippleColor="#ffffff"
         @tap="navigateHistoryUp"
@@ -35,7 +35,7 @@
       <MDButton
         col="4"
         class="fa control-button"
-        :text="'fa-arrow-down' | fonticon"
+        :text="$filters.fonticon('fa-arrow-down')"
         variant="flat"
         rippleColor="#ffffff"
         @tap="navigateHistoryDown"
@@ -59,7 +59,7 @@
       <MDButton
         col="1"
         class="fa btn-primary send-button"
-        :text="'fa-paper-plane' | fonticon"
+        :text="$filters.fonticon('fa-paper-plane')"
         variant="flat"
         rippleColor="#ffffff"
         @tap="executeCommand"
diff --git a/app/components/DebugConsole/index.vue b/app/components/DebugConsole/index.vue
index f7e1a4a..d2e753c 100644
--- a/app/components/DebugConsole/index.vue
+++ b/app/components/DebugConsole/index.vue
@@ -10,8 +10,9 @@
       :items="displayLogs"
       @scroll="handleScroll"
       @scrollEnd="handleScrollEnd"
+      @loaded="onCollectionViewLoaded"
     >
-      <v-template>
+      <template #default="{ item }">
         <StackLayout
           class="log-item"
           :class="'log-' + item.type"
@@ -24,13 +25,13 @@
           <!-- Message content -->
           <Label :text="item.message" textWrap="true" class="log-message" once="true" />
         </StackLayout>
-      </v-template>
+      </template>
     </CollectionView>
 
     <!-- Controls panel -->
     <ControlsPanel
       row="1"
-      :command.sync="command"
+      v-model:command="command"
       :commandHistory="commandHistory"
       :historyPosition="historyPosition"
       @clear="clearLogs"
@@ -43,7 +44,7 @@
     <MDButton
       v-show="!isAtBottom && showControls"
       class="fa scroll-bottom-button"
-      :text="'fa-arrow-down' | fonticon"
+      :text="$filters.fonticon('fa-arrow-down')"
       variant="flat"
       rippleColor="#ffffff"
       @tap="scrollToBottom"
@@ -91,7 +92,8 @@ export default {
 
       _logFormattingCache: new Cache(200, 600000), // Cache formatted logs for 10 minutes
       _displayLogsCache: null,
-      _lastLogsHash: null
+      _lastLogsHash: null,
+      _collectionView: null
     }
   },
 
@@ -213,14 +215,17 @@ export default {
 
     // Check if the scroll position is at the bottom
     checkScrollPosition() {
-      if (!this.$refs.logsList || !this.displayLogs.length) return;
+      if (!this._collectionView || !this.displayLogs.length) return;
 
       try {
-        const nativeCollectionView = this.$refs.logsList.nativeView;
+        const lastIndex = this.displayLogs.length - 1;
+        const secondToLastIndex = Math.max(0, lastIndex - 1);
 
-        const lastVisibleIndex = nativeCollectionView.findLastVisibleItemIndex();
+        // Check if the last or second-to-last item is visible
+        const isLastVisible = this._collectionView.isItemAtIndexVisible(lastIndex);
+        const isSecondToLastVisible = this._collectionView.isItemAtIndexVisible(secondToLastIndex);
 
-        this.isAtBottom = lastVisibleIndex >= (this.logs.length - 2);
+        this.isAtBottom = isLastVisible || isSecondToLastVisible;
       } catch (e) {
         console.error("Error checking scroll position:", e);
         this.isAtBottom = true;
@@ -230,12 +235,13 @@ export default {
     // Scroll to the bottom of the list
     scrollToBottom() {
       // Skip if not visible or no logs
-      if (!this.isVisible || !this.displayLogs.length || !this.$refs.logsList) return;
+      if (!this.isVisible || !this.displayLogs.length || !this._collectionView) return;
 
       try {
-        // CollectionView has a convenient scrollToIndex method
         const lastIndex = this.displayLogs.length - 1;
-        this.$refs.logsList.scrollToIndex(lastIndex);
+
+        // scrollToIndex(index, animated)
+        this._collectionView.scrollToIndex(lastIndex, true);
         this.isAtBottom = true;
       } catch (e) {
         console.error("Error scrolling to bottom:", e);
@@ -246,6 +252,10 @@ export default {
     closeDebugConsole() {
       this.$store.dispatch('ui/toggleDebugMode');
     },
+
+    onCollectionViewLoaded(args) {
+      this._collectionView = args.object;
+    },
   },
 }
 </script>
diff --git a/app/components/DebugConsole/mixins/touchInteraction.js b/app/components/DebugConsole/mixins/touchInteraction.js
index ac91b78..62fa9a9 100644
--- a/app/components/DebugConsole/mixins/touchInteraction.js
+++ b/app/components/DebugConsole/mixins/touchInteraction.js
@@ -130,7 +130,7 @@ export default {
   },
 
   // Cleanup when component is destroyed
-  beforeDestroy() {
+  beforeUnmount() {
     this.resetTouchState();
   }
 };
diff --git a/app/components/Main.vue b/app/components/Main.vue
index 90882ef..df2d10a 100644
--- a/app/components/Main.vue
+++ b/app/components/Main.vue
@@ -1,7 +1,8 @@
 //@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
 
 <template>
-  <Page actionBarHidden="true">
+  <Frame>
+    <Page actionBarHidden="true">
     <RootLayout ref="rootLayout" height="100%" width="100%" @layoutChanged="onRootLayoutChanged">
       <AbsoluteLayout class="page">
 
@@ -49,7 +50,8 @@
         />
       </AbsoluteLayout>
     </RootLayout>
-  </Page>
+    </Page>
+  </Frame>
 </template>
 
 <script>
@@ -250,7 +252,7 @@ export default {
     });
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     // Clean up all listeners
     if (this.unsubscribeStore) {
       this.unsubscribeStore();
diff --git a/app/components/Settings/PluginsView.vue b/app/components/Settings/PluginsView.vue
index 3b92206..a51ca7e 100644
--- a/app/components/Settings/PluginsView.vue
+++ b/app/components/Settings/PluginsView.vue
@@ -46,6 +46,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { markRaw } from 'vue';
 import { fuzzysearch } from 'scored-fuzzysearch';
 import { performanceOptimizationMixin, createDebouncer } from '~/utils/performance-optimization';
 import SettingsBase from './SettingsBase';
@@ -56,9 +57,9 @@ export default {
   name: 'PluginsView',
 
   components: {
-    SettingsBase,
-    CategoriesList,
-    PluginsList
+    SettingsBase: markRaw(SettingsBase),
+    CategoriesList: markRaw(CategoriesList),
+    PluginsList: markRaw(PluginsList)
   },
 
   mixins: [performanceOptimizationMixin],
diff --git a/app/components/Settings/SettingsBase.vue b/app/components/Settings/SettingsBase.vue
index 7322bb0..5effe80 100644
--- a/app/components/Settings/SettingsBase.vue
+++ b/app/components/Settings/SettingsBase.vue
@@ -17,7 +17,7 @@
         <MDButton
           col="0"
           class="fa back-button"
-          :text="'fa-arrow-left' | fonticon"
+          :text="$filters.fonticon('fa-arrow-left')"
           @tap="goBack"
           variant="flat"
           rippleColor="#ffffff"
@@ -84,7 +84,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     detachBackHandler();
   }
 };
diff --git a/app/components/Settings/components/SettingsItem.vue b/app/components/Settings/components/SettingsItem.vue
index 22185df..a187913 100644
--- a/app/components/Settings/components/SettingsItem.vue
+++ b/app/components/Settings/components/SettingsItem.vue
@@ -24,7 +24,7 @@
       <Label
         v-if="type === 'nav'"
         class="fa settings-nav-icon"
-        :text="'fa-chevron-right' | fonticon"
+        :text="$filters.fonticon('fa-chevron-right')"
         once="true"
       />
 
@@ -47,6 +47,8 @@
 </template>
 
 <script>
+import { $navigateTo } from 'nativescript-vue';
+
 export default {
   name: 'SettingsItem',
 
@@ -94,7 +96,7 @@ export default {
     onTap() {
       if (this.type === 'nav' && this.targetScreen) {
         // Handle navigation
-        this.$navigateTo(this.targetScreen, {
+        $navigateTo(this.targetScreen, {
           props: this.navProps,
           animated: true,
           transition: {
diff --git a/app/components/Settings/components/plugins/PluginsList.vue b/app/components/Settings/components/plugins/PluginsList.vue
index 9112225..f8c5f44 100644
--- a/app/components/Settings/components/plugins/PluginsList.vue
+++ b/app/components/Settings/components/plugins/PluginsList.vue
@@ -14,19 +14,22 @@
     <!-- Plugins collection -->
     <CollectionView
       row="1"
+      class="plugins-list"
       :items="combinedItems"
+      :itemTemplateSelector="templateSelector"
       @itemTap="onItemTap"
-      itemLoadingCachingStrategy="queue"
-      :itemTemplateSelector="selectItemTemplate"
-      class="plugins-list"
     >
       <!-- Template for section headers -->
-      <v-template name="section-header">
-        <Label :text="item.title" class="section-header" once="true" />
-      </v-template>
+      <template #section-header="{ item }">
+        <Label
+          :text="item.title"
+          class="section-header"
+          once="true"
+        />
+      </template>
 
       <!-- Template for plugin items -->
-      <v-template name="plugin">
+      <template #plugin="{ item }">
         <GridLayout
           class="plugin-item"
           columns="auto, *, auto"
@@ -58,7 +61,7 @@
             isUserInteractionEnabled="false"
           />
         </GridLayout>
-      </v-template>
+      </template>
     </CollectionView>
 
     <!-- Empty list message -->
@@ -153,7 +156,7 @@ export default {
 
   methods: {
     // Template selector function - determines which template to use
-    selectItemTemplate(item, index, items) {
+    templateSelector(item, index, items) {
       return item.type === 'section-header' ? 'section-header' : 'plugin';
     },
 
diff --git a/app/components/SlidingPanel/MapStateBar.vue b/app/components/SlidingPanel/MapStateBar.vue
index c0a3cce..89342e0 100644
--- a/app/components/SlidingPanel/MapStateBar.vue
+++ b/app/components/SlidingPanel/MapStateBar.vue
@@ -61,7 +61,7 @@ export default {
     this._weakPanelRef = new WeakRef(this.panelRef);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.cleanup();
   },
 
diff --git a/app/components/SlidingPanel/SlidingPanel.vue b/app/components/SlidingPanel/SlidingPanel.vue
index ca75138..8e50f96 100644
--- a/app/components/SlidingPanel/SlidingPanel.vue
+++ b/app/components/SlidingPanel/SlidingPanel.vue
@@ -345,7 +345,7 @@ export default {
     });
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     try {
       if (this.removeLayoutListener) {
         this.removeLayoutListener();
diff --git a/app/components/SlidingPanel/mixins/panelController.js b/app/components/SlidingPanel/mixins/panelController.js
index 4dc3629..0a4f79d 100644
--- a/app/components/SlidingPanel/mixins/panelController.js
+++ b/app/components/SlidingPanel/mixins/panelController.js
@@ -1,7 +1,6 @@
 //@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
 
-import { CoreTypes, Animation } from "@nativescript/core";
-import { AnimationPool, globalRAFBatcher } from '~/utils/performance-optimization';
+import { CoreTypes } from "@nativescript/core";
 import { PanelPositions } from '../constants/panelPositions';
 import { PanelStateMachine } from '../state/panelStateMachine';
 
@@ -108,28 +107,19 @@ export const panelControllerMixin = {
         // Lock animation to prevent interference
         this.isAnimating = true;
 
-        // Force element into a consistent starting state
-        panel.translateY = 0;
-        panel.top = fromTop;
-
         // Ensure our local tracking is consistent
         this.panelCurrentTop = fromTop;
 
         // Calculate amount to move
         const translateY = targetTop - fromTop;
 
-        // Create animation using global object pool
-        const animConfig = AnimationPool.get();
-        animConfig[0].target = panel;
-        animConfig[0].translate.y = translateY;
-        animConfig[0].duration = PANEL_CONSTANTS.ANIMATION_DURATION;
-        animConfig[0].curve = PANEL_CONSTANTS.ANIMATION_CURVE;
-        this.animationSet = new Animation(animConfig);
+        await panel.animate({
+          translate: { x: 0, y: translateY },
+          duration: PANEL_CONSTANTS.ANIMATION_DURATION,
+          curve: PANEL_CONSTANTS.ANIMATION_CURVE
+        });
 
-        // Play animation and wait for completion
-        await this.animationSet.play();
-
-        // Set final position with direct manipulation
+        // Set final position after animation
         panel.translateY = 0;
         panel.top = targetTop;
 
@@ -145,11 +135,6 @@ export const panelControllerMixin = {
         return fromTop;
       } finally {
         this.isAnimating = false;
-        // Return animation config to global pool and clear reference
-        if (this.animationSet && this.animationSet._animations) {
-          AnimationPool.return(this.animationSet._animations);
-        }
-        this.animationSet = undefined;
       }
     },
 
@@ -157,29 +142,25 @@ export const panelControllerMixin = {
      * Cancel current animation
      */
     cancelAnimation() {
-      if (this.animationSet && this.isAnimating) {
-        this.animationSet.cancel();
-        // Return animation config to global pool
-        if (this.animationSet._animations) {
-          AnimationPool.return(this.animationSet._animations);
+      if (this.isAnimating) {
+        // Cancel animation on the panel element
+        const panel = this.getPanelElement();
+        if (panel && panel.cancelAnimation) {
+          panel.cancelAnimation();
         }
-        this.animationSet = undefined;
         this.isAnimating = false;
       }
     },
 
     /**
-     * Batch DOM updates using requestAnimationFrame
+     * Update panel position immediately during gestures
      */
     updatePanelPosition(newTop) {
-      const updateKey = `panel-${this.$options._uid || 'default'}`;
-      globalRAFBatcher.schedule(updateKey, () => {
-        const panel = this.getPanelElement();
-        if (panel) {
-          panel.top = newTop;
-          this.panelCurrentTop = newTop;
-        }
-      });
+      const panel = this.getPanelElement();
+      if (panel) {
+        panel.top = newTop;
+        this.panelCurrentTop = newTop;
+      }
     },
 
     /**
@@ -329,7 +310,7 @@ export const panelControllerMixin = {
             bottomBoundary
           );
 
-          // Use batched updates for smooth performance
+          // Update position immediately for responsive gesture
           this.updatePanelPosition(finalTop);
           break;
 
@@ -387,7 +368,7 @@ export const panelControllerMixin = {
           );
 
           // Update panel position
-          // Use batched updates for smooth performance
+          // Update position immediately for responsive gesture
           this.updatePanelPosition(finalTop);
           break;
 
@@ -412,13 +393,7 @@ export const panelControllerMixin = {
      */
     panelControllerCleanup() {
       this.cancelAnimation();
-
-      // Cancel pending RAF updates using global batcher
-      const updateKey = `panel-${this.$options._uid || 'default'}`;
-      globalRAFBatcher.cancel(updateKey);
-
       this.stateMachine = null;
-      this.animationSet = null;
     }
   },
 
diff --git a/app/components/base/SelectField.vue b/app/components/base/SelectField.vue
index 24939a7..240669e 100644
--- a/app/components/base/SelectField.vue
+++ b/app/components/base/SelectField.vue
@@ -73,7 +73,7 @@ export default {
       try {
         // Convert items to string array for radio dialog
         const dialogItems = this.items.map(item => this.getItemText(item));
-        
+
         const result = await RadioDialog.show({
           title: this.title,
           items: dialogItems,
@@ -151,7 +151,7 @@ export default {
 }
 
 .select-icon {
-  width: 18;
+  width: 24;
   font-size: 14;
   text-align: center;
   color: $primary-light;
diff --git a/app/store/index.js b/app/store/index.js
index 4211874..d45b33e 100644
--- a/app/store/index.js
+++ b/app/store/index.js
@@ -1,7 +1,6 @@
 //@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
 
-import Vue from 'nativescript-vue';
-import Vuex from 'vuex';
+import { createStore } from 'vuex';
 import { ui } from './modules/ui';
 import { navigation } from './modules/navigation';
 import { map } from './modules/map';
@@ -9,11 +8,9 @@ import { debug } from './modules/debug';
 import { manager } from './modules/manager';
 import { settings } from './modules/settings';
 
-Vue.use(Vuex);
-
 const debug_enabled = process.env.NODE_ENV !== 'production';
 
-export default new Vuex.Store({
+export default createStore({
   modules: {
     ui,
     navigation,
diff --git a/app/utils/bridge.js b/app/utils/bridge.js
index fd79dde..bed262c 100644
--- a/app/utils/bridge.js
+++ b/app/utils/bridge.js
@@ -67,8 +67,10 @@ export const router = async (event) => {
       // This event is handled by direct listeners in BaseWebView
       break;
     default:
-      console.debug("Unknown event in JSBridge router");
-      console.debug(event);
+      console.debug('[Bridge Router] Unknown event in JSBridge router');
+      console.debug('[Bridge Router] Unknown event:', event);
+      console.debug('[Bridge Router] Unknown eventName:', eventName);
+      console.debug('[Bridge Router] Unknown eventData:', eventData);
   }
 }
 
diff --git a/app/utils/performance-optimization.js b/app/utils/performance-optimization.js
index 0d15238..32d572a 100644
--- a/app/utils/performance-optimization.js
+++ b/app/utils/performance-optimization.js
@@ -40,30 +40,6 @@ export class ObjectPool {
   }
 }
 
-/**
- * Global animation configuration pool
- */
-export const AnimationPool = new ObjectPool(
-  () => [{
-    target: null,
-    translate: { x: 0, y: 0 },
-    opacity: 1,
-    scale: { x: 1, y: 1 },
-    duration: 300,
-    curve: 'easeInOut'
-  }],
-  (config) => {
-    config[0].target = null;
-    config[0].translate.x = 0;
-    config[0].translate.y = 0;
-    config[0].opacity = 1;
-    config[0].scale.x = 1;
-    config[0].scale.y = 1;
-    config[0].duration = 300;
-    config[0].curve = 'easeInOut';
-  }
-);
-
 /**
  * Global RAF batching manager
  * Batches DOM updates to reduce layout thrashing
@@ -304,7 +280,7 @@ export const performanceOptimizationMixin = {
     this._rafUpdateKey = `${this.$options.name || 'component'}-${Date.now()}-${Math.random()}`;
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.performanceCleanup();
   },
 
diff --git a/package.json b/package.json
index 8224ade..6d21364 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "android": "ns run android",
     "clean": "ns clean",
     "build": "ns build android --release",
-    "lint": "ns build android --no-copy && echo 'Syntax check passed'"
+    "lint": "ns build android --no-copy && echo 'Syntax check passed'",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@bezlepkin/nativescript-keyboard-opening": "^1.0.1",
@@ -20,11 +21,10 @@
     "@nativescript-community/ui-material-dialogs": "^7.2.71",
     "@nativescript-community/ui-material-ripple": "^7.2.71",
     "@nativescript-community/ui-svg": "^0.2.11",
-    "@nativescript-community/ui-webview": "^1.5.0",
+    "@nativescript-community/ui-webview": "^1.5.2",
     "@nativescript/appversion": "^2.0.0",
     "@nativescript/core": "~8.8.2",
     "@nativescript/theme": "^3.1.0",
-    "@nota/nativescript-webview-ext": "^8.0.2",
     "@nstudio/nativescript-checkbox": "^2.0.5",
     "@triniwiz/nativescript-image-cache-it": "^7.5.0",
     "@triniwiz/nativescript-toasty": "^4.1.3",
@@ -34,18 +34,19 @@
     "nativescript-compass": "^1.0.1",
     "nativescript-inappbrowser": "^3.2.0",
     "nativescript-radio-dialog": "^1.0.4",
-    "nativescript-vue": "^2.9.3",
+    "nativescript-vue": "^3.0.1",
     "nativescript-vue-devtools": "^1.5.1",
     "scored-fuzzysearch": "^1.0.5",
     "url-parse": "^1.5.10",
-    "vuex": "^3.6.2"
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@nativescript/android": "^8.8.5",
     "@nativescript/ios": "8.9.2",
     "@nativescript/webpack": "~5.0.22",
     "@triniwiz/nativescript-socketio": "^4.0.1",
-    "nativescript-vue-template-compiler": "^2.9.3",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
     "typescript": "^5.6.3",
     "util": "^0.12.5"
   }
diff --git a/patches/@nativescript-community+ui-webview+1.5.2.patch b/patches/@nativescript-community+ui-webview+1.5.2.patch
new file mode 100644
index 0000000..a76e9ea
--- /dev/null
+++ b/patches/@nativescript-community+ui-webview+1.5.2.patch
@@ -0,0 +1,38 @@
+diff --git a/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.android.js b/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.android.js
+index caf8645..929281c 100644
+--- a/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.android.js
++++ b/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.android.js
+@@ -1,3 +1,3 @@
+-export const webViewBridge = "class e{constructor(){this.t={}}onNativeEvent(e,t){const n=this.t[e];if(null==n?void 0:n.length)for(const e of n)if(!1===(null==e?void 0:e(t)))break}on(e,t){if(!t)return;let n=this.t[e];n||(n=this.t[e]=[]),n.push(t)}addEventListener(e,t){this.on(e,t)}off(e,t){if(!e)return void(this.t={});let n=this.t[e];n&&(t?(n=this.t[e]=n.filter((e=>e!==t)),0===n.length&&delete this.t[e]):delete this.t[e])}removeEventListener(e,t){return this.off(e,t)}emit(e,t){this.emitEvent(e,JSON.stringify(t))}async injectJavaScriptFile(e){const t=this.elementIdFromHref(e);if(!document.getElementById(t))return new Promise(((n,i)=>{const r=document.createElement(\"script\");r.async=!0,r.setAttribute(\"id\",t),r.addEventListener(\"error\",(e=>{i(this.serializeError(e)),r.parentElement&&r.parentElement.removeChild(r)})),r.addEventListener(\"load\",(function(){window.requestAnimationFrame((()=>{n()})),r.parentElement&&r.parentElement.removeChild(r)})),r.src=e,document.body.appendChild(r)}))}async injectJavaScript(e,t){if(!document.getElementById(e))return new Promise(((n,i)=>{const r=document.createElement(\"script\");r.setAttribute(\"id\",e),r.addEventListener(\"error\",(function(e){i(e),r.parentElement&&r.parentElement.removeChild(r)})),r.text=t,document.body.appendChild(r),window.requestAnimationFrame((()=>n()))}))}async injectStyleSheetFile(e,t){const n=this.elementIdFromHref(e);if(!document.getElementById(n))return new Promise(((i,r)=>{const o=document.createElement(\"link\");o.addEventListener(\"error\",(e=>{r(e),o.parentElement&&o.parentElement.removeChild(o)})),o.addEventListener(\"load\",(()=>{window.requestAnimationFrame((()=>{i()}))})),o.setAttribute(\"id\",n),o.setAttribute(\"rel\",\"stylesheet\"),o.setAttribute(\"type\",\"text/css\"),o.setAttribute(\"href\",e),document.head&&(t&&document.head.childElementCount>0?document.head.insertBefore(o,document.head.firstElementChild):document.head.appendChild(o))}))}async injectStyleSheet(e,t,n){if(!document.getElementById(e))return new Promise(((i,r)=>{var o;const s=document.createElement(\"style\");s.addEventListener(\"error\",r),s.textContent=t,s.setAttribute(\"id\",e);const d=null!==(o=document.head)&&void 0!==o?o:document.body;d?(n&&d.childElementCount>0?document.head.insertBefore(s,d.firstElementChild):document.head.appendChild(s),i()):r(new Error(\"Couldn't find parent element\"))}))}async executePromise(e,t){try{const n=await e;this.emit(t,{data:n})}catch(e){this.emitError(e,t)}}emitError(e,t=\"web-error\"){\"object\"==typeof e&&(null==e?void 0:e.message)?this.emit(t,{err:this.serializeError(e)}):this.emit(t,{err:e})}elementIdFromHref(e){return e.replace(/^[:]*:\\/\\//,\"\").replace(/[^a-z0-9]/g,\"\")}serializeError(e){const{name:t,message:n,stack:i,...r}=e;return Object.keys(r).reduce(((e,t)=>{const n=r[t];return n instanceof HTMLElement||(e[t]=n),e}),{name:t,message:n,stack:i})}}class t extends e{get androidWebViewBridge(){if(\"undefined\"!=typeof androidWebViewBridge)return androidWebViewBridge}emitEvent(e,t){this.androidWebViewBridge.emitEvent(e,t)}}const n=\"ns-bridge-ready\",i=window;if(!i.nsWebViewBridge){i.nsWebViewBridge=new t;for(const e of[n,\"ns-brige-ready\"])\"undefined\"!=typeof CustomEvent?window.dispatchEvent(new CustomEvent(e,{detail:i.nsWebViewBridge})):window.dispatchEvent(new Event(e))}";
++export const webViewBridge = '(function(){"use strict";' + "class e{constructor(){this.t={}}onNativeEvent(e,t){const n=this.t[e];if(null==n?void 0:n.length)for(const e of n)if(!1===(null==e?void 0:e(t)))break}on(e,t){if(!t)return;let n=this.t[e];n||(n=this.t[e]=[]),n.push(t)}addEventListener(e,t){this.on(e,t)}off(e,t){if(!e)return void(this.t={});let n=this.t[e];n&&(t?(n=this.t[e]=n.filter(e=>e!==t),0===n.length&&delete this.t[e]):delete this.t[e])}removeEventListener(e,t){return this.off(e,t)}emit(e,t){this.emitEvent(e,JSON.stringify(t))}async injectJavaScriptFile(e){const t=this.elementIdFromHref(e);if(!document.getElementById(t))return new Promise((n,i)=>{const r=document.createElement(\"script\");r.async=!0,r.setAttribute(\"id\",t),r.addEventListener(\"error\",e=>{i(this.serializeError(e)),r.parentElement&&r.parentElement.removeChild(r)}),r.addEventListener(\"load\",function(){window.requestAnimationFrame(()=>{n()}),r.parentElement&&r.parentElement.removeChild(r)}),r.src=e,document.body.appendChild(r)})}async injectJavaScript(e,t){if(!document.getElementById(e))return new Promise((n,i)=>{const r=document.createElement(\"script\");r.setAttribute(\"id\",e),r.addEventListener(\"error\",function(e){i(e),r.parentElement&&r.parentElement.removeChild(r)}),r.text=t,document.body.appendChild(r),window.requestAnimationFrame(()=>n())})}async injectStyleSheetFile(e,t){const n=this.elementIdFromHref(e);if(!document.getElementById(n))return new Promise((i,r)=>{const o=document.createElement(\"link\");o.addEventListener(\"error\",e=>{r(e),o.parentElement&&o.parentElement.removeChild(o)}),o.addEventListener(\"load\",()=>{window.requestAnimationFrame(()=>{i()})}),o.setAttribute(\"id\",n),o.setAttribute(\"rel\",\"stylesheet\"),o.setAttribute(\"type\",\"text/css\"),o.setAttribute(\"href\",e),document.head&&(t&&document.head.childElementCount>0?document.head.insertBefore(o,document.head.firstElementChild):document.head.appendChild(o))})}async injectStyleSheet(e,t,n){if(!document.getElementById(e))return new Promise((i,r)=>{var o;const s=document.createElement(\"style\");s.addEventListener(\"error\",r),s.textContent=t,s.setAttribute(\"id\",e);const d=null!==(o=document.head)&&void 0!==o?o:document.body;d?(n&&d.childElementCount>0?document.head.insertBefore(s,d.firstElementChild):document.head.appendChild(s),i()):r(new Error(\"Couldn't find parent element\"))})}async executePromise(e,t){try{const n=await e;this.emit(t,{data:n})}catch(e){this.emitError(e,t)}}emitError(e,t=\"web-error\"){\"object\"==typeof e&&(null==e?void 0:e.message)?this.emit(t,{err:this.serializeError(e)}):this.emit(t,{err:e})}elementIdFromHref(e){return e.replace(/^[:]*:\\/\\//,\"\").replace(/[^a-z0-9]/g,\"\")}serializeError(e){const{name:t,message:n,stack:i,...r}=e;return Object.keys(r).reduce((e,t)=>{const n=r[t];return n instanceof HTMLElement||(e[t]=n),e},{name:t,message:n,stack:i})}}class t extends e{get androidWebViewBridge(){if(\"undefined\"!=typeof androidWebViewBridge)return androidWebViewBridge}emitEvent(e,t){this.androidWebViewBridge.emitEvent(e,t)}}const n=\"ns-bridge-ready\",i=window;if(!i.nsWebViewBridge){i.nsWebViewBridge=new t;for(const e of[n,\"ns-brige-ready\"])\"undefined\"!=typeof CustomEvent?window.dispatchEvent(new CustomEvent(e,{detail:i.nsWebViewBridge})):window.dispatchEvent(new Event(e))}" + '})();';
+ export const metadataViewPort = "!function(e){const i={initialScale:1},a=e.document;let t=a.querySelector('head meta[name=\"viewport\"]');t||(t=a.createElement(\"meta\"),t.setAttribute(\"name\",\"viewport\"),a.head.appendChild(t));let l=\"<%= VIEW_PORT %>\";l&&\"string\"!=typeof l||(l=i);const{initialScale:n=i.initialScale,width:s,height:c,userScalable:m,minimumScale:o,maximumScale:u}=l,r=[`initial-scale=${n}`];if(s&&r.push(`width=${s}`),c&&r.push(`height=${c}`),\"boolean\"==typeof m)r.push(\"user-scalable=\"+(m?\"yes\":\"no\"));else if(\"string\"==typeof m){const e=`${m}`.toLowerCase();\"yes\"===e?r.push(\"user-scalable=yes\"):\"no\"===e&&r.push(\"user-scalable=no\")}o&&r.push(`minimum-scale=${o}`),u&&r.push(`maximum-scale=${u}`),t.setAttribute(\"content\",r.join(\", \"))}(window);";
+ //# sourceMappingURL=nativescript-webview-bridge-loader.android.js.map
+\ No newline at end of file
+diff --git a/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.android.js.map b/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.android.js.map
+index 95e1782..3dd8677 100644
+--- a/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.android.js.map
++++ b/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.android.js.map
+@@ -1 +1 @@
+-{"version":3,"file":"nativescript-webview-bridge-loader.android.js","sourceRoot":"","sources":["../../src/webview/nativescript-webview-bridge-loader.android.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,aAAa,GAAW,guGAAguG,CAAC;AACtwG,MAAM,CAAC,MAAM,gBAAgB,GAAW,0vBAA0vB,CAAC"}
+\ No newline at end of file
++{"version":3,"file":"nativescript-webview-bridge-loader.android.js","sourceRoot":"","sources":["../../src/webview/nativescript-webview-bridge-loader.android.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,aAAa,GAAW,2BAA2B,GAAG,osGAAosG,GAAG,OAAO,CAAC;AAClxG,MAAM,CAAC,MAAM,gBAAgB,GAAW,0vBAA0vB,CAAC"}
+\ No newline at end of file
+diff --git a/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.ios.js b/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.ios.js
+index 3c493f8..448aebe 100644
+--- a/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.ios.js
++++ b/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.ios.js
+@@ -1,3 +1,3 @@
+-export const webViewBridge = "class e{constructor(){this.t={}}onNativeEvent(e,t){const n=this.t[e];if(null==n?void 0:n.length)for(const e of n)if(!1===(null==e?void 0:e(t)))break}on(e,t){if(!t)return;let n=this.t[e];n||(n=this.t[e]=[]),n.push(t)}addEventListener(e,t){this.on(e,t)}off(e,t){if(!e)return void(this.t={});let n=this.t[e];n&&(t?(n=this.t[e]=n.filter((e=>e!==t)),0===n.length&&delete this.t[e]):delete this.t[e])}removeEventListener(e,t){return this.off(e,t)}emit(e,t){this.emitEvent(e,JSON.stringify(t))}async injectJavaScriptFile(e){const t=this.elementIdFromHref(e);if(!document.getElementById(t))return new Promise(((n,o)=>{const i=document.createElement(\"script\");i.async=!0,i.setAttribute(\"id\",t),i.addEventListener(\"error\",(e=>{o(this.serializeError(e)),i.parentElement&&i.parentElement.removeChild(i)})),i.addEventListener(\"load\",(function(){window.requestAnimationFrame((()=>{n()})),i.parentElement&&i.parentElement.removeChild(i)})),i.src=e,document.body.appendChild(i)}))}async injectJavaScript(e,t){if(!document.getElementById(e))return new Promise(((n,o)=>{const i=document.createElement(\"script\");i.setAttribute(\"id\",e),i.addEventListener(\"error\",(function(e){o(e),i.parentElement&&i.parentElement.removeChild(i)})),i.text=t,document.body.appendChild(i),window.requestAnimationFrame((()=>n()))}))}async injectStyleSheetFile(e,t){const n=this.elementIdFromHref(e);if(!document.getElementById(n))return new Promise(((o,i)=>{const r=document.createElement(\"link\");r.addEventListener(\"error\",(e=>{i(e),r.parentElement&&r.parentElement.removeChild(r)})),r.addEventListener(\"load\",(()=>{window.requestAnimationFrame((()=>{o()}))})),r.setAttribute(\"id\",n),r.setAttribute(\"rel\",\"stylesheet\"),r.setAttribute(\"type\",\"text/css\"),r.setAttribute(\"href\",e),document.head&&(t&&document.head.childElementCount>0?document.head.insertBefore(r,document.head.firstElementChild):document.head.appendChild(r))}))}async injectStyleSheet(e,t,n){if(!document.getElementById(e))return new Promise(((o,i)=>{var r;const s=document.createElement(\"style\");s.addEventListener(\"error\",i),s.textContent=t,s.setAttribute(\"id\",e);const c=null!==(r=document.head)&&void 0!==r?r:document.body;c?(n&&c.childElementCount>0?document.head.insertBefore(s,c.firstElementChild):document.head.appendChild(s),o()):i(new Error(\"Couldn't find parent element\"))}))}async executePromise(e,t){try{const n=await e;this.emit(t,{data:n})}catch(e){this.emitError(e,t)}}emitError(e,t=\"web-error\"){\"object\"==typeof e&&(null==e?void 0:e.message)?this.emit(t,{err:this.serializeError(e)}):this.emit(t,{err:e})}elementIdFromHref(e){return e.replace(/^[:]*:\\/\\//,\"\").replace(/[^a-z0-9]/g,\"\")}serializeError(e){const{name:t,message:n,stack:o,...i}=e;return Object.keys(i).reduce(((e,t)=>{const n=i[t];return n instanceof HTMLElement||(e[t]=n),e}),{name:t,message:n,stack:o})}}function t(){var e,t;const n=window;if(null===(t=null===(e=null==n?void 0:n.webkit)||void 0===e?void 0:e.messageHandlers)||void 0===t?void 0:t.nsBridge)return n.webkit.messageHandlers.nsBridge}class n extends e{emitEvent(e,n){const o=t();o&&o.postMessage(JSON.stringify({eventName:e,data:n}))}}const o=\"ns-bridge-ready\",i=window;if(!i.nsWebViewBridge){i.nsWebViewBridge=new n;for(const e of[o,\"ns-brige-ready\"])\"undefined\"!=typeof CustomEvent?window.dispatchEvent(new CustomEvent(e,{detail:i.nsWebViewBridge})):window.dispatchEvent(new Event(e))}";
++export const webViewBridge = '(function(){"use strict";' + "class e{constructor(){this.t={}}onNativeEvent(e,t){const n=this.t[e];if(null==n?void 0:n.length)for(const e of n)if(!1===(null==e?void 0:e(t)))break}on(e,t){if(!t)return;let n=this.t[e];n||(n=this.t[e]=[]),n.push(t)}addEventListener(e,t){this.on(e,t)}off(e,t){if(!e)return void(this.t={});let n=this.t[e];n&&(t?(n=this.t[e]=n.filter(e=>e!==t),0===n.length&&delete this.t[e]):delete this.t[e])}removeEventListener(e,t){return this.off(e,t)}emit(e,t){this.emitEvent(e,JSON.stringify(t))}async injectJavaScriptFile(e){const t=this.elementIdFromHref(e);if(!document.getElementById(t))return new Promise((n,o)=>{const i=document.createElement(\"script\");i.async=!0,i.setAttribute(\"id\",t),i.addEventListener(\"error\",e=>{o(this.serializeError(e)),i.parentElement&&i.parentElement.removeChild(i)}),i.addEventListener(\"load\",function(){window.requestAnimationFrame(()=>{n()}),i.parentElement&&i.parentElement.removeChild(i)}),i.src=e,document.body.appendChild(i)})}async injectJavaScript(e,t){if(!document.getElementById(e))return new Promise((n,o)=>{const i=document.createElement(\"script\");i.setAttribute(\"id\",e),i.addEventListener(\"error\",function(e){o(e),i.parentElement&&i.parentElement.removeChild(i)}),i.text=t,document.body.appendChild(i),window.requestAnimationFrame(()=>n())})}async injectStyleSheetFile(e,t){const n=this.elementIdFromHref(e);if(!document.getElementById(n))return new Promise((o,i)=>{const r=document.createElement(\"link\");r.addEventListener(\"error\",e=>{i(e),r.parentElement&&r.parentElement.removeChild(r)}),r.addEventListener(\"load\",()=>{window.requestAnimationFrame(()=>{o()})}),r.setAttribute(\"id\",n),r.setAttribute(\"rel\",\"stylesheet\"),r.setAttribute(\"type\",\"text/css\"),r.setAttribute(\"href\",e),document.head&&(t&&document.head.childElementCount>0?document.head.insertBefore(r,document.head.firstElementChild):document.head.appendChild(r))})}async injectStyleSheet(e,t,n){if(!document.getElementById(e))return new Promise((o,i)=>{var r;const s=document.createElement(\"style\");s.addEventListener(\"error\",i),s.textContent=t,s.setAttribute(\"id\",e);const c=null!==(r=document.head)&&void 0!==r?r:document.body;c?(n&&c.childElementCount>0?document.head.insertBefore(s,c.firstElementChild):document.head.appendChild(s),o()):i(new Error(\"Couldn't find parent element\"))})}async executePromise(e,t){try{const n=await e;this.emit(t,{data:n})}catch(e){this.emitError(e,t)}}emitError(e,t=\"web-error\"){\"object\"==typeof e&&(null==e?void 0:e.message)?this.emit(t,{err:this.serializeError(e)}):this.emit(t,{err:e})}elementIdFromHref(e){return e.replace(/^[:]*:\\/\\//,\"\").replace(/[^a-z0-9]/g,\"\")}serializeError(e){const{name:t,message:n,stack:o,...i}=e;return Object.keys(i).reduce((e,t)=>{const n=i[t];return n instanceof HTMLElement||(e[t]=n),e},{name:t,message:n,stack:o})}}function t(){var e,t;const n=window;if(null===(t=null===(e=null==n?void 0:n.webkit)||void 0===e?void 0:e.messageHandlers)||void 0===t?void 0:t.nsBridge)return n.webkit.messageHandlers.nsBridge}class n extends e{emitEvent(e,n){const o=t();o&&o.postMessage(JSON.stringify({eventName:e,data:n}))}}const o=\"ns-bridge-ready\",i=window;if(!i.nsWebViewBridge){i.nsWebViewBridge=new n;for(const e of[o,\"ns-brige-ready\"])\"undefined\"!=typeof CustomEvent?window.dispatchEvent(new CustomEvent(e,{detail:i.nsWebViewBridge})):window.dispatchEvent(new Event(e))}" + '})();';
+ export const metadataViewPort = "!function(e){const i={initialScale:1},a=e.document;let t=a.querySelector('head meta[name=\"viewport\"]');t||(t=a.createElement(\"meta\"),t.setAttribute(\"name\",\"viewport\"),a.head.appendChild(t));let l=\"<%= VIEW_PORT %>\";l&&\"string\"!=typeof l||(l=i);const{initialScale:n=i.initialScale,width:s,height:c,userScalable:m,minimumScale:o,maximumScale:u}=l,r=[`initial-scale=${n}`];if(s&&r.push(`width=${s}`),c&&r.push(`height=${c}`),\"boolean\"==typeof m)r.push(\"user-scalable=\"+(m?\"yes\":\"no\"));else if(\"string\"==typeof m){const e=`${m}`.toLowerCase();\"yes\"===e?r.push(\"user-scalable=yes\"):\"no\"===e&&r.push(\"user-scalable=no\")}o&&r.push(`minimum-scale=${o}`),u&&r.push(`maximum-scale=${u}`),t.setAttribute(\"content\",r.join(\", \"))}(window);";
+ //# sourceMappingURL=nativescript-webview-bridge-loader.ios.js.map
+\ No newline at end of file
+diff --git a/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.ios.js.map b/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.ios.js.map
+index ba1249d..178ad51 100644
+--- a/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.ios.js.map
++++ b/node_modules/@nativescript-community/ui-webview/nativescript-webview-bridge-loader.ios.js.map
+@@ -1 +1 @@
+-{"version":3,"file":"nativescript-webview-bridge-loader.ios.js","sourceRoot":"","sources":["../../src/webview/nativescript-webview-bridge-loader.ios.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,aAAa,GAAW,s1GAAs1G,CAAC;AAC53G,MAAM,CAAC,MAAM,gBAAgB,GAAW,0vBAA0vB,CAAC"}
+\ No newline at end of file
++{"version":3,"file":"nativescript-webview-bridge-loader.ios.js","sourceRoot":"","sources":["../../src/webview/nativescript-webview-bridge-loader.ios.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,aAAa,GAAW,2BAA2B,GAAG,0zGAA0zG,GAAG,OAAO,CAAC;AACx4G,MAAM,CAAC,MAAM,gBAAgB,GAAW,0vBAA0vB,CAAC"}
+\ No newline at end of file