From adf7b0df5040c1e1746f8b6ee66e8e656ea3d0c9 Mon Sep 17 00:00:00 2001
From: Xaviju <xavier.julian@kaleidos.net>
Date: Thu, 25 Sep 2025 12:52:43 +0200
Subject: [PATCH] :tada: Add visibility panel to inspect styles tab (#7362)

---
 frontend/src/app/main/ui/inspect/styles.cljs  | 25 +++++++++-
 .../ui/inspect/styles/panels/visibility.cljs  | 46 +++++++++++++++++++
 2 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/main/ui/inspect/styles/panels/visibility.cljs

diff --git a/frontend/src/app/main/ui/inspect/styles.cljs b/frontend/src/app/main/ui/inspect/styles.cljs
index 14321160ac..98eed8281e 100644
--- a/frontend/src/app/main/ui/inspect/styles.cljs
+++ b/frontend/src/app/main/ui/inspect/styles.cljs
@@ -1,3 +1,9 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
 (ns app.main.ui.inspect.styles
   (:require-macros [app.main.style :as stl])
   (:require
@@ -15,6 +21,7 @@
    [app.main.ui.inspect.styles.panels.layout-element :refer [layout-element-panel*]]
    [app.main.ui.inspect.styles.panels.tokens-panel :refer [tokens-panel*]]
    [app.main.ui.inspect.styles.panels.variants-panel :refer [variants-panel*]]
+   [app.main.ui.inspect.styles.panels.visibility :refer [visibility-panel*]]
    [app.main.ui.inspect.styles.style-box :refer [style-box*]]
    [app.util.code-gen.style-css :as css]
    [app.util.i18n :refer [tr]]
@@ -85,7 +92,15 @@
             (ctob/get-tokens-in-active-sets tokens-lib)
             {}))
         resolved-active-tokens
-        (sd/use-resolved-tokens* active-tokens)]
+        (sd/use-resolved-tokens* active-tokens)
+        has-visibility-props? (mf/use-fn
+                               (fn [shape]
+                                 (let [shape-type (:type shape)]
+                                   (and
+                                    (not (or (= shape-type :text) (= shape-type :group)))
+                                    (or (:opacity shape)
+                                        (:blend-mode shape)
+                                        (:visibility shape))))))]
     [:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")}
      ;;  TOKENS PANEL
      (when (or active-themes active-sets)
@@ -146,6 +161,14 @@
                                 :objects objects
                                 :resolved-tokens resolved-active-tokens}]]))
 
+          ;; VISIBILITY PANEL
+          :visibility
+          (let [shapes (filter has-visibility-props? shapes)]
+            (when (seq shapes)
+              [:> style-box* {:panel :visibility}
+               [:> visibility-panel* {:shapes shapes
+                                      :objects objects
+                                      :resolved-tokens resolved-active-tokens}]]))
           ;; DEFAULT WIP
           [:> style-box* {:panel panel}
            [:div color-space]])])]))
diff --git a/frontend/src/app/main/ui/inspect/styles/panels/visibility.cljs b/frontend/src/app/main/ui/inspect/styles/panels/visibility.cljs
new file mode 100644
index 0000000000..4325329026
--- /dev/null
+++ b/frontend/src/app/main/ui/inspect/styles/panels/visibility.cljs
@@ -0,0 +1,46 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.inspect.styles.panels.visibility
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.inspect.attributes.common :as cmm]
+   [app.main.ui.inspect.styles.rows.properties-row :refer [properties-row*]]
+   [app.util.code-gen.style-css :as css]
+   [rumext.v2 :as mf]))
+
+(def ^:private properties
+  [:opacity
+   :blend-mode])
+
+(defn- get-applied-tokens-in-shape
+  [shape-tokens property]
+  (get shape-tokens property))
+
+(defn- get-resolved-token
+  [property shape resolved-tokens]
+  (let [shape-tokens (:applied-tokens shape)
+        applied-tokens-in-shape (get-applied-tokens-in-shape shape-tokens property)
+        token (get resolved-tokens applied-tokens-in-shape)]
+    token))
+
+(mf/defc visibility-panel*
+  [{:keys [shapes objects resolved-tokens]}]
+  [:div {:class (stl/css :visibility-panel)}
+   (for [shape shapes]
+     [:div {:key (:id shape) :class "visibility-shape"}
+      (for [property properties]
+        (when-let [value (css/get-css-value objects shape property)]
+          (let [property-name (cmm/get-css-rule-humanized property)
+                resolved-token (get-resolved-token property shape resolved-tokens)
+                property-value (if (not resolved-token) (css/get-css-property objects shape property) "")]
+            [:> properties-row* {:key (dm/str "visibility-property-" property)
+                                 :term property-name
+                                 :detail (dm/str value)
+                                 :token resolved-token
+                                 :property property-value
+                                 :copiable true}])))])])