From c2c5dbee0cc747a10884069c56fb5135d65c9f4e Mon Sep 17 00:00:00 2001
From: Tienson Qin <tiensonqin@gmail.com>
Date: Tue, 28 Apr 2026 16:24:01 +0800
Subject: [PATCH] fix(publish): match app status icon styles and alignment

fixes https://github.com/logseq/db-test/issues/819
---
 deps/publish/src/logseq/publish/publish.css | 44 ++++++++++++++++++---
 deps/publish/src/logseq/publish/publish.js  |  2 +-
 deps/publish/src/logseq/publish/render.cljs | 16 +++++---
 3 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/deps/publish/src/logseq/publish/publish.css b/deps/publish/src/logseq/publish/publish.css
index b2b55ff1cd..b82b97b280 100644
--- a/deps/publish/src/logseq/publish/publish.css
+++ b/deps/publish/src/logseq/publish/publish.css
@@ -72,6 +72,10 @@ body {
   letter-spacing: 0.01em;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .publish-home {
   display: flex;
   align-items: center;
@@ -474,6 +478,7 @@ a:hover {
   display: flex;
   gap: 4px;
   align-items: flex-start;
+  min-height: 26px;
 }
 
 .positioned-properties {
@@ -486,7 +491,10 @@ a:hover {
 .positioned-properties.block-left, .positioned-properties.block-right {
   display: flex;
   align-items: center;
-  margin-top: 2px;
+}
+
+.block-content > .positioned-properties.block-left {
+  align-self: center;
 }
 
 .positioned-properties.block-right {
@@ -520,16 +528,40 @@ a:hover {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1rem;
-  height: 1rem;
+  width: 18px;
+  height: 18px;
   line-height: 1;
-  font-size: 1rem;
+  font-size: 18px;
   color: currentColor;
 }
 
 .property-icon svg {
-  width: 1rem;
-  height: 1rem;
+  width: 18px;
+  height: 18px;
+}
+
+.positioned-properties .ls-icon-Backlog {
+  color: var(--rx-gray-05, #a8a29e);
+}
+
+.positioned-properties .ls-icon-Todo {
+  color: var(--rx-gray-10, #78716c);
+}
+
+.positioned-properties .ls-icon-InProgress50 {
+  color: var(--rx-yellow-08, #ca8a04);
+}
+
+.positioned-properties .ls-icon-InReview {
+  color: var(--rx-blue-09, #1d4ed8);
+}
+
+.positioned-properties .ls-icon-Done {
+  color: var(--rx-green-08, #16a34a);
+}
+
+.positioned-properties .ls-icon-Cancelled {
+  color: var(--rx-red-08, #dc2626);
 }
 
 .property-value-with-icon {
diff --git a/deps/publish/src/logseq/publish/publish.js b/deps/publish/src/logseq/publish/publish.js
index 1366fb2f98..0a14b141bc 100644
--- a/deps/publish/src/logseq/publish/publish.js
+++ b/deps/publish/src/logseq/publish/publish.js
@@ -151,7 +151,7 @@ const getTablerExtIcon = (id) => {
 const renderTablerExtIcon = (el, id) => {
   const iconFn = getTablerExtIcon(id);
   if (!iconFn) return false;
-  const node = iconFn({ size: 14, stroke: 2 });
+  const node = iconFn({ size: 18 });
   if (!node) return false;
   el.textContent = "";
   const domNode = reactNodeToDom(node);
diff --git a/deps/publish/src/logseq/publish/render.cljs b/deps/publish/src/logseq/publish/render.cljs
index 9a628b1c37..00fbc6976e 100644
--- a/deps/publish/src/logseq/publish/render.cljs
+++ b/deps/publish/src/logseq/publish/render.cljs
@@ -11,7 +11,7 @@
             [logseq.publish.model :as publish-model]))
 
 ;; Timestamp in milliseconds used for cache busting static assets.
-(defonce version 1767194868810)
+(defonce version 1777363019629)
 
 (def ref-regex
   (js/RegExp. "\\[\\[([0-9a-fA-F-]{36})\\]\\]|\\(\\(([0-9a-fA-F-]{36})\\)\\)" "g"))
@@ -100,13 +100,19 @@
 (defn- icon-span
   [icon]
   (when (and (map? icon) (string? (:id icon)) (not (string/blank? (:id icon))))
+    (let [icon-type (:type icon)
+          icon-id (:id icon)
+          class-name (str "property-icon"
+                          (when (and (= :tabler-icon icon-type)
+                                     (not (string/blank? icon-id)))
+                            (str " ls-icon-" icon-id)))]
     [:span
      (cond->
-      {:class "property-icon"
+      {:class class-name
        :data-icon-id (:id icon)
        :data-icon-type (name (:type icon))}
        (:color icon)
-       (assoc :style (str "color: " (:color icon) ";")))]))
+       (assoc :style (str "color: " (:color icon) ";")))])))
 
 (defn- with-icon
   [icon nodes]
@@ -445,12 +451,12 @@
          [:div.positioned-property
           [:span.property-name (property-title k (:property-title-by-ident ctx))]
           [:span.property-value
-           (into [:span] (positioned-value-nodes v k ctx entities))]])]
+           (into [:span.inline-flex] (positioned-value-nodes v k ctx entities))]])]
 
       [:div {:class (str "positioned-properties " (name position))}
        (for [[k v] (sorted-properties props ctx)]
          [:span.positioned-property
-          (into [:span] (positioned-value-nodes v k ctx entities))])])))
+          (into [:span.inline-flex] (positioned-value-nodes v k ctx entities))])])))
 
 (def ^:private youtube-regex #"^((?:https?:)?//)?((?:www|m).)?((?:youtube.com|youtu.be|y2u.be|youtube-nocookie.com))(/(?:[\w-]+\?v=|embed/|v/)?)([\w-]+)([\S^\?]+)?$")
 (def ^:private vimeo-regex #"^((?:https?:)?//)?((?:www).)?((?:player.vimeo.com|vimeo.com))(/(?:video/)?)([\w-]+)(\S+)?$")