fix(editor): replace hidden layer badge with eye-off icon (#149)

DavidBabinec · web-flow · commit c57b2b0e3848 · 2026-07-02T10:47:42.000+02:00
diff --git a/src/__tests__/panels/domPanel.test.tsx b/src/__tests__/panels/domPanel.test.tsx
@@ -25,6 +25,7 @@ import { join } from 'path'
 import React from 'react'
 import { render, screen, cleanup, fireEvent, act, waitFor } from '@testing-library/react'
 import { DomPanel } from '@site/panels/DomPanel/DomPanel'
+import { LayerTreeNodeContent } from '@site/panels/DomPanel/LayerTreeNodeContent'
 import { useEditorStore } from '@site/store/store'
 import { makeSite, makePage, makeNode, makeVC, makeVCNode, makeVCTree } from '../fixtures'
 
@@ -424,6 +425,32 @@ describe('DomPanel — tree accessibility', () => {
     expect(source).toContain('treeDropStyles.dropInvalid')
   })
 
+  it('hidden layer rows render a muted eye-off icon instead of a text badge', () => {
+    const { container } = render(
+      <LayerTreeNodeContent
+        moduleId="base.container"
+        displayName="Container"
+        htmlTag="div"
+        classSelectorChip={null}
+        hasChildren={false}
+        expanded={false}
+        showIcon={false}
+        showTag={false}
+        showClasses={false}
+        hidden
+      />,
+    )
+
+    const hiddenIndicator = container.querySelector('[title="Hidden"]')
+    expect(hiddenIndicator?.querySelector('svg')).not.toBeNull()
+    expect(hiddenIndicator?.textContent).toBe('')
+
+    const css = readFileSync(TREE_NODE_CSS_PATH, 'utf8')
+    const hiddenIndicatorBlock = css.match(/\.hiddenIndicator\s*\{[^}]*\}/s)?.[0] ?? ''
+    expect(hiddenIndicatorBlock).toContain('color: var(--text-muted)')
+    expect(css).not.toContain('.hiddenBadge')
+  })
+
   it('drag overlay is portaled outside the transformed panel to keep pointer alignment', () => {
     const source = readFileSync(DOM_PANEL_SOURCE_PATH, 'utf8')
 
@@ -661,7 +688,7 @@ describe('DomPanel — tree keyboard navigation', () => {
     })).toBeDefined()
   })
 
-  it('keeps hidden nodes in the tree and marks them with a hidden badge', () => {
+  it('keeps hidden nodes in the tree and marks them with a hidden icon', () => {
     loadContainerSite()
     act(() => {
       useEditorStore.getState().toggleNodeHidden('container-1')
@@ -670,6 +697,7 @@ describe('DomPanel — tree keyboard navigation', () => {
     render(<DomPanel />)
 
     expect(screen.getByRole('treeitem', { name: /container, hidden/i })).toBeDefined()
-    expect(screen.getByText('hidden')).toBeDefined()
+    const hiddenIndicator = document.querySelector('[title="Hidden"]')
+    expect(hiddenIndicator?.querySelector('svg')).not.toBeNull()
   })
 })
diff --git a/src/admin/pages/site/panels/DomPanel/LayerTreeNodeContent.tsx b/src/admin/pages/site/panels/DomPanel/LayerTreeNodeContent.tsx
@@ -1,4 +1,5 @@
 import type { MouseEventHandler, ReactNode } from 'react'
+import { EyeOffSolidIcon } from 'pixel-art-icons/icons/eye-off-solid'
 import { TreeChevron, TreeIconSlot, TreeLabel, TreeLabelGroup } from '@site/ui/Tree'
 import { ModuleIcon } from '@site/ui/ModuleIcon'
 import { TagPill } from '@ui/components/TagPill'
@@ -87,8 +88,8 @@ export function LayerTreeNodeContent({
         </span>
       )}
       {hidden && (
-        <span aria-hidden="true" className={styles.hiddenBadge}>
-          hidden
+        <span title="Hidden" aria-hidden="true" className={styles.hiddenIndicator}>
+          <EyeOffSolidIcon size={13} color="currentColor" />
         </span>
       )}
     </>
diff --git a/src/admin/pages/site/panels/DomPanel/TreeNode.module.css b/src/admin/pages/site/panels/DomPanel/TreeNode.module.css
@@ -23,14 +23,13 @@
     line-height: 1;
 }
 
-.hiddenBadge {
+.hiddenIndicator {
     flex-shrink: 0;
-    border-radius: var(--radius-sm);
-    background: var(--bg-surface-3);
-    color: var(--text-disabled);
-    padding: var(--space-px) var(--space-2xs);
-    font-size: var(--text-2xs);
-    line-height: 1.3;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    line-height: 0;
 }
 
 /* ── Slot-instance row — dimmer chrome to distinguish structural nodes ───── */
