feat: add configurable headers and instance branding (#6690)

apps/nextjs/src/components/board/board-layout-thumbnail.module.css

@@ -5,10 +5,10 @@
   overflow: hidden;
   color: var(--mantine-color-dimmed);
   background:
-    radial-gradient(
-      circle at 15% 10%,
+    linear-gradient(
+      to top,
       color-mix(in srgb, var(--mantine-primary-color-filled) 12%, transparent),
-      transparent 35%
+      transparent 55%
     ),
     var(--mantine-color-body);
 }

apps/nextjs/src/components/board/board-layout-thumbnail.tsx

@@ -12,15 +12,22 @@ interface BoardLayoutThumbnailProps {
   preview: BoardPreviewData | null;
   label: string;
   fitFullLayout?: boolean;
+  className?: string;
 }
 
 const maxThumbnailRows = 12;
 
-export const BoardLayoutThumbnail = ({ preview, label, fitFullLayout = false }: BoardLayoutThumbnailProps) => {
+export const BoardLayoutThumbnail = ({
+  preview,
+  label,
+  fitFullLayout = false,
+  className,
+}: BoardLayoutThumbnailProps) => {
+  const canvasClassName = [classes.canvas, className].filter(Boolean).join(" ");
   const layout = preview?.layouts.find((candidate) => candidate.role === "base") ?? preview?.layouts.at(0);
   if (!preview || !layout) {
     return (
-      <Center className={classes.canvas} role="img" aria-label={label}>
+      <Center className={canvasClassName} role="img" aria-label={label}>
         <IconLayoutGrid size={28} stroke={1.4} aria-hidden />
       </Center>
     );
@@ -38,7 +45,7 @@ export const BoardLayoutThumbnail = ({ preview, label, fitFullLayout = false }:
   });
   if (lanes.length === 0) {
     return (
-      <Center className={classes.canvas} role="img" aria-label={label}>
+      <Center className={canvasClassName} role="img" aria-label={label}>
         <IconLayoutGrid size={28} stroke={1.4} aria-hidden />
       </Center>
     );
@@ -55,7 +62,7 @@ export const BoardLayoutThumbnail = ({ preview, label, fitFullLayout = false }:
   };
 
   return (
-    <Box className={classes.canvas} role="img" aria-label={label}>
+    <Box className={canvasClassName} role="img" aria-label={label}>
       <div
         className={classes.lanes}
         style={{ gridTemplateColumns: lanes.map(({ columnCount }) => `${columnCount}fr`).join(" ") }}

apps/nextjs/src/components/board/board-switcher.tsx

@@ -36,8 +36,14 @@ import classes from "./board-switcher.module.css";
 
 export const boardSwitcherHotkey = "shift+c";
 
+export interface BoardSwitcherControls {
+  open: () => void;
+  preload: () => void;
+  hotkey: string;
+}
+
 interface BoardSwitcherProps {
-  children: (controls: { open: () => void; preload: () => void; hotkey: string }) => ReactNode;
+  children: (controls: BoardSwitcherControls) => ReactNode;
 }
 
 export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {

apps/nextjs/src/components/board/items/widget-context-menu.tsx

@@ -222,7 +222,9 @@ export const WidgetContextMenu = ({
     [setItemOptions],
   );
 
-  if (!session || !settings.enableRightClickOnWidgets || isEditMode || item.kind === "app") return <>{children}</>;
+  if (!session || !settings.enableRightClickOnWidgets || isEditMode || item.kind === "app") {
+    return <>{children}</>;
+  }
 
   const visibleWidgetActions = widgetContextActions.filter((action) => !action.hidden);
 

apps/nextjs/src/components/board/modals/board-rename-modal.tsx

@@ -24,6 +24,7 @@ export const BoardRenameModal = createModal<InnerProps>(({ actions, innerProps }
         name: innerProps.previousName,
       });
       void utils.board.getHomeBoard.invalidate();
+      void utils.board.getAllBoards.invalidate();
     },
   });
   const form = useZodForm(boardRenameSchema.omit({ id: true }), {

apps/nextjs/src/components/board/sections/grid/test/grid-import-boundary.spec.ts

@@ -9,8 +9,8 @@ const editorBoundaryPath = resolve(gridDirectory, "board-grid-editor-boundary.ts
 const editorLoaderPath = resolve(gridDirectory, "grid-editor-loader.ts");
 
 describe("board grid import boundary", () => {
-  test("keeps every current dnd-kit runtime import inside the edit-only module", () => {
-    const runtimeImports = getSourceFiles(nextjsSourceDirectory)
+  test("keeps board grid dnd-kit runtime imports inside the edit-only module", () => {
+    const runtimeImports = getSourceFiles(gridDirectory)
       .flatMap(getRuntimeImports)
       .filter(({ specifier }) => isCurrentDndKitImport(specifier))
       .map(({ filePath, kind, specifier }) => ({