Remove depth parameter from renderTextItem and renderFolder functions, update CSS for folder styling

src/App.tsx

@@ -30,7 +30,6 @@ import {
   searchTexts,
   setFolderOrder,
   setTextOrder,
-  updateFolderName,
   updateTextTitle,
   upsertDraft,
   type Folder,
@@ -1190,11 +1189,10 @@ export default function App() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [confirmState, handleSaveVersion, selectedTextId, settingsOpen]);
 
-  const renderTextItem = (text: Text, depth: number, parentFolderId: string | null) => (
+  const renderTextItem = (text: Text, parentFolderId: string | null) => (
     <div
       key={text.id}
       className={`prompt-item${text.id === selectedTextId ? " is-active" : ""}`}
-      style={{ marginLeft: depth * 12 }}
       draggable
       onDragStart={(event) => handleDragStartText(event, text)}
       onDragEnd={handleDragEnd}
@@ -1234,7 +1232,7 @@ export default function App() {
     </div>
   );
 
-  const renderFolder = (folder: Folder, depth: number) => {
+  const renderFolder = (folder: Folder) => {
     if (hasSearch && !visibleFolderIds?.has(folder.id)) return null;
     const expanded = isFolderExpanded(folder.id);
     const childFolders = foldersByParent.get(folder.id) ?? [];
@@ -1244,7 +1242,6 @@ export default function App() {
       <div key={folder.id} className="folder-node">
         <div
           className={`folder-item${expanded ? " is-open" : ""}`}
-          style={{ marginLeft: depth * 12 }}
           draggable
           onDragStart={(event) => handleDragStartFolder(event, folder)}
           onDragEnd={handleDragEnd}
@@ -1267,8 +1264,8 @@ export default function App() {
         </div>
         {expanded ? (
           <div className="folder-children">
-            {childFolders.map((child) => renderFolder(child, depth + 1))}
+            {childFolders.map((child) => renderFolder(child))}
-            {childTexts.map((text) => renderTextItem(text, depth + 1, folder.id))}
+            {childTexts.map((text) => renderTextItem(text, folder.id))}
           </div>
         ) : null}
       </div>
@@ -1324,9 +1321,9 @@ export default function App() {
               <div className="empty">No texts yet.</div>
             ) : (
               <>
-                {(foldersByParent.get(null) ?? []).map((folder) => renderFolder(folder, 0))}
+                {(foldersByParent.get(null) ?? []).map((folder) => renderFolder(folder))}
                 {(textsByFolder.get(null) ?? []).map((text) =>
-                  renderTextItem(text, 0, null)
+                  renderTextItem(text, null)
                 )}
               </>
             )}

src/index.css

@@ -264,6 +264,63 @@ body {
   color: var(--muted);
 }
 
+.folder-node {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.folder-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid transparent;
+  background: var(--bg-elevated);
+  color: var(--ink);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.folder-item:hover {
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.folder-item.is-open {
+  border-color: var(--border-strong);
+  background: var(--bg-active);
+}
+
+.folder-item__toggle {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  padding: 0;
+  font-size: 0.9rem;
+}
+
+.folder-item__title {
+  font-weight: 600;
+  flex: 1;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.folder-children {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 6px;
+  padding-left: 14px;
+}
+
 .workspace {
   padding: 28px 32px;
   height: 100%;