giers10/textDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor sidebar layout and button handling in App.tsx

Browse Source
This commit is contained in:
Victor Giers
2026-02-01 02:50:05 +01:00
parent f75fdf8e41
commit 25561dd7f8
1 changed files with 94 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/App.tsx
View File

@@ -1357,89 +1357,103 @@ 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" : ""}`}>
{!sidebarCollapsed ? ( <aside className={`sidebar${sidebarCollapsed ? " sidebar--collapsed" : ""}`}>
<aside className="sidebar"> {!sidebarCollapsed ? (
<div className="sidebar__header"> <>
<div className="sidebar__title-row"> <div className="sidebar__header">
<div className="app-title">TextDB</div> <div className="sidebar__title-row">
</div> <div className="app-title">TextDB</div>
<input </div>
className="search" <input
placeholder="Search texts" className="search"
value={search} placeholder="Search texts"
onChange={(event) => setSearch(event.target.value)} value={search}
/> onChange={(event) => setSearch(event.target.value)}
</div> />
<div className="prompt-list"> </div>
<div <div className="prompt-list">
className="prompt-list__inner" <div 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 ? ( <div className="empty">No matching texts.</div>
<div className="empty">No matching texts.</div> ) : texts.length === 0 && folders.length === 0 ? (
) : texts.length === 0 && folders.length === 0 ? ( <div className="empty">No texts yet.</div>
<div className="empty">No texts yet.</div> ) : (
) : ( <>
<> {(entriesByParent.get(null) ?? []).map((entry) =>
{(entriesByParent.get(null) ?? []).map((entry) => entry.kind === "folder"
entry.kind === "folder" ? renderFolder(entry.item)
? renderFolder(entry.item) : renderTextItem(entry.item)
: renderTextItem(entry.item) )}
</>
)} )}
</> </div>
)} </div>
</div> </>
</div> ) : null}
<div className="sidebar__footer"> <div className={`sidebar__footer${sidebarCollapsed ? " sidebar__footer--collapsed" : ""}`}>
<button {sidebarCollapsed ? (
className="icon-button" <button
onClick={handleNewFolder} className="icon-button"
aria-label="New folder" onClick={() => setSidebarCollapsed(false)}
title="New folder" aria-label="Expand sidebar"
type="button" title="Expand sidebar"
> type="button"
<span className="icon-button__glyph" aria-hidden="true">📁</span> >
</button> <span className="icon-button__glyph" aria-hidden="true">▶</span>
<button </button>
className="icon-button" ) : (
onClick={handleNewText} <>
aria-label="New text" <button
title="New text" className="icon-button"
type="button" onClick={handleNewFolder}
> aria-label="New folder"
<span className="icon-button__glyph" aria-hidden="true">✚</span> title="New folder"
</button> type="button"
<button >
className="icon-button" <span className="icon-button__glyph" aria-hidden="true">📁</span>
onClick={handleOpenText} </button>
aria-label="Open text" <button
title="Open text" className="icon-button"
type="button" onClick={handleNewText}
> aria-label="New text"
<span className="icon-button__glyph" aria-hidden="true">⤓</span> title="New text"
</button> type="button"
<button >
className="icon-button" <span className="icon-button__glyph" aria-hidden="true">✚</span>
onClick={() => setSettingsOpen(true)} </button>
aria-label="Open settings" <button
title="Settings" className="icon-button"
type="button" onClick={handleOpenText}
> aria-label="Open text"
<span className="icon-button__glyph icon-button__glyph--large" aria-hidden="true">⚙</span> title="Open text"
</button> type="button"
<button >
className="icon-button" <span className="icon-button__glyph" aria-hidden="true">⤓</span>
onClick={() => setSidebarCollapsed(true)} </button>
aria-label="Collapse sidebar" <button
title="Collapse sidebar" className="icon-button"
type="button" onClick={() => setSettingsOpen(true)}
> aria-label="Open settings"
<span className="icon-button__glyph" aria-hidden="true">◀</span> title="Settings"
</button> 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> </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 ? (