GUI menus and basic layout.

source/titfront/src/components/App.tsx

@@ -0,0 +1,70 @@
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
+ * Part of BlueTit Solver, licensed under Apache 2.0 with Commons Clause.
+ * Commercial use, including SaaS, requires a separate license, see /LICENSE.md
+\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+import { FC } from "react";
+import { AiOutlinePython as PythonIcon } from "react-icons/ai";
+import {
+  FiActivity as ActivityIcon,
+  FiDatabase as DatabaseIcon,
+  FiSettings as SettingsIcon,
+  FiSliders as SlidersIcon,
+  FiTerminal as TerminalIcon,
+} from "react-icons/fi";
+
+import { Menu } from "~/components/Menu";
+import { PythonShell } from "~/components/PythonShell";
+import { Viewer } from "~/components/Viewer";
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+export const App: FC = () => {
+  const leftIconSize = 24;
+  const bottomIconSize = 16;
+  return (
+    <div className="h-screen w-screen flex flex-row select-none text-sm">
+      <Menu side="left">
+        <Menu.Item
+          name="Configuration"
+          icon={<SlidersIcon size={leftIconSize} />}
+          group={0}
+        />
+        <Menu.Item
+          name="Storage"
+          icon={<DatabaseIcon size={leftIconSize} />}
+          group={0}
+        />
+        <Menu.Item
+          name="Activity"
+          icon={<ActivityIcon size={leftIconSize} />}
+          group={1}
+        />
+        <Menu.Item
+          name="Settings"
+          icon={<SettingsIcon size={leftIconSize} />}
+          group={1}
+        />
+      </Menu>
+      <div className="flex-1 flex flex-col">
+        <Viewer />
+        <Menu side="bottom">
+          <Menu.Item
+            name="Python shell"
+            icon={<PythonIcon size={bottomIconSize} />}
+            group={0}
+          >
+            <PythonShell />
+          </Menu.Item>
+          <Menu.Item
+            name="Console"
+            icon={<TerminalIcon size={bottomIconSize} />}
+            group={0}
+          />
+        </Menu>
+      </div>
+    </div>
+  );
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

source/titfront/src/components/Menu.tsx

@@ -0,0 +1,191 @@
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
+ * Part of BlueTit Solver, licensed under Apache 2.0 with Commons Clause.
+ * Commercial use, including SaaS, requires a separate license, see /LICENSE.md
+\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+import {
+  FC,
+  Fragment,
+  ReactNode,
+  ReactElement,
+  createContext,
+  useContext,
+  useMemo,
+} from "react";
+import { IconBaseProps } from "react-icons";
+import { FiMinimize as MinimizeIcon } from "react-icons/fi";
+
+import { Resizable } from "~/components/Resizable";
+import { useMenuStore } from "~/stores/LayoutStore";
+import { Side, iota, cn } from "~/utils";
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+interface Action {
+  key: string;
+  icon: ReactElement<IconBaseProps>;
+  callback: () => void;
+}
+
+export interface MenuProviderProps {
+  actions: Action[];
+}
+
+const MenuContext = createContext<MenuProviderProps | null>(null);
+
+export function useMenu() {
+  return useContext(MenuContext)!;
+}
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+interface MenuProps {
+  side: Side;
+  children: ReactElement<MenuItemProps>[];
+}
+
+export const Menu: FC<MenuProps> & { Item: FC<MenuItemProps> } = ({
+  side,
+  children = [],
+}: MenuProps) => {
+  const { size, setSize, activeItem, setActiveItem } = useMenuStore(side);
+
+  /** @todo We should have a way to add custom actions from the children. */
+  const actions = useMemo<MenuProviderProps>(
+    () => ({
+      actions: [
+        {
+          key: "hide",
+          icon: <MinimizeIcon size={16} />,
+          callback: () => setActiveItem(-1),
+        },
+      ],
+    }),
+    [setActiveItem]
+  );
+
+  const maxGroup = children.reduce(
+    (max, child) => Math.max(max, child.props.group),
+    0
+  );
+
+  const horizontal = side === "left" || side === "right";
+  const menuCn = cn(
+    "flex text-gray-300",
+    {
+      left: "flex-row",
+      right: "flex-row-reverse",
+      top: "flex-col",
+      bottom: "flex-col-reverse",
+    }[side]
+  );
+  const menuBarCn = cn(
+    "flex items-center justify-between",
+    "bg-gradient-to-bl from-gray-800 to-gray-950",
+    horizontal ? "flex-col w-16 h-full gap-6" : "w-full h-8 pl-1"
+  );
+  const baseItemCn = cn(
+    "flex items-center",
+    horizontal
+      ? "justify-center size-11 my-6 rounded-lg"
+      : "w-30 h-6 pl-1 rounded-sm"
+  );
+  const itemCn = cn(
+    baseItemCn,
+    "hover:bg-gradient-to-bl hover:from-gray-700 hover:to-gray-800",
+    "hover:text-gray-100 hover:shadow-xl"
+  );
+  const activeItemCn = cn(
+    baseItemCn,
+    "inset-shadow-sm inset-shadow-gray-700",
+    "bg-gradient-to-bl from-gray-700 to-indigo-900 text-gray-100"
+  );
+  return (
+    <div className={menuCn}>
+      {/* Menu bar. */}
+      <div className={menuBarCn}>
+        {iota(maxGroup + 1).map((group) => (
+          <div key={group} className={cn(horizontal || "flex items-center")}>
+            {children.map(
+              (item, index) =>
+                item.props.group == group && (
+                  <Fragment key={index}>
+                    <button
+                      className={index === activeItem ? activeItemCn : itemCn}
+                      onClick={() => setActiveItem(index)}
+                    >
+                      {item.props.icon}
+                      {horizontal || (
+                        <span className="ml-1">{item.props.name}</span>
+                      )}
+                    </button>
+                    {horizontal || (
+                      <div className="w-[1px] h-6 mx-1 bg-gray-600" />
+                    )}
+                  </Fragment>
+                )
+            )}
+          </div>
+        ))}
+      </div>
+      {/* Active item. */}
+      {activeItem !== -1 && (
+        <Resizable side={side} size={size} setSize={setSize}>
+          <MenuContext.Provider value={actions}>
+            {children[activeItem]}
+          </MenuContext.Provider>
+        </Resizable>
+      )}
+    </div>
+  );
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+interface MenuItemProps {
+  name: string;
+  icon: ReactElement<IconBaseProps>;
+  group: number;
+  children?: ReactNode;
+}
+
+const MenuItem: FC<MenuItemProps> = ({ name, children }) => {
+  const { actions } = useMenu();
+  return (
+    <div
+      className={cn(
+        "size-full flex flex-col",
+        "bg-gradient-to-bl from-gray-700 to-gray-800"
+      )}
+    >
+      {/* Title. */}
+      <div className="h-4 m-1 mt-2 flex flex-row items-center justify-between">
+        <span className="ml-2 font-medium truncate">{name.toUpperCase()}</span>
+        <div className="flex flex-row items-center">
+          {actions.map(({ key, icon, callback }) => (
+            <button
+              key={key}
+              className={cn(
+                "w-6 h-6 mr-2 rounded flex items-center justify-center",
+                "hover:bg-gray-500"
+              )}
+              onClick={callback}
+            >
+              {icon}
+            </button>
+          ))}
+        </div>
+      </div>
+      {/* Contents. */}
+      <div
+        className={cn("flex-grow m-1 rounded-lg overflow-auto", "bg-gray-900")}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+Menu.Item = MenuItem;
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

source/titfront/src/components/PythonShell.tsx

@@ -142,7 +142,7 @@ export const PythonShell: FC = () => {
       data-testid="python-shell"
       className={cn(
         "size-full flex flex-col overflow-auto",
-        "font-mono select-text bg-gray-900"
+        "font-mono select-text"
       )}
       aria-label="Python Shell"
       onClick={handleClick}

source/titfront/src/components/Resizable.test.tsx

@@ -0,0 +1,123 @@
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
+ * Part of BlueTit Solver, licensed under Apache 2.0 with Commons Clause.
+ * Commercial use, including SaaS, requires a separate license, see /LICENSE.md
+\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+import "@testing-library/jest-dom/vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { vi } from "vitest";
+
+import { Resizable } from "~/components/Resizable";
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+describe("Resizable", () => {
+  it("renders children correctly", () => {
+    const { getByText } = render(
+      <Resizable side="left" size={200} setSize={() => {}}>
+        <div>Test</div>
+      </Resizable>
+    );
+    expect(getByText("Test")).toBeInTheDocument();
+  });
+
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+  it("applies initial width correctly", () => {
+    render(
+      <Resizable side="left" size={200} setSize={() => {}}>
+        <div>Test</div>
+      </Resizable>
+    );
+    expect(screen.getByTestId("resizable-content")).toHaveStyle("width: 200px");
+  });
+
+  it("applies initial height correctly", () => {
+    render(
+      <Resizable side="bottom" size={200} setSize={() => {}}>
+        <div>Test</div>
+      </Resizable>
+    );
+    expect(screen.getByTestId("resizable-content")).toHaveStyle(
+      "height: 200px"
+    );
+  });
+
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+  it("handles width changes with mouse correctly", () => {
+    const setSize = vi.fn();
+    render(
+      <Resizable side="left" size={200} setSize={setSize}>
+        <div>Test Content</div>
+      </Resizable>
+    );
+
+    const resizer = screen.getByTestId("resizable-resizer");
+
+    fireEvent.mouseDown(resizer, { clientX: 0 });
+    fireEvent.mouseMove(window, { clientX: 50 });
+    expect(document.body.style.cursor).toBe("ew-resize");
+    expect(setSize).toHaveBeenCalledWith(250);
+
+    fireEvent.mouseUp(window);
+    expect(document.body.style.cursor).toBe("");
+  });
+
+  it("handles height changes with mouse correctly", () => {
+    const setSize = vi.fn();
+    render(
+      <Resizable side="bottom" size={200} setSize={setSize}>
+        <div>Test Content</div>
+      </Resizable>
+    );
+    const resizer = screen.getByTestId("resizable-resizer");
+
+    fireEvent.mouseDown(resizer, { clientY: 0 });
+    fireEvent.mouseMove(window, { clientY: -50 });
+    expect(document.body.style.cursor).toBe("ns-resize");
+    expect(setSize).toHaveBeenCalledWith(250);
+
+    fireEvent.mouseUp(window);
+    expect(document.body.style.cursor).toBe("");
+  });
+
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+  it("respects size constraints", () => {
+    const setSize = vi.fn();
+    render(
+      <Resizable
+        side="left"
+        size={200}
+        setSize={setSize}
+        minSize={100}
+        maxSize={300}
+      >
+        <div>Test Content</div>
+      </Resizable>
+    );
+    const resizer = screen.getByTestId("resizable-resizer");
+
+    fireEvent.mouseDown(resizer, { clientX: 0 });
+    fireEvent.mouseMove(window, { clientX: 50 });
+    expect(setSize).toHaveBeenCalledWith(250);
+
+    fireEvent.mouseMove(window, { clientX: 150 });
+    expect(setSize).toHaveBeenCalledWith(300);
+
+    fireEvent.mouseUp(window);
+
+    fireEvent.mouseDown(resizer, { clientX: 0 });
+    fireEvent.mouseMove(window, { clientX: -50 });
+    expect(setSize).toHaveBeenCalledWith(150);
+
+    fireEvent.mouseMove(window, { clientX: -150 });
+    expect(setSize).toHaveBeenCalledWith(100);
+
+    fireEvent.mouseUp(window);
+  });
+});
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~