50% width layout - zen mode like

[lucharo]

Is your feature request related to a problem? Please describe.
When having a single window in really wide monitors, given text is left justified I end up looking loads to the right, instead I'd like a "zen" centered layout for such cases.

Describe the solution you'd like
I'd like to have a layout where a single window is laid out to fill 50% (or some % of the screen) and centered to emulate a zen-like mode. This is especially useful for really wide monitors

Describe alternatives you've considered
Rectangle or Hammerspoon but I don't want another app, amethyst is very nice!

[ianyh]

I think that would be a relatively straightforward custom layout if you just went every window to be in the middle.

[rwjack]

@lucharo

function layout() {
  return {
    name: "Centered Widescreen",
    getFrameAssignments: (windows, screenFrame) => {
      const oneWindowWidthRatio = 0.75;
      const splitMainRatio = 0.55;

      if (windows.length === 1) {
        // Centered 75% width for single window
        const mainWidth = screenFrame.width * oneWindowWidthRatio;
        const mainX = screenFrame.x + (screenFrame.width - mainWidth) / 2;

        const mainFrame = {
          x: mainX,
          y: screenFrame.y,
          width: mainWidth,
          height: screenFrame.height,
        };

        return { [windows[0].id]: mainFrame };
      } else {
        // 60/40 horizontal split
        const mainWidth = screenFrame.width * splitMainRatio;
        const sideWidth = screenFrame.width - mainWidth;

        const mainFrame = {
          x: screenFrame.x,
          y: screenFrame.y,
          width: mainWidth,
          height: screenFrame.height,
        };

        const secondaryWindows = windows.slice(1);
        const sideHeight = screenFrame.height / secondaryWindows.length;

        const sideFrames = secondaryWindows.map((win, index) => ({
          [win.id]: {
            x: screenFrame.x + mainWidth,
            y: screenFrame.y + index * sideHeight,
            width: sideWidth,
            height: sideHeight,
          },
        }));

        return [
          { [windows[0].id]: mainFrame },
          ...sideFrames,
        ].reduce((acc, frame) => ({ ...acc, ...frame }), {});
      }
    },
  };
}

function layout() {
  return {
    name: "Centered Single",
    getFrameAssignments: (windows, screenFrame) => {
      const widthRatio = 0.75;

      const width = screenFrame.width * widthRatio;
      const x = screenFrame.x + (screenFrame.width - width) / 2;

      const sharedFrame = {
        x: x,
        y: screenFrame.y,
        width: width,
        height: screenFrame.height,
      };

      // Assign the same centered frame to all windows
      return windows.reduce((acc, win) => {
        acc[win.id] = sharedFrame;
        return acc;
      }, {});
    },
  };
}