From dc72df83e3030fa77d5fc602108db108f36846c2 Mon Sep 17 00:00:00 2001
From: ZDDC <caseywitt@proton.me>
Date: Sun, 10 May 2026 14:22:50 -0500
Subject: [PATCH] fix(classifier): rename inline tree-empty placeholder out of
 .empty-state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

classifier/js/tree.js was inserting a <div class="empty-state">No
folders found</div> inside the folder-tree pane when the tree was
empty. That conflicted with the shared .empty-state rule promoted
in the previous commit — which expects an outer flex container with
a child .empty-state__inner card, used for the top-level welcome
overlay.

The two usages aren't the same thing semantically (one is the
welcome screen; one is a tiny inline "list is empty" placeholder
inside the folder tree). Rename the inline one to .tree-empty to
remove the collision. The spreadsheet.css rule that targeted the
old class is renamed to match; same padding/text-align/color.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 classifier/css/spreadsheet.css | 8 +++++---
 classifier/js/tree.js          | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/classifier/css/spreadsheet.css b/classifier/css/spreadsheet.css
index c568b77..0341c6d 100644
--- a/classifier/css/spreadsheet.css
+++ b/classifier/css/spreadsheet.css
@@ -411,14 +411,16 @@
     color: var(--danger);
 }
 
-/* Empty State */
-.empty-state {
+/* Inline tree-empty placeholder — shown by tree.js when the folder
+   list is empty. Distinct from the top-level .empty-state overlay
+   (shared/base.css) which is the welcome screen. */
+.tree-empty {
     padding: 3rem;
     text-align: center;
     color: var(--text-muted);
 }
 
-.empty-state h3 {
+.tree-empty h3 {
     margin-bottom: 0.5rem;
 }
 
diff --git a/classifier/js/tree.js b/classifier/js/tree.js
index 8a886ec..ffceed3 100644
--- a/classifier/js/tree.js
+++ b/classifier/js/tree.js
@@ -13,7 +13,7 @@
         container.innerHTML = '';
 
         if (window.app.folderTree.length === 0) {
-            container.innerHTML = '<div class="empty-state">No folders found</div>';
+            container.innerHTML = '<div class="tree-empty">No folders found</div>';
             return;
         }