enhance(mobile): polish search page

src/main/mobile/components/app.css

@@ -426,21 +426,20 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
 
 .app-silk-search-page {
   > .hd {
-    @apply fixed top-0 left-0 px-4 pb-2.5 w-full;
-    @apply border-b bg-gray-02 dark:bg-gray-01;
+    @apply fixed top-0 left-0 px-4 py-2.5 w-full bg-gray-01;
 
-    padding-top: calc(env(safe-area-inset-top, 0px) - 2px);
+    padding-top: calc(env(safe-area-inset-top, 0px) + 4px);
     z-index: 1;
     transition: padding 0.1s ease-in-out;
 
     .ls-icon-search {
-      @apply absolute left-2.5 top-[9px] opacity-60;
+      @apply absolute left-2.5 top-[11px] opacity-60;
     }
 
     .cancel {
-      @apply absolute right-0.5 opacity-0;
+      @apply absolute right-0.5 opacity-0 text-base;
 
-      bottom: 5px;
+      bottom: 11px;
     }
 
     &.input-focused {
@@ -461,9 +460,9 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
     }
 
     .ui__input {
-      @apply border-none dark:bg-gray-02 bg-gray-04 pl-9 outline-none ring-0;
+      @apply border-none dark:bg-gray-02 bg-gray-04 pl-9 outline-none ring-0 text-base rounded-full;
 
-      height: 34px;
+      height: 40px;
       outline-offset: 0;
       box-shadow: none;
     }
@@ -472,22 +471,12 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
       @apply absolute right-6 w-[16px] h-[16px] bg-gray-10 overflow-hidden
       rounded-full flex items-center justify-center text-gray-02 opacity-50;
 
-      bottom: 18px;
+      bottom: 22px;
     }
   }
 
   > .bd {
-    @apply -mx-4 pt-4;
-
-    ul {
-      &.as-results > li {
-        @apply border-b py-1 -mx-4 px-3;
-
-        &:active {
-          @apply opacity-80 bg-gray-02;
-        }
-      }
-    }
+    @apply -mx-4 mt-8;
   }
 }
 

src/main/mobile/components/search.cljs

@@ -24,7 +24,7 @@
                                                     :extract-fn :block/title})
           items (keep (fn [block]
                         (if (:page? block)
-                          (cmdk/page-item repo block)
+                          (assoc (cmdk/page-item repo block) :page? true)
                           (cmdk/block-item repo block nil input))) blocks)]
     items))
 
@@ -61,15 +61,15 @@
      [(hooks/use-debounced-value input 150)])
 
     (hooks/use-effect!
-      (fn []
-        (if focused?
-          (let [input (rum/deref *ref)
-                scroll-cnt (some-> input (.closest ".app-silk-index-scroll-content") (.-parentNode))
-                handle! (fn [] (some-> input (.blur)))]
-            (.addEventListener scroll-cnt "scroll" handle!)
-            #(.removeEventListener scroll-cnt "scroll" handle!))
-          #()))
-      [focused?])
+     (fn []
+       (if focused?
+         (let [input (rum/deref *ref)
+               scroll-cnt (some-> input (.closest ".app-silk-index-scroll-content") (.-parentNode))
+               handle! (fn [] (some-> input (.blur)))]
+           (.addEventListener scroll-cnt "scroll" handle!)
+           #(.removeEventListener scroll-cnt "scroll" handle!))
+         #()))
+     [focused?])
 
     [:div.app-silk-search-page
      [:div.hd
@@ -107,9 +107,9 @@
      [:div.bd
       (when (and (string/blank? input) (seq recents))
         [:div.mb-4
-         [:div.px-4.text-sm.text-muted-foreground.border-b
-          [:div.flex.flex-item.items-center.justify-between.py-1
-           "Recent search"
+         [:div.px-4.text-sm.font-medium.text-muted-foreground
+          [:div.flex.flex-item.items-center.justify-between.mt-2
+           "Recent"
            (shui/button
             {:variant :text
              :size :sm
@@ -117,19 +117,19 @@
              :on-click (fn []
                          (search-handler/clear-recents!)
                          (set-recents! nil))}
-            "Clear all")]]
+            "Clear")]]
 
-         [:ul.px-3
-          (for [item recents]
-            [:li.flex.gap-1
+         (for [item recents]
+           [:div.px-2
+            (ui/menu-link
              {:on-click #(set-input! item)}
-             item])]])
+             item)])])
 
       [:ul.px-3
        {:class (when (and (not (string/blank? input))
                           (seq search-result))
                  "as-results")}
-       (for [{:keys [icon text header source-block]} result]
+       (for [{:keys [page? icon text header source-block]} result]
          (let [block source-block]
            [:li.flex.gap-1
             {:on-click (fn []
@@ -141,9 +141,9 @@
                              (when block (mobile-state/open-block-modal! block)))))}
             [:div.flex.flex-col.gap-1.py-1
              (when header
-               [:div.opacity-50.text-sm
+               [:div.opacity-60.text-sm
                 header])
              [:div.flex.flex-row.items-start.gap-1
-              (when icon (ui/icon icon {:size 15
-                                        :class "text-muted-foreground mt-1"}))
+              (when (and page? icon) (ui/icon icon {:size 15
+                                                    :class "text-muted-foreground mt-1"}))
               [:div text]]]]))]]]))