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

Refactor sidebar layout and button functionality in App.tsx

Browse Source
This commit is contained in:
Victor Giers
2026-02-01 02:53:18 +01:00
parent 2d39935045
commit 3ef4b7e514
1 changed files with 85 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/App.tsx
View File

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