buzzert/Sybil-2
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Add foldable split-pane layout

Browse Source
This commit is contained in:
James Magahern
2026-08-06 23:28:42 -07:00
parent b540f01759
commit 1ef491f39a
2 changed files with 44 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/App.tsx
View File

@@ -3246,11 +3246,11 @@ export default function App() {
return ( return (
<div className="app-grid-surface app-safe-frame h-full"> <div className="app-grid-surface app-safe-frame h-full">
<div className="flex h-full w-full overflow-hidden bg-transparent md:gap-2"> <div className="workspace-shell flex h-full w-full overflow-hidden bg-transparent md:gap-2">
{isMobileSidebarOpen ? ( {isMobileSidebarOpen ? (
<button <button
type="button" type="button"
className="fixed inset-0 z-30 bg-black/70 backdrop-blur-sm md:hidden" className="workspace-sidebar-backdrop fixed inset-0 z-30 bg-black/70 backdrop-blur-sm md:hidden"
onClick={() => setIsMobileSidebarOpen(false)} onClick={() => setIsMobileSidebarOpen(false)}
aria-label="Close sidebar" aria-label="Close sidebar"
/> />
@@ -3258,7 +3258,7 @@ export default function App() {
<aside <aside
className={cn( className={cn(
"glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none md:rounded-2xl md:border", "workspace-sidebar glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none md:rounded-2xl md:border",
isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0" isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
)} )}
> >
@@ -3401,7 +3401,7 @@ export default function App() {
</aside> </aside>
<main <main
className="glass-panel relative flex min-w-0 flex-1 touch-pan-y flex-col overflow-hidden border-violet-300/18 md:touch-auto md:rounded-2xl md:border" className="workspace-content glass-panel relative flex min-w-0 flex-1 touch-pan-y flex-col overflow-hidden border-violet-300/18 md:touch-auto md:rounded-2xl md:border"
onTouchStart={handleMobileWorkspaceTouchStart} onTouchStart={handleMobileWorkspaceTouchStart}
onTouchMove={handleMobileWorkspaceTouchMove} onTouchMove={handleMobileWorkspaceTouchMove}
onTouchEnd={handleMobileWorkspaceTouchEnd} onTouchEnd={handleMobileWorkspaceTouchEnd}
@@ -3413,7 +3413,7 @@ export default function App() {
type="button" type="button"
size="icon" size="icon"
variant="ghost" variant="ghost"
className="-ml-1 h-8 w-8 md:hidden" className="workspace-sidebar-trigger -ml-1 h-8 w-8 md:hidden"
onClick={() => setIsMobileSidebarOpen(true)} onClick={() => setIsMobileSidebarOpen(true)}
aria-label="Open sidebar" aria-label="Open sidebar"
> >

39
web/src/index.css
View File

@@ -131,6 +131,45 @@ textarea {
} }
} }
@media (horizontal-viewport-segments: 2) {
.app-safe-frame {
padding:
max(0.5rem, var(--safe-area-top))
max(0.5rem, var(--safe-area-right))
max(0.5rem, var(--safe-area-bottom))
max(0.5rem, var(--safe-area-left));
}
.workspace-shell {
display: grid;
grid-template-columns:
calc(env(viewport-segment-width 0 0) - max(0.5rem, var(--safe-area-left)))
calc(env(viewport-segment-width 1 0) - max(0.5rem, var(--safe-area-right)));
column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
}
.workspace-sidebar {
position: static;
width: 100%;
max-width: none;
transform: none;
border-width: 1px;
border-radius: 1rem;
}
.workspace-content {
min-width: 0;
border-width: 1px;
border-radius: 1rem;
touch-action: auto;
}
.workspace-sidebar-backdrop,
.workspace-sidebar-trigger {
display: none;
}
}
.glass-panel { .glass-panel {
background: background:
linear-gradient(180deg, hsl(243 42% 12% / 0.88), hsl(236 48% 5% / 0.92)), linear-gradient(180deg, hsl(243 42% 12% / 0.88), hsl(236 48% 5% / 0.92)),