enhance(mobile): improve safe area for topbar/tabbar

capacitor.config.ts

@@ -9,7 +9,7 @@ const config: CapacitorConfig = {
   webDir: 'static/mobile',
   loggingBehavior: 'debug',
   server: {
-      androidScheme: 'http',
+    androidScheme: 'http',
   },
   plugins: {
     StatusBar: {
@@ -28,6 +28,16 @@ const config: CapacitorConfig = {
 
     Keyboard: {
       resize: 'none'
+    },
+
+    SafeArea: {
+      enabled: true,
+      customColorsForSystemBars: true,
+      statusBarColor: '#000000',
+      statusBarContent: 'light',
+      navigationBarColor: '#000000',
+      navigationBarContent: 'light',
+      offset: 0
     }
   },
   android: {

gulpfile.js

@@ -132,8 +132,7 @@ const common = {
         'node_modules/@logseq/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm',
       ]).pipe(gulp.dest(path.join(outputPath, 'mobile', 'js'))),
       () => gulp.src([
-        'packages/ui/dist/ionic/*.js',
-        'packages/ui/dist/silkhq/*'
+        'packages/ui/dist/silkhq/*',
       ]).pipe(gulp.dest(path.join(outputPath, 'mobile'))),
     )(...params)
   },
@@ -206,20 +205,22 @@ const common = {
     cb()
   },
 
-  switchReactDevelopmentMode(cb) {
+  switchReactDevelopmentMode (cb) {
     try {
-      const reactFrom = path.join(outputPath, 'js', 'react.development.js');
-      const reactTo = path.join(outputPath, 'js', 'react.production.min.js');
-      fs.renameSync(reactFrom, reactTo);
+      const reactFrom = path.join(outputPath, 'js', 'react.development.js')
+      const reactTo = path.join(outputPath, 'js', 'react.production.min.js')
+      fs.renameSync(reactFrom, reactTo)
 
-      const reactDomFrom = path.join(outputPath, 'js', 'react-dom.development.js');
-      const reactDomTo = path.join(outputPath, 'js', 'react-dom.production.min.js');
-      fs.renameSync(reactDomFrom, reactDomTo);
+      const reactDomFrom = path.join(outputPath, 'js',
+        'react-dom.development.js')
+      const reactDomTo = path.join(outputPath, 'js',
+        'react-dom.production.min.js')
+      fs.renameSync(reactDomFrom, reactDomTo)
 
-      cb();
+      cb()
     } catch (err) {
-      console.error("Error during switchReactDevelopmentMode:", err);
-      cb(err);
+      console.error('Error during switchReactDevelopmentMode:', err)
+      cb(err)
     }
   },
 }

package.json

@@ -112,6 +112,7 @@
         "@capacitor/share": "7.0.1",
         "@capacitor/splash-screen": "7.0.1",
         "@capacitor/status-bar": "7.0.1",
+        "@capacitor-community/safe-area": "7.0.0-alpha.1",
         "@capawesome/capacitor-background-task": "7.0.1",
         "@capgo/capacitor-navigation-bar": "7.1.2",
         "@dnd-kit/core": "^6.0.8",
@@ -121,8 +122,6 @@
         "@excalidraw/excalidraw": "0.16.1",
         "@glidejs/glide": "^3.6.0",
         "@highlightjs/cdn-assets": "10.4.1",
-        "@ionic/core": "^8.5.4",
-        "@ionic/react": "^8.5.4",
         "@isomorphic-git/lightning-fs": "^4.6.0",
         "@js-joda/core": "3.2.0",
         "@js-joda/locale_en-us": "3.1.1",

src/main/frontend/mobile/index.css

@@ -29,10 +29,12 @@
   @apply fixed -bottom-1 left-0 w-full z-[99999] flex justify-between bg-gray-100 border-t border-gray-200
   dark:border-gray-800 dark:bg-[#222];
 
+  /*
   will-change: transform;
   transform: translateY(calc(-1 * var(--ls-native-kb-height, 0)));
   opacity: var(--ls-native-toolbar-opacity, 0);
   transition: transform 250ms ease-out, opacity 50ms ease-out;
+   */
 
   button {
     @apply flex items-center py-2 px-2 opacity-95;

src/main/mobile/components/app.cljs

@@ -56,7 +56,7 @@
      (shui/button
        {:variant :text
         :size :sm
-        :class "ml-1 text-primary !font-semibold !opacity-80"
+        :class "ml-1 text-primary !font-semibold !opacity-90 text-base"
         :on-click (fn []
                     (let [buttons (concat
                                     (->>
@@ -182,8 +182,10 @@
             {:class "silk-scroll-view"
              :pageScroll true
              :nativePageScrollReplacement true}
-            (silkhq/scroll-content {:class "app-silk-index-scroll-content"}
+            (silkhq/scroll-content
+              {:class "app-silk-index-scroll-content"}
               [:div.app-silk-index-container
+               {:data-tab (str tab)}
                (case (keyword tab)
                  :home
                  (home *home tab)

src/main/mobile/components/app.css

@@ -14,24 +14,23 @@ html.is-native-ios {
 }
 
 html.is-native-android {
-
   .pswp__top-bar {
     @apply relative top-8;
   }
 }
 
-html.plt-mobile {
-  button {
-    /* fix ionic default style */
-    border-style: solid;
-  }
+#mobile-editor-toolbar {
+  @apply opacity-0 delay-100;
+  bottom: calc(var(--safe-area-inset-bottom) - 2px);
 }
 
 html.has-mobile-keyboard {
-  .ion-page:not(.ion-page-hidden) {
-    & > ion-content::part(scroll) {
-      padding-bottom: 512px !important;
-    }
+  .app-silk-tabs {
+    display: none;
+  }
+
+  #mobile-editor-toolbar {
+    @apply opacity-100;
   }
 }
 
@@ -39,46 +38,14 @@ html {
   &[data-theme=dark] {
     &[data-color=logseq] {
       --background: var(--ls-primary-background-color);
-      --ion-item-background: var(--ls-primary-background-color);
-      --ion-text-color: var(--ls-primary-text-color);
-      --ion-toolbar-color: var(--ls-link-text-color);
-      --ion-item-color: var(--ls-primary-text-color);
-      --ion-item-border-color: var(--ls-border-color);
 
       input, textarea {
         caret-color: var(--ls-primary-text-color);
       }
 
-      ion-toolbar::part(background), ion-tab-bar,
-      ion-tab-button, ion-header {
-        background-color: var(--lx-gray-01);
-      }
-
-      ion-modal {
-        --background: var(--lx-gray-01);
-        --backdrop-color: var(--ls-secondary-background-color);
-      }
-
       #mobile-editor-toolbar {
         background: var(--ls-secondary-background-color);
       }
-
-      .action-sheet-group.sc-ion-action-sheet-ios,
-      .alert-wrapper.sc-ion-alert-ios {
-        --background: var(--ls-primary-background-color);
-        --button-background: var(--ls-primary-background-color);
-        --button-color: var(--ls-primary-text-color);
-      }
-
-      .header-md {
-        box-shadow: 0 2px 8px var(--ls-secondary-background-color);
-      }
-
-      .sc-ion-buttons-ios, .sc-ion-buttons-md {
-        &.text-muted-foreground {
-          color: var(--lx-gray-02);
-        }
-      }
     }
   }
 }
@@ -95,17 +62,6 @@ ul {
   @apply bg-gray-01;
 }
 
-ion-textarea {
-  textarea {
-    @apply !p-1 min-h-[120px];
-  }
-}
-
-ion-buttons {
-  &:has(.app-graph-select) {
-    @apply max-w-[60%] overflow-hidden;
-  }
-}
 
 .pswp__top-bar {
   @apply top-8;
@@ -123,20 +79,6 @@ ion-buttons {
   }
 }
 
-.app-graph-select {
-  ion-button {
-    &::part(native) {
-      @apply whitespace-nowrap overflow-hidden font-semibold active:opacity-80 pr-8;
-    }
-  }
-}
-
-.sc-ion-buttons-md {
-  &.text-muted-foreground {
-    @apply text-gray-600;
-  }
-}
-
 .app-login-modal {
   @apply mx-8 p-0;
 }
@@ -179,19 +121,6 @@ ion-buttons {
   @apply min-h-[25px];
 }
 
-ion-tab-bar {
-  box-shadow: 0 0 1px #999999;
-  padding-top: 4px;
-
-  ion-tab-button {
-    @apply opacity-70;
-
-    &.tab-selected {
-      @apply opacity-100 text-accent-11 font-semibold;
-    }
-  }
-}
-
 .app-silk-popup-sheet-view {
   .ls-property-dialog {
     .ls-property-input, .property-key {
@@ -244,13 +173,6 @@ ion-tab-bar {
   }
 }
 
-[type='text']:focus, [type='email']:focus, [type='url']:focus,
-[type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus,
-[type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus,
-[multiple]:focus, textarea:focus, select:focus {
-  box-shadow: none;
-}
-
 .ui__popover-content, .ui__dropdown-menu-content {
   &[data-editor-popup-ref=page-search],
   &[data-editor-popup-ref=page-search-hashtag],
@@ -268,16 +190,6 @@ ion-tab-bar {
   }
 }
 
-html[data-color=logseq] {
-  &[data-theme=light] {
-    --ion-color-primary: var(--rx-logseq-11);
-  }
-}
-
-.graph-switcher .action-sheet-button {
-  font-size: 1.125em;
-}
-
 @container ls-block (max-width: 430px) {
   .block-modal-page .ls-properties-area {
     display: initial;
@@ -285,11 +197,11 @@ html[data-color=logseq] {
 }
 
 .property-key {
-  min-width: 0px;
+  min-width: 0;
 }
 
 .property-block-container {
-  margin-left: 0px;
+  margin-left: 0;
 }
 
 .ls-page-title .ls-page-icon svg, .ls-page-title .ls-page-icon button {
@@ -346,6 +258,10 @@ html[data-color=logseq] {
 .app-silk-index-container {
   @apply p-4 flex flex-col gap-3 bg-gray-01;
 
+  &[data-tab=search] {
+    --silk-topbar-height: 8px;
+  }
+
   padding-top: calc(env(safe-area-inset-top, 0px) + var(--silk-topbar-height) + 10px);
 }
 
@@ -365,7 +281,7 @@ html[data-color=logseq] {
     @apply flex items-center col-span-2 gap-2 px-2;
 
     .ui__button {
-      @apply opacity-50 px-1;
+      @apply opacity-70 px-1;
 
       &:active {
         @apply opacity-80;
@@ -379,7 +295,7 @@ html[data-color=logseq] {
 
   > .title {
     @apply font-semibold overflow-hidden text-ellipsis whitespace-nowrap col-span-4
-    block text-center;
+    block text-center text-lg;
   }
 }
 
@@ -392,7 +308,7 @@ html[data-color=logseq] {
 
   > .as-item {
     @apply flex flex-1 flex-col items-center pb-1 transition-opacity;
-    @apply opacity-40 active:opacity-70;
+    @apply opacity-50 active:opacity-70;
 
     &.active {
       @apply text-accent-10 opacity-100;
@@ -433,5 +349,3 @@ html[data-color=logseq] {
     @apply -mx-4 pt-2;
   }
 }
-
-

tailwind.mobile.css

@@ -15,7 +15,6 @@
 @import "codemirror/theme/solarized.css";
 @import "resources/css/tabler-extension.css";
 @import "@tabler/icons-webfont/tabler-icons.min.css";
-@import "node_modules/@ionic/react/css/palettes/dark.class.css";
 @import "src/main/frontend/animations.css";
 @import "src/main/frontend/common.css";
 @import "src/main/frontend/ui.css";