enhance(mobile): improve topbar layout

src/main/mobile/components/app.cljs

@@ -223,13 +223,11 @@
 
             (= tab "settings")
             (assoc
-              :left-render (shui/button {:variant :icon :size :sm}
-                             (shui/tabler-icon "chevron-left" {:size 22}))
               :right-render [:<>
                              (shui/button {:variant :icon :size :sm}
-                               (shui/tabler-icon "plus" {:size 22}))
+                               (shui/tabler-icon "plus" {:size 23}))
                              (shui/button {:variant :icon :size :sm}
-                               (shui/tabler-icon "dots" {:size 22}))])))
+                               (shui/tabler-icon "dots" {:size 23}))])))
 
         ;; app tabs
         (ui-silk/app-silk-tabs)

src/main/mobile/components/app.css

@@ -274,7 +274,15 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
 
 .app-silk-topbar {
   @apply fixed top-0 left-0 w-full border-b bg-gray-02 dark:bg-gray-01
-  justify-between items-center overflow-hidden grid grid-cols-8 gap-4;
+  flex justify-between items-center overflow-hidden;
+
+  &[data-center-title] {
+    @apply grid grid-cols-8 gap-4;
+
+    > .as-left, .as-right {
+      @apply col-span-2;
+    }
+  }
 
   padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
   height: 48px;
@@ -285,7 +293,7 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
   }
 
   > .as-left, .as-right {
-    @apply flex items-center col-span-2 gap-2 px-2;
+    @apply flex items-center gap-2 px-2;
 
     .ui__button {
       @apply opacity-70 px-1;
@@ -300,9 +308,9 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
     @apply justify-end;
   }
 
-  > .title {
+  .title {
     @apply font-semibold overflow-hidden text-ellipsis whitespace-nowrap col-span-4
-    block text-center text-lg;
+    block text-center text-lg pl-1 opacity-90 tracking-wide;
   }
 }
 

src/main/mobile/components/ui_silk.cljs

@@ -4,11 +4,16 @@
             [rum.core :as rum]))
 
 (rum/defc app-silk-topbar
-  [{:keys [left-render right-render title props]}]
-  [:div.app-silk-topbar props
-   [:div.as-left (if (fn? left-render)
-                   (left-render) left-render)]
-   [:strong.title title]
+  [{:keys [left-render right-render title props center-title?]}]
+  [:div.app-silk-topbar
+   (cond-> props
+     (boolean center-title?)
+     (assoc :data-center-title true))
+   [:div.as-left
+    (if (fn? left-render)
+      (left-render) left-render)
+    (when (not center-title?) [:span.title title])]
+   (when center-title? [:span.title title])
    [:div.as-right (if (fn? right-render)
                     (right-render) right-render)]])