Refactor sidebar layout and button handling in App.tsx

This commit is contained in:
2026-02-01 02:50:05 +01:00
parent f75fdf8e41
commit 25561dd7f8

View File

@@ -1357,8 +1357,9 @@ export default function App() {
return ( return (
<div className={`app app--theme-${theme}${sidebarCollapsed ? " app--sidebar-collapsed" : ""}`}> <div className={`app app--theme-${theme}${sidebarCollapsed ? " app--sidebar-collapsed" : ""}`}>
<aside className={`sidebar${sidebarCollapsed ? " sidebar--collapsed" : ""}`}>
{!sidebarCollapsed ? ( {!sidebarCollapsed ? (
<aside className="sidebar"> <>
<div className="sidebar__header"> <div className="sidebar__header">
<div className="sidebar__title-row"> <div className="sidebar__title-row">
<div className="app-title">TextDB</div> <div className="app-title">TextDB</div>
@@ -1371,9 +1372,7 @@ export default function App() {
/> />
</div> </div>
<div className="prompt-list"> <div className="prompt-list">
<div <div className="prompt-list__inner">
className="prompt-list__inner"
>
{loadingTexts || loadingFolders ? ( {loadingTexts || loadingFolders ? (
<div className="empty">Loading</div> <div className="empty">Loading</div>
) : hasSearch && texts.length === 0 ? ( ) : hasSearch && texts.length === 0 ? (
@@ -1391,7 +1390,21 @@ export default function App() {
)} )}
</div> </div>
</div> </div>
<div className="sidebar__footer"> </>
) : null}
<div className={`sidebar__footer${sidebarCollapsed ? " sidebar__footer--collapsed" : ""}`}>
{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>
) : (
<>
<button <button
className="icon-button" className="icon-button"
onClick={handleNewFolder} onClick={handleNewFolder}
@@ -1437,9 +1450,10 @@ export default function App() {
> >
<span className="icon-button__glyph" aria-hidden="true"></span> <span className="icon-button__glyph" aria-hidden="true"></span>
</button> </button>
</>
)}
</div> </div>
</aside> </aside>
) : null}
<main className="workspace"> <main className="workspace">
<div className="workspace__body"> <div className="workspace__body">
@@ -1665,21 +1679,6 @@ export default function App() {
</div> </div>
)} )}
</div> </div>
{sidebarCollapsed ? (
<div className="workspace__footer">
<div className="sidebar__footer sidebar__footer--collapsed">
<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>
</div>
</div>
) : null}
</main> </main>
{settingsOpen ? ( {settingsOpen ? (