📎 Add two more debug options :display-touched and :show-ids

frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs

@@ -109,6 +109,8 @@
          :style {"--depth" depth "--parent-size" parent-size}
          :ref ref
          :on-double-click start-edit}
-        (d/nilv shape-name "")]
+        (if (dbg/enabled? :show-ids)
+          (str (d/nilv shape-name "") " | " (str/slice (str shape-id) 24))
+          (d/nilv shape-name ""))]
        (when (and (dbg/enabled? :show-touched) ^boolean shape-touched?)
          [:span {:class (stl/css :element-name-touched)} "*"])])))

frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs

@@ -26,6 +26,7 @@
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
+   [app.util.debug :as dbg]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.timers :as tm]
@@ -639,4 +640,6 @@
             [:& component-swap {:shapes copies}])
 
           (when (and (not swap-opened?) (not multi) components-v2)
-            [:& component-annotation {:id id :shape shape :component component}])])])))
+            [:& component-annotation {:id id :shape shape :component component}])
+          (when (dbg/enabled? :display-touched)
+            [:div ":touched " (str (:touched shape))])])])))

frontend/src/app/util/debug.cljs

@@ -73,6 +73,9 @@
     ;; Show an asterisk for touched copies
     :show-touched
 
+    ;; Show the id with the name
+    :show-ids
+
     ;;
     :grid-layout
 
@@ -80,7 +83,10 @@
     :grid-cells
 
     ;; Show info about shapes
-    :shape-panel})
+    :shape-panel
+
+    ;; Show what is touched in copies
+    :display-touched})
 
 (defn enable!
   [option]