From 8400dc30b575bade40ef23156a6f297ad1da6232 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Fri, 3 Apr 2026 00:55:40 +0200
Subject: [PATCH] Refactor App.tsx and app.css for improved deletion handling
 and outliner styling

---
 src/app/App.tsx | 12 ++++++++----
 src/app/app.css | 52 +++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index dbad37f7..4391076a 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1279,10 +1279,14 @@ export function App({ store, initialStatusMessage }: AppProps) {
         return;
       }
 
-      if (isDeleteShortcut && editorState.toolMode !== "create") {
-        const deleted = handleDeleteSelectedSceneItem();
+      if (isDeleteShortcut) {
+        if (editorState.toolMode !== "create") {
+          const deleted = handleDeleteSelectedSceneItem();
 
-        if (deleted || isDeletionKey) {
+          if (deleted || isDeletionKey) {
+            event.preventDefault();
+          }
+        } else if (isDeletionKey) {
           event.preventDefault();
         }
         return;
@@ -1317,7 +1321,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
       window.removeEventListener("pointermove", handleWindowPointerMove);
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, [activePanelId, addMenuPosition, brushList.length, editorState.selection, editorState.toolMode, entityList.length, handleDeleteSelectedSceneItem]);
+  }, [activePanelId, addMenuPosition, brushList.length, editorState.selection, editorState.toolMode, entityList.length]);
 
   const applySceneName = () => {
     const normalizedName = sceneNameDraft.trim() || "Untitled Scene";
diff --git a/src/app/app.css b/src/app/app.css
index da8f0b2a..c71d9a27 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -362,13 +362,13 @@ button:disabled {
 .outliner-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
 
 .outliner-section {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }
 
 .outliner-empty {
@@ -404,6 +404,19 @@ button:disabled {
   border-color: rgba(207, 123, 66, 0.55);
 }
 
+.outliner-item--compact {
+  gap: 6px;
+  padding: 8px 10px;
+}
+
+.outliner-item__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
 .outliner-item__title {
   font-size: 0.88rem;
   font-weight: 700;
@@ -431,6 +444,41 @@ button:disabled {
   transform: none;
 }
 
+.outliner-item--compact .outliner-item__select {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.outliner-item--compact .outliner-item__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+
+.outliner-item__delete {
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  color: var(--color-muted);
+  font-size: 0.82rem;
+  font-weight: 700;
+  line-height: 1;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 8px;
+}
+
+.outliner-item__delete:hover:not(:disabled) {
+  color: var(--color-text);
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.12);
+  transform: none;
+}
+
 .outliner-item__editor {
   width: 100%;
   gap: 6px;