diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx index 68f76bc8..4f4d94e3 100644 --- a/packages/ui/src/components/instance/instance-shell2.tsx +++ b/packages/ui/src/components/instance/instance-shell2.tsx @@ -20,7 +20,6 @@ import IconButton from "@suid/material/IconButton" import Toolbar from "@suid/material/Toolbar" import Typography from "@suid/material/Typography" import useMediaQuery from "@suid/material/useMediaQuery" -import CloseIcon from "@suid/icons-material/Close" import MenuIcon from "@suid/icons-material/Menu" import MenuOpenIcon from "@suid/icons-material/MenuOpen" import PushPinIcon from "@suid/icons-material/PushPin" @@ -94,7 +93,6 @@ const RIGHT_DRAWER_WIDTH = 260 const MIN_RIGHT_DRAWER_WIDTH = 200 const MAX_RIGHT_DRAWER_WIDTH = 380 const SESSION_CACHE_LIMIT = 5 -const APP_BAR_HEIGHT = 56 const LEFT_DRAWER_STORAGE_KEY = "opencode-session-sidebar-width-v8" const RIGHT_DRAWER_STORAGE_KEY = "opencode-session-right-drawer-width-v1" const LEFT_PIN_STORAGE_KEY = "opencode-session-left-drawer-pinned-v1" @@ -214,10 +212,8 @@ const InstanceShell2: Component = (props) => { const host = drawerHost() if (!host) return const rect = host.getBoundingClientRect() - const toolbar = host.querySelector(".session-toolbar") - const toolbarHeight = toolbar?.offsetHeight ?? APP_BAR_HEIGHT - setFloatingDrawerTop(rect.top + toolbarHeight) - setFloatingDrawerHeight(Math.max(0, rect.height - toolbarHeight)) + setFloatingDrawerTop(rect.top) + setFloatingDrawerHeight(Math.max(0, rect.height)) } onMount(() => { @@ -617,7 +613,7 @@ const InstanceShell2: Component = (props) => { return undefined } - const fallbackDrawerTop = () => APP_BAR_HEIGHT + props.tabBarOffset + const fallbackDrawerTop = () => props.tabBarOffset const floatingTop = () => { const measured = floatingDrawerTop() if (measured > 0) return measured @@ -727,27 +723,21 @@ const InstanceShell2: Component = (props) => { const leftAppBarButtonLabel = () => { const state = leftDrawerState() if (state === "pinned") return t("instanceShell.leftDrawer.toggle.pinned") - if (state === "floating-closed") return t("instanceShell.leftDrawer.toggle.open") - return t("instanceShell.leftDrawer.toggle.close") + return t("instanceShell.leftDrawer.toggle.open") } const rightAppBarButtonLabel = () => { const state = rightDrawerState() if (state === "pinned") return t("instanceShell.rightDrawer.toggle.pinned") - if (state === "floating-closed") return t("instanceShell.rightDrawer.toggle.open") - return t("instanceShell.rightDrawer.toggle.close") + return t("instanceShell.rightDrawer.toggle.open") } const leftAppBarButtonIcon = () => { - const state = leftDrawerState() - if (state === "floating-closed") return - return + return } const rightAppBarButtonIcon = () => { - const state = rightDrawerState() - if (state === "floating-closed") return - return + return } @@ -795,29 +785,15 @@ const InstanceShell2: Component = (props) => { const handleLeftAppBarButtonClick = () => { const state = leftDrawerState() - if (state === "pinned") return - if (state === "floating-closed") { - setLeftOpen(true) - measureDrawerHost() - return - } - blurIfInside(leftDrawerContentEl()) - setLeftOpen(false) - focusTarget(leftToggleButtonEl()) + if (state !== "floating-closed") return + setLeftOpen(true) measureDrawerHost() } const handleRightAppBarButtonClick = () => { const state = rightDrawerState() - if (state === "pinned") return - if (state === "floating-closed") { - setRightOpen(true) - measureDrawerHost() - return - } - blurIfInside(rightDrawerContentEl()) - setRightOpen(false) - focusTarget(rightToggleButtonEl()) + if (state !== "floating-closed") return + setRightOpen(true) measureDrawerHost() } @@ -894,6 +870,17 @@ const InstanceShell2: Component = (props) => { {leftPinned() ? : } + + + + + @@ -1087,11 +1074,19 @@ const InstanceShell2: Component = (props) => { return (
-
- - {t("instanceShell.rightPanel.title")} - +
+ + + + + = (props) => {
+
+ + {t("instanceShell.rightPanel.title")} + +
= (props) => { const sessionLayout = (
{ setDrawerHost(element) measureDrawerHost() }} > - - - -
+ {renderLeftPanel()} + + + + + +
+ + + {leftAppBarButtonIcon()} + + + +
+ setPermissionModalOpen(true)} + /> + + + + + + + +
+ + + + {rightAppBarButtonIcon()} + + +
+ +
+
+ + {t("instanceShell.metrics.usedLabel")} + + {formattedUsedTokens()} +
+
+ + {t("instanceShell.metrics.availableLabel")} + + {formattedAvailableTokens()} +
+
+
+ } + > +
+ = (props) => { aria-label={leftAppBarButtonLabel()} size="small" aria-expanded={leftDrawerState() !== "floating-closed"} - disabled={leftDrawerState() === "pinned"} > {leftAppBarButtonIcon()} + -
- setPermissionModalOpen(true)} - /> - - - - - - - - - -
- - - {rightAppBarButtonIcon()} - -
- -
+
{t("instanceShell.metrics.usedLabel")} @@ -1341,101 +1375,65 @@ const InstanceShell2: Component = (props) => { {formattedAvailableTokens()}
-
-
- } - > -
- - {leftAppBarButtonIcon()} - - - -
- - {t("instanceShell.metrics.usedLabel")} - - {formattedUsedTokens()} -
-
- - {t("instanceShell.metrics.availableLabel")} - - {formattedAvailableTokens()} -
-
-
- - -
- setPermissionModalOpen(true)} - /> - - - - - - -
- - -
-
- - - - {t("instanceShell.connection.connected")} - - - - - - {t("instanceShell.connection.connecting")} - - - - - - {t("instanceShell.connection.disconnected")} -
- - {rightAppBarButtonIcon()} - -
- - - - - {renderLeftPanel()} +
+ setPermissionModalOpen(true)} + /> + + + + +
+ +
+
+ + + + {t("instanceShell.connection.connected")} + + + + + + {t("instanceShell.connection.connecting")} + + + + + + {t("instanceShell.connection.disconnected")} + + +
+ + + {rightAppBarButtonIcon()} + + +
+ + + = (props) => {
- - {renderRightPanel()} + + {renderRightPanel()}
)