diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx index 770bb40b..45bedbef 100644 --- a/packages/ui/src/App.tsx +++ b/packages/ui/src/App.tsx @@ -6,9 +6,10 @@ import FolderSelectionView from "./components/folder-selection-view" import { showConfirmDialog } from "./stores/alerts" import InstanceTabs from "./components/instance-tabs" import InstanceDisconnectedModal from "./components/instance-disconnected-modal" -import InstanceShell from "./components/instance/instance-shell" +import InstanceShell from "./components/instance/instance-shell2" import { RemoteAccessOverlay } from "./components/remote-access-overlay" import { initMarkdown } from "./lib/markdown" + import { useTheme } from "./lib/theme" import { useCommands } from "./lib/hooks/use-commands" import { useAppLifecycle } from "./lib/hooks/use-app-lifecycle" @@ -23,6 +24,7 @@ import { showFolderSelection, setShowFolderSelection, } from "./stores/ui" +import { instances as instanceStore } from "./stores/instances" import { useConfig } from "./stores/preferences" import { createInstance, @@ -65,6 +67,13 @@ const App: Component = () => { const [launchErrorBinary, setLaunchErrorBinary] = createSignal(null) const [isAdvancedSettingsOpen, setIsAdvancedSettingsOpen] = createSignal(false) const [remoteAccessOpen, setRemoteAccessOpen] = createSignal(false) + const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0) + + const updateInstanceTabBarHeight = () => { + if (typeof document === "undefined") return + const element = document.querySelector(".tab-bar-instance") + setInstanceTabBarHeight(element?.offsetHeight ?? 0) + } createEffect(() => { void initMarkdown(isDark()).catch((error) => log.error("Failed to initialize markdown", error)) @@ -74,6 +83,19 @@ const App: Component = () => { initReleaseNotifications() }) + createEffect(() => { + instances() + hasInstances() + requestAnimationFrame(() => updateInstanceTabBarHeight()) + }) + + onMount(() => { + updateInstanceTabBarHeight() + const handleResize = () => updateInstanceTabBarHeight() + window.addEventListener("resize", handleResize) + onCleanup(() => window.removeEventListener("resize", handleResize)) + }) + const activeInstance = createMemo(() => getActiveInstance()) const activeSessionIdForInstance = createMemo(() => { const instance = activeInstance() @@ -328,8 +350,9 @@ const App: Component = () => { {(instance) => { const isActiveInstance = () => activeInstanceId() === instance.id + const isVisible = () => isActiveInstance() && !showFolderSelection() return ( -
+
{ handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)} handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)} onExecuteCommand={executeCommand} + tabBarOffset={instanceTabBarHeight()} /> +
) }} diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx index 23e58a43..125cdbb3 100644 --- a/packages/ui/src/components/instance/instance-shell2.tsx +++ b/packages/ui/src/components/instance/instance-shell2.tsx @@ -697,7 +697,7 @@ const InstanceShell2: Component = (props) => { }} > - +