From 3ef4b7e51488a991cd4326988491447b600b9cb8 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Sun, 1 Feb 2026 02:53:18 +0100
Subject: [PATCH] Refactor sidebar layout and button functionality in App.tsx

---
 src/App.tsx | 175 +++++++++++++++++++++++++---------------------------
 1 file changed, 85 insertions(+), 90 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9acf59c..6261965 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1357,103 +1357,87 @@ export default function App() {
 
   return (
     <div className={`app app--theme-${theme}${sidebarCollapsed ? " app--sidebar-collapsed" : ""}`}>
-      <aside className={`sidebar${sidebarCollapsed ? " sidebar--collapsed" : ""}`}>
-        {!sidebarCollapsed ? (
-          <>
-            <div className="sidebar__header">
-              <div className="sidebar__title-row">
-                <div className="app-title">TextDB</div>
-              </div>
-              <input
-                className="search"
-                placeholder="Search texts"
-                value={search}
-                onChange={(event) => setSearch(event.target.value)}
-              />
+      {!sidebarCollapsed ? (
+        <aside className="sidebar">
+          <div className="sidebar__header">
+            <div className="sidebar__title-row">
+              <div className="app-title">TextDB</div>
             </div>
-            <div className="prompt-list">
-              <div className="prompt-list__inner">
-                {loadingTexts || loadingFolders ? (
-                  <div className="empty">Loading…</div>
-                ) : hasSearch && texts.length === 0 ? (
-                  <div className="empty">No matching texts.</div>
-                ) : texts.length === 0 && folders.length === 0 ? (
-                  <div className="empty">No texts yet.</div>
-                ) : (
-                  <>
-                    {(entriesByParent.get(null) ?? []).map((entry) =>
-                      entry.kind === "folder"
-                        ? renderFolder(entry.item)
-                        : renderTextItem(entry.item)
-                    )}
-                  </>
-                )}
-              </div>
+            <input
+              className="search"
+              placeholder="Search texts"
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+            />
+          </div>
+          <div className="prompt-list">
+            <div className="prompt-list__inner">
+              {loadingTexts || loadingFolders ? (
+                <div className="empty">Loading…</div>
+              ) : hasSearch && texts.length === 0 ? (
+                <div className="empty">No matching texts.</div>
+              ) : texts.length === 0 && folders.length === 0 ? (
+                <div className="empty">No texts yet.</div>
+              ) : (
+                <>
+                  {(entriesByParent.get(null) ?? []).map((entry) =>
+                    entry.kind === "folder"
+                      ? renderFolder(entry.item)
+                      : renderTextItem(entry.item)
+                  )}
+                </>
+              )}
             </div>
-          </>
-        ) : null}
-        <div className={`sidebar__footer${sidebarCollapsed ? " sidebar__footer--collapsed" : ""}`}>
-          {sidebarCollapsed ? (
+          </div>
+          <div className="sidebar__footer">
             <button
               className="icon-button"
-              onClick={() => setSidebarCollapsed(false)}
-              aria-label="Expand sidebar"
-              title="Expand sidebar"
+              onClick={handleNewFolder}
+              aria-label="New folder"
+              title="New folder"
               type="button"
             >
-              <span className="icon-button__glyph" aria-hidden="true">▶</span>
+              <span className="icon-button__glyph" aria-hidden="true">📁</span>
             </button>
-          ) : (
-            <>
-              <button
-                className="icon-button"
-                onClick={handleNewFolder}
-                aria-label="New folder"
-                title="New folder"
-                type="button"
-              >
-                <span className="icon-button__glyph" aria-hidden="true">📁</span>
-              </button>
-              <button
-                className="icon-button"
-                onClick={handleNewText}
-                aria-label="New text"
-                title="New text"
-                type="button"
-              >
-                <span className="icon-button__glyph" aria-hidden="true">✚</span>
-              </button>
-              <button
-                className="icon-button"
-                onClick={handleOpenText}
-                aria-label="Open text"
-                title="Open text"
-                type="button"
-              >
-                <span className="icon-button__glyph" aria-hidden="true">⤓</span>
-              </button>
-              <button
-                className="icon-button"
-                onClick={() => setSettingsOpen(true)}
-                aria-label="Open settings"
-                title="Settings"
-                type="button"
-              >
-                <span className="icon-button__glyph icon-button__glyph--large" aria-hidden="true">⚙</span>
-              </button>
-              <button
-                className="icon-button"
-                onClick={() => setSidebarCollapsed(true)}
-                aria-label="Collapse sidebar"
-                title="Collapse sidebar"
-                type="button"
-              >
-                <span className="icon-button__glyph" aria-hidden="true">◀</span>
-              </button>
-            </>
-          )}
-        </div>
-      </aside>
+            <button
+              className="icon-button"
+              onClick={handleNewText}
+              aria-label="New text"
+              title="New text"
+              type="button"
+            >
+              <span className="icon-button__glyph" aria-hidden="true">✚</span>
+            </button>
+            <button
+              className="icon-button"
+              onClick={handleOpenText}
+              aria-label="Open text"
+              title="Open text"
+              type="button"
+            >
+              <span className="icon-button__glyph" aria-hidden="true">⤓</span>
+            </button>
+            <button
+              className="icon-button"
+              onClick={() => setSettingsOpen(true)}
+              aria-label="Open settings"
+              title="Settings"
+              type="button"
+            >
+              <span className="icon-button__glyph icon-button__glyph--large" aria-hidden="true">⚙</span>
+            </button>
+            <button
+              className="icon-button"
+              onClick={() => setSidebarCollapsed(true)}
+              aria-label="Collapse sidebar"
+              title="Collapse sidebar"
+              type="button"
+            >
+              <span className="icon-button__glyph" aria-hidden="true">◀</span>
+            </button>
+          </div>
+        </aside>
+      ) : null}
 
       <main className="workspace">
         <div className="workspace__body">
@@ -1543,6 +1527,17 @@ export default function App() {
               </div>
 
               <div className="editor__footer">
+                {sidebarCollapsed ? (
+                  <button
+                    className="icon-button"
+                    onClick={() => setSidebarCollapsed(false)}
+                    aria-label="Expand sidebar"
+                    title="Expand sidebar"
+                    type="button"
+                  >
+                    <span className="icon-button__glyph" aria-hidden="true">▶</span>
+                  </button>
+                ) : null}
                 {hasText ? (
                   <>
                     <button