diff --git a/gui/src/components/OnnxWeb.tsx b/gui/src/components/OnnxWeb.tsx
index 2e37174d..af108ea2 100644
--- a/gui/src/components/OnnxWeb.tsx
+++ b/gui/src/components/OnnxWeb.tsx
@@ -12,6 +12,7 @@ import { shallow } from 'zustand/shallow';
import { Motd } from '../Motd.js';
import { OnnxState, StateContext } from '../state/full.js';
+import { Layout } from '../state/settings.js';
import { ImageHistory } from './ImageHistory.js';
import { Logo } from './Logo.js';
import { Blend } from './tab/Blend.js';
@@ -56,7 +57,7 @@ export function OnnxWeb(props: OnnxWebProps) {
{props.motd && }
- {layout.direction === 'vertical' ? : }
+ {renderBody(layout, historyStyle)}
);
@@ -107,43 +108,50 @@ export const LAYOUT_STYLES = {
},
} as const;
+function renderBody(layout: ReturnType, historyStyle: SxProps) {
+ if (layout.direction === 'vertical') {
+ return ;
+ } else {
+ return ;
+ }
+}
+
// used for both horizontal and vertical
export interface BodyProps {
- layout: ReturnType;
+ direction: Layout;
style: SxProps;
+ width: number;
}
export function HorizontalBody(props: BodyProps) {
- const store = mustExist(useContext(StateContext));
- const {direction} = useStore(store, selectLayout, shallow);
- const layout = LAYOUT_STYLES[direction];
+ const layout = LAYOUT_STYLES[props.direction];
return
-
+
-
+
;
}
export function VerticalBody(props: BodyProps) {
- const store = mustExist(useContext(StateContext));
- const {direction, width} = useStore(store, selectLayout, shallow);
- const layout = LAYOUT_STYLES[direction];
+ const layout = LAYOUT_STYLES[props.direction];
return
-
+
-
+
;
}
-export function TabGroup() {
- const store = mustExist(useContext(StateContext));
- const {direction} = useStore(store, selectLayout, shallow);
- const layout = LAYOUT_STYLES[direction];
+export interface TabGroupProps {
+ direction: Layout;
+}
+
+export function TabGroup(props: TabGroupProps) {
+ const layout = LAYOUT_STYLES[props.direction];
const [hash, setHash] = useHash();