import * as React from "react";
import { TrackerViewModel } from "../TrackerViewModel";
import { VerticalResizer } from "./VerticalResizer";
import { useStoreBackedState } from "../Utility/useStoreBackedState";
import { Store } from "../Utility/Store";
import { CenterColumn } from "./CenterColumn";
import { ToolbarHost } from "./ToolbarHost";
import { LeftColumn } from "./LeftColumn";
import { RightColumn } from "./RightColumn";

export function ThreeColumnLayout(props: { tracker: TrackerViewModel }) {
  const [columnWidth, setColumnWidth] = useStoreBackedState(
    Store.User,
    "columnWidth",
    375
  );

  return (
    <>
      <ToolbarHost tracker={props.tracker} />
      <LeftColumn tracker={props.tracker} columnWidth={columnWidth} />
      <VerticalResizer
        adjustWidth={offset => setColumnWidth(columnWidth + offset)}
      />
      <CenterColumn tracker={props.tracker} />
      <VerticalResizer
        adjustWidth={offset => setColumnWidth(columnWidth - offset)}
      />
      <RightColumn tracker={props.tracker} columnWidth={columnWidth} />
    </>
  );
}

import * as React from "react";
import { TrackerViewModel } from "../TrackerViewModel";
import { VerticalResizer } from "./VerticalResizer";
import { useStoreBackedState } from "../Utility/useStoreBackedState";
import { Store } from "../Utility/Store";
import { CenterColumn } from "./CenterColumn";
import { ToolbarHost } from "./ToolbarHost";
import { LeftColumn } from "./LeftColumn";
import { RightColumn } from "./RightColumn";

export function ThreeColumnLayout(props: { tracker: TrackerViewModel }) {
  const [leftColumnWidth, setLeftColumnWidth] = useStoreBackedState(
    Store.User,
    "columnWidth",
    375
  );
  const [rightColumnWidth, setRightColumnWidth] = useStoreBackedState(
    Store.User,
    "rightColumnWidth",
    375
  );

  return (
    <>
      <ToolbarHost tracker={props.tracker} />
      <LeftColumn tracker={props.tracker} columnWidth={leftColumnWidth} />
      <VerticalResizer
        adjustWidth={offset => setLeftColumnWidth(leftColumnWidth + offset)}
      />
      <CenterColumn tracker={props.tracker} />
      <VerticalResizer
        adjustWidth={offset => setRightColumnWidth(rightColumnWidth - offset)}
      />
      <RightColumn tracker={props.tracker} columnWidth={rightColumnWidth} />
    </>
  );
}

Store left and right column width preferences
Store left and right column width preferences
