A local-first note taking app
Refactor bottom bar
Ethan Graf
(May 7, 2026, 10:58 PM EDT)
d941a592
7ab4b188
+25
-23
+1
-1
src/App.tsx
+1
-1
src/App.tsx
+24
-22
src/tiling/WorkspaceTiling.tsx
+24
-22
src/tiling/WorkspaceTiling.tsx
···
185
185
};
186
186
187
187
return (
188
-
<div className="flex h-full min-h-0 w-full flex-col">
189
-
<div className="min-h-0 flex-1 overflow-hidden p-2">
188
+
<>
189
+
<div className="h-full min-h-0 w-full overflow-hidden p-2">
190
190
{renderNode(tree)}
191
191
</div>
192
-
<div className="border-border bg-background/90 flex h-10 shrink-0 items-center gap-2 border-t px-2">
193
-
<button
194
-
type="button"
195
-
onClick={() => applySplit('row')}
196
-
data-command-id={commandIds.splitRight}
197
-
className="border-border bg-background text-foreground hover:bg-border/30 rounded border px-2 py-1 text-xs"
198
-
>
199
-
Split Right
200
-
</button>
201
-
<button
202
-
type="button"
203
-
onClick={() => applySplit('column')}
204
-
data-command-id={commandIds.splitDown}
205
-
className="border-border bg-background text-foreground hover:bg-border/30 rounded border px-2 py-1 text-xs"
206
-
>
207
-
Split Down
208
-
</button>
209
-
<div className="text-foreground/60 ml-2 text-xs">
210
-
Active: {activeTileId}
192
+
<div className="border-border bg-background/90 fixed right-0 bottom-0 left-0 z-30 flex h-12 items-center border-t">
193
+
<div className="flex min-w-0 flex-1 items-center gap-2 px-2">
194
+
<button
195
+
type="button"
196
+
onClick={() => applySplit('row')}
197
+
data-command-id={commandIds.splitRight}
198
+
className="border-border bg-background text-foreground hover:bg-border/30 rounded border px-2 py-1 text-xs"
199
+
>
200
+
Split Right
201
+
</button>
202
+
<button
203
+
type="button"
204
+
onClick={() => applySplit('column')}
205
+
data-command-id={commandIds.splitDown}
206
+
className="border-border bg-background text-foreground hover:bg-border/30 rounded border px-2 py-1 text-xs"
207
+
>
208
+
Split Down
209
+
</button>
210
+
<div className="text-foreground/60 ml-2 text-xs">
211
+
Active: {activeTileId}
212
+
</div>
211
213
</div>
212
214
</div>
213
-
</div>
215
+
</>
214
216
);
215
217
}