Merge branch 'dev' into feat/inline-app-edit-modal

apps/nextjs/src/components/board/items/item-content.tsx

@@ -42,7 +42,6 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
           item.advancedOptions.customCssClasses.join(" "),
         )}
         radius={board.itemRadius}
-        withBorder
         styles={{
           root: {
             "--opacity": board.opacity / 100,

apps/nextjs/src/components/board/items/item-menu.tsx

@@ -106,9 +106,17 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
   };
 
   return (
-    <Menu withinPortal withArrow position="right-start" arrowPosition="center">
+    <Menu withinPortal position="right-start" arrowPosition="center">
       <Menu.Target>
-        <ActionIcon variant="default" radius={"xl"} pos="absolute" top={offset} right={offset} style={{ zIndex: 10 }}>
+        <ActionIcon
+          variant="default"
+          radius={"xl"}
+          pos="absolute"
+          top={offset}
+          right={offset}
+          style={{ zIndex: 10 }}
+          aria-label={tItem("menu.label.settings")}
+        >
           <IconDotsVertical size={"1rem"} />
         </ActionIcon>
       </Menu.Target>

apps/nextjs/src/components/board/items/item-select-modal.tsx

@@ -145,7 +145,7 @@ const WidgetItem = ({
             </Text>
           </Stack>
           <SupportedIntegrations mt="auto" integrations={item.supportedIntegrations} />
-          <Button onClick={onSelect} variant="light" size="xs" radius="md" fullWidth>
+          <Button onClick={onSelect} variant="light" size="xs" fullWidth>
             {t(`item.create.addToBoard`)}
           </Button>
         </Stack>
@@ -170,7 +170,7 @@ const SupportedIntegrations = ({ integrations, mt }: SupportedIntegrationsProps)
 
   return (
     <Center mt={mt}>
-      <Tooltip.Group openDelay={300} closeDelay={100}>
+      <Tooltip.Group closeDelay={100}>
         <Group gap={2}>
           {integrations.slice(0, countToShow).map((integration) => (
             <Tooltip key={integration} label={getIntegrationName(integration)} withArrow>

apps/nextjs/src/components/board/sections/category-section.tsx

@@ -45,13 +45,7 @@ export const BoardCategorySection = ({ section }: Props) => {
   });
 
   return (
-    <Card
-      style={{ "--opacity": board.opacity / 100 }}
-      radius={board.itemRadius}
-      withBorder
-      p={0}
-      className={classes.itemCard}
-    >
+    <Card style={{ "--opacity": board.opacity / 100 }} radius={board.itemRadius} p={0} className={classes.itemCard}>
       <Stack>
         <Group wrap="nowrap" gap="sm">
           <UnstyledButton w="100%" p="sm" onClick={toggle}>

apps/nextjs/src/components/board/sections/category/category-menu.tsx

@@ -30,9 +30,9 @@ export const CategoryMenu = ({ category }: Props) => {
   const t = useScopedI18n("section.category");
 
   return (
-    <Menu withArrow>
+    <Menu>
       <Menu.Target>
-        <ActionIcon mr="sm" variant="transparent">
+        <ActionIcon mr="sm" variant="transparent" aria-label={t("menu.label.settings")}>
           <IconDotsVertical size={20} />
         </ActionIcon>
       </Menu.Target>

apps/nextjs/src/components/board/sections/dynamic-section.tsx

@@ -28,7 +28,6 @@ export const BoardDynamicSection = ({ section }: Props) => {
         className={combineClasses(classes.itemCard, section.options.customCssClasses.join(" "))}
         w="100%"
         h="100%"
-        withBorder
         styles={{
           root: {
             overflow: "visible",

apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx

@@ -43,9 +43,17 @@ export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSectionIt
   };
 
   return (
-    <Menu withinPortal withArrow position="right-start" arrowPosition="center">
+    <Menu withinPortal position="right-start" arrowPosition="center">
       <Menu.Target>
-        <ActionIcon variant="default" radius={"xl"} pos="absolute" top={4} right={4} style={{ zIndex: 10 }}>
+        <ActionIcon
+          variant="default"
+          radius={"xl"}
+          pos="absolute"
+          top={4}
+          right={4}
+          style={{ zIndex: 10 }}
+          aria-label={tItem("menu.label.settings")}
+        >
           <IconDotsVertical size={"1rem"} />
         </ActionIcon>
       </Menu.Target>

apps/nextjs/src/components/layout/navigation-link.tsx

@@ -12,16 +12,7 @@ export const CommonNavLink = (props: ClientNavigationLink) =>
 const NavLinkHref = (props: NavigationLinkHref) => {
   const pathname = usePathname();
   return props.external ? (
-    <NavLink
-      component="a"
-      label={props.label}
-      leftSection={props.icon}
-      href={props.href}
-      style={{
-        borderRadius: 5,
-      }}
-      target="_blank"
-    />
+    <NavLink component="a" label={props.label} leftSection={props.icon} href={props.href} target="_blank" />
   ) : (
     <NavLink
       component={Link}
@@ -29,9 +20,6 @@ const NavLinkHref = (props: NavigationLinkHref) => {
       leftSection={props.icon}
       href={props.href}
       active={pathname === props.href}
-      style={{
-        borderRadius: 5,
-      }}
     />
   );
 };
@@ -40,14 +28,7 @@ const NavLinkWithItems = (props: NavigationLinkWithItems) => {
   const pathname = usePathname();
   const isActive = props.items.some((item) => item.href === pathname);
   return (
-    <NavLink
-      style={{
-        borderRadius: 5,
-      }}
-      label={props.label}
-      leftSection={props.icon}
-      defaultOpened={isActive}
-    >
+    <NavLink label={props.label} leftSection={props.icon} defaultOpened={isActive}>
       {props.items.map((item) => (
         <NavLinkHref key={item.label} {...item} />
       ))}

apps/nextjs/src/components/manage/danger-zone.tsx

@@ -15,7 +15,7 @@ export const DangerZoneRoot = async ({ children }: DangerZoneRootProps) => {
       <Title c="red.8" order={2}>
         {t("common.dangerZone")}
       </Title>
-      <Card withBorder style={{ borderColor: "var(--mantine-color-red-8)", borderWidth: 3 }}>
+      <Card style={{ borderColor: "var(--mantine-color-red-8)", borderWidth: 3 }}>
         <Stack gap="sm">
           {Array.isArray(children)
             ? children.map((child, index) => (

apps/nextjs/src/components/manage/manage-mobile-primary-action.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from "react";
+import { Affix, Box } from "@mantine/core";
+
+import { MANAGE_ACTION_BUTTON_MIN_WIDTH, MANAGE_AFFIX_POSITION } from "./manage-page.constants";
+
+export const ManageMobilePrimaryAction = ({ children }: PropsWithChildren) => (
+  <>
+    <Box visibleFrom="md" miw={MANAGE_ACTION_BUTTON_MIN_WIDTH}>
+      {children}
+    </Box>
+    <Affix hiddenFrom="md" position={MANAGE_AFFIX_POSITION}>
+      {children}
+    </Affix>
+  </>
+);

apps/nextjs/src/components/manage/manage-page-layout.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+import type { MantineSize } from "@mantine/core";
+import { Group, Stack, Title } from "@mantine/core";
+
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { ManageContainer } from "./manage-container";
+import { MANAGE_FLOATING_ACTION_BOTTOM_OFFSET } from "./manage-page.constants";
+
+interface ManagePageLayoutProps {
+  title: ReactNode;
+  primaryAction?: ReactNode;
+  toolbar?: ReactNode;
+  footer?: ReactNode;
+  floatingPrimaryAction?: boolean;
+  size?: MantineSize;
+  children: ReactNode;
+}
+
+export const ManagePageLayout = ({
+  title,
+  primaryAction,
+  toolbar,
+  footer,
+  floatingPrimaryAction,
+  size,
+  children,
+}: ManagePageLayoutProps) => {
+  const titleNode = typeof title === "string" ? <Title>{title}</Title> : title;
+
+  return (
+    <ManageContainer size={size}>
+      <DynamicBreadcrumb />
+      <Stack pb={floatingPrimaryAction ? { base: MANAGE_FLOATING_ACTION_BOTTOM_OFFSET, md: 0 } : undefined}>
+        <Group justify="space-between" align="center">
+          {titleNode}
+          {primaryAction}
+        </Group>
+        {toolbar}
+        {children}
+        {footer && <Group justify="end">{footer}</Group>}
+      </Stack>
+    </ManageContainer>
+  );
+};

apps/nextjs/src/components/manage/manage-page.constants.ts

@@ -0,0 +1,5 @@
+export const MANAGE_AFFIX_POSITION = { bottom: 20, right: 20 } as const;
+
+export const MANAGE_FLOATING_ACTION_BOTTOM_OFFSET = 48;
+
+export const MANAGE_ACTION_BUTTON_MIN_WIDTH = 160;

apps/nextjs/src/components/manage/mobile-affix-button.tsx

@@ -2,13 +2,15 @@ import { forwardRef } from "react";
 import type { ButtonProps } from "@mantine/core";
 import { Affix, Button, createPolymorphicComponent } from "@mantine/core";
 
+import { MANAGE_ACTION_BUTTON_MIN_WIDTH, MANAGE_AFFIX_POSITION } from "./manage-page.constants";
+
 type MobileAffixButtonProps = Omit<ButtonProps, "visibleFrom" | "hiddenFrom">;
 
 export const MobileAffixButton = createPolymorphicComponent<"button", MobileAffixButtonProps>(
   forwardRef<HTMLButtonElement, MobileAffixButtonProps>((props, ref) => (
     <>
-      <Button ref={ref} visibleFrom="md" {...props} />
-      <Affix hiddenFrom="md" position={{ bottom: 20, right: 20 }}>
+      <Button ref={ref} visibleFrom="md" miw={MANAGE_ACTION_BUTTON_MIN_WIDTH} {...props} />
+      <Affix hiddenFrom="md" position={MANAGE_AFFIX_POSITION}>
         <Button ref={ref} {...props} />
       </Affix>
     </>

apps/nextjs/src/components/no-results.tsx

@@ -14,13 +14,13 @@ interface NoResultsProps {
 
 export const NoResults = ({ icon: Icon, title, action }: NoResultsProps) => {
   return (
-    <Card withBorder bg="transparent">
+    <Card bg="transparent" withBorder={false}>
       <Stack align="center" gap="sm">
         <Icon size="2rem" />
         <Text fw={500} size="lg">
           {title}
         </Text>
-        {!action?.hidden && <Anchor href={action?.href}>{action?.label}</Anchor>}
+        {action && !action.hidden && <Anchor href={action.href}>{action.label}</Anchor>}
       </Stack>
     </Card>
   );

apps/nextjs/src/components/user-avatar-menu.tsx

@@ -52,7 +52,7 @@ export const UserAvatarMenu = ({ children, availableUpdatesPromise }: UserAvatar
 
   return (
     // We use keepMounted so we can add event listeners to prevent navigating away without saving the board
-    <Menu width={300} withArrow withinPortal keepMounted>
+    <Menu width={300} withinPortal keepMounted>
       <Menu.Dropdown>
         <AvailableUpdatesMenuItem availableUpdatesPromise={availableUpdatesPromise} />
         <Menu.Item component={Link} href="/boards" leftSection={<IconHome size="1rem" />}>