feat(boards): add responsive layout system (#2271)

packages/boards/src/context.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { createContext, useContext, useEffect } from "react";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -10,7 +10,7 @@ import { clientApi } from "@homarr/api/client";
 import { updateBoardName } from "./updater";
 
 const BoardContext = createContext<{
-  board: RouterOutputs["board"]["getHomeBoard"];
+  board: RouterOutputs["board"]["getBoardByName"];
 } | null>(null);
 
 export const BoardProvider = ({
@@ -68,3 +68,43 @@ export const useOptionalBoard = () => {
 
   return context?.board ?? null;
 };
+
+export const getCurrentLayout = (board: RouterOutputs["board"]["getBoardByName"]) => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (typeof window === "undefined") return board.layouts.at(0)!.id;
+
+  const sortedLayouts = board.layouts.sort((layoutA, layoutB) => layoutB.breakpoint - layoutA.breakpoint);
+
+  // Fallback to smallest if none exists with breakpoint smaller than window width
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return sortedLayouts.find((layout) => layout.breakpoint <= window.innerWidth)?.id ?? sortedLayouts.at(0)!.id;
+};
+
+export const useCurrentLayout = () => {
+  const board = useRequiredBoard();
+  const [currentLayout, setCurrentLayout] = useState(getCurrentLayout(board));
+
+  const onResize = useCallback(() => {
+    setCurrentLayout(getCurrentLayout(board));
+  }, [board]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [onResize]);
+
+  return currentLayout;
+};
+
+export const getBoardLayouts = (board: RouterOutputs["board"]["getBoardByName"]) =>
+  board.layouts.map((layout) => layout.id);
+
+export const useLayouts = () => {
+  const board = useRequiredBoard();
+
+  return getBoardLayouts(board);
+};