enhance: add icons for different types of properties

src/main/frontend/components/db_based/page.cljs

@@ -157,7 +157,6 @@
         (if collapsed?
           (when (or (seq (:block/properties page))
                     (and class? (seq (:class/schema.properties page))))
-            [:div {:style {:margin-left 5}}
-             (page-properties page {:mode @*mode})])
+            (page-properties page {:mode @*mode}))
           [:div.px-3
            (page-configure page *mode)])]])))

src/main/frontend/components/page.css

@@ -391,7 +391,7 @@ html.is-native-ios {
 }
 
 .page-info {
-  @apply ml-[-10px] border rounded-md;
+  @apply ml-[-4px] border rounded-md;
 
   &-inner {
     @apply py-2;

src/main/frontend/components/property.cljs

@@ -416,6 +416,22 @@
                       :on-chosen on-chosen
                       :input-opts input-opts})]]))
 
+(rum/defc property-icon
+  [property property-type]
+  (let [type (or (get-in property [:block/schema :type] property-type) :default)
+        icon (case type
+               :number "hash"
+               :date "calendar"
+               :checkbox "checkbox"
+               :url "link"
+               :page "file"
+               ;; TODO: math-lower not supported yet
+               :object "math-lower"
+               :template "template"
+               "letter-t")]
+    (ui/icon icon {:class "opacity-50"
+                   :size 15})))
+
 (rum/defcs property-input < rum/reactive
   (rum/local false ::show-new-property-config?)
   (rum/local {} ::property-schema)
@@ -448,7 +464,7 @@
        (let [property (db/get-case-page @*property-key)]
          [:div.ls-property-add.grid.grid-cols-5.gap-1.flex.flex-1.flex-row.items-center
           [:div.flex.flex-row.items-center.col-span-2.property-key.gap-1
-           [:div [:span.bullet-container.cursor [:span.bullet]]]
+           (property-icon property (:type @*property-schema))
            [:div @*property-key]]
           [:div.col-span-3.flex.flex-row {:on-pointer-down (fn [e] (util/stop-propagation e))}
            (if @*show-new-property-config?
@@ -552,9 +568,7 @@
                               (assoc :class "flex items-center"))
                           (if icon
                             (icon-component/icon icon)
-                            [:div
-                             [:span.bullet-container.cursor (when collapsed? {:class "bullet-closed"})
-                             [:span.bullet]]]))))
+                            (property-icon property nil)))))
 
      (if config/publishing?
        [:a.property-k.flex.select-none.jtrigger

src/main/frontend/components/repo.cljs

@@ -389,7 +389,7 @@
                                          (js/console.error error)))))
                            (reset! *creating-db? false)
                            (shui/dialog-close!))))))]
-    [:div.new-graph.flex.flex-col.p-4.gap-4
+    [:div.new-graph.flex.flex-col.gap-4.p-1.pt-2
      (shui/input
        {:value @*graph-name
         :disabled @*creating-db?