Merge remote-tracking branch 'origin/feat/docker-logs' into insiders/ui-ux

# Conflicts:
#	apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx
#	apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx
#	apps/nextjs/src/components/layout/navigation-link.tsx
#	pnpm-lock.yaml

apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx

@@ -2,7 +2,7 @@
 
 import type { PropsWithChildren } from "react";
 import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
-import { DirectionProvider, MantineProvider } from "@mantine/core";
+import { DirectionProvider, MantineProvider, v8CssVariablesResolver } from "@mantine/core";
 import dayjs from "dayjs";
 
 import { clientApi } from "@homarr/api/client";
@@ -18,7 +18,12 @@ export const CustomMantineProvider = ({
   const manager = useColorSchemeManager();
   return (
     <DirectionProvider>
-      <MantineProvider defaultColorScheme={defaultColorScheme} colorSchemeManager={manager} theme={theme}>
+      <MantineProvider
+        defaultColorScheme={defaultColorScheme}
+        colorSchemeManager={manager}
+        theme={theme}
+        cssVariablesResolver={v8CssVariablesResolver}
+      >
         {children}
       </MantineProvider>
     </DirectionProvider>

apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx

@@ -2,7 +2,7 @@
 
 import type { PropsWithChildren } from "react";
 import type { MantineColorsTuple } from "@mantine/core";
-import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem } from "@mantine/core";
+import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem, v8CssVariablesResolver } from "@mantine/core";
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { ColorScheme } from "@homarr/definitions";
@@ -33,7 +33,12 @@ export const BoardMantineProvider = ({
   });
 
   return (
-    <MantineProvider defaultColorScheme={defaultColorScheme} theme={theme} colorSchemeManager={colorSchemeManager}>
+    <MantineProvider
+      defaultColorScheme={defaultColorScheme}
+      theme={theme}
+      colorSchemeManager={colorSchemeManager}
+      cssVariablesResolver={v8CssVariablesResolver}
+    >
       {children}
     </MantineProvider>
   );

apps/nextjs/src/app/[locale]/manage/tools/docker/docker-table.tsx

@@ -159,6 +159,23 @@ export function DockerTable({ containers, timestamp }: RouterOutputs["docker"]["
     refetchOnReconnect: false,
   });
   const relativeTime = useTimeAgo(data.timestamp);
+  const utils = clientApi.useUtils();
+  const { mutate, isPending } = clientApi.docker.invalidate.useMutation({
+    async onSuccess() {
+      await utils.docker.getContainers.invalidate();
+      showSuccessNotification({
+        title: tDocker("action.refresh.notification.success.title"),
+        message: tDocker("action.refresh.notification.success.message"),
+      });
+    },
+    onError() {
+      showErrorNotification({
+        title: tDocker("action.refresh.notification.error.title"),
+        message: tDocker("action.refresh.notification.error.message"),
+      });
+    },
+  });
+
   const table = useTranslatedMantineReactTable({
     data: data.containers,
     enableDensityToggle: false,
@@ -194,35 +211,11 @@ export function DockerTable({ containers, timestamp }: RouterOutputs["docker"]["
         </ActionIcon>
       </Tooltip>
     ),
-    renderTopToolbarCustomActions: () => {
-      const utils = clientApi.useUtils();
-      const { mutate, isPending } = clientApi.docker.invalidate.useMutation({
-        async onSuccess() {
-          await utils.docker.getContainers.invalidate();
-          showSuccessNotification({
-            title: tDocker("action.refresh.notification.success.title"),
-            message: tDocker("action.refresh.notification.success.message"),
-          });
-        },
-        onError() {
-          showErrorNotification({
-            title: tDocker("action.refresh.notification.error.title"),
-            message: tDocker("action.refresh.notification.error.message"),
-          });
-        },
-      });
-
-      return (
-        <Button
-          variant="default"
-          rightSection={<IconRefresh size="1rem" />}
-          onClick={() => mutate()}
-          loading={isPending}
-        >
-          {tDocker("action.refresh.label")}
-        </Button>
-      );
-    },
+    renderTopToolbarCustomActions: () => (
+      <Button variant="default" rightSection={<IconRefresh size="1rem" />} onClick={() => mutate()} loading={isPending}>
+        {tDocker("action.refresh.label")}
+      </Button>
+    ),
     renderToolbarAlertBannerContent: ({ groupedAlert, table }) => {
       const dockerContainers = table.getSelectedRowModel().rows.map((row) => row.original);
       return (
@@ -284,7 +277,6 @@ const ContainerActionBar = ({ selectedContainers }: ContainerActionBarProps) =>
         onClick={handleShowLogs}
         disabled={selectedContainers.length !== 1}
         variant="light"
-        radius="md"
       >
         {t("logs.label")}
       </Button>

apps/nextjs/src/app/[locale]/manage/tools/docker/logs/[containerId]/page.tsx

@@ -1,10 +1,9 @@
 import { notFound } from "next/navigation";
-import { Box, Group, Title } from "@mantine/core";
+import { Box, Group } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { env } from "@homarr/docker/env";
-import { getScopedI18n } from "@homarr/translation/server";
 
 import "@xterm/xterm/css/xterm.css";
 
@@ -32,16 +31,14 @@ export default async function DockerContainerLogsPage({ params, searchParams }:
     notFound();
   }
 
-  const tDocker = await getScopedI18n("docker");
-
   return (
     <>
       <Group justify="space-between" align="center" wrap="nowrap">
-        <DynamicBreadcrumb />
+        <DynamicBreadcrumb
+          dynamicMappings={new Map([[containerId, name ?? containerId]])}
+          nonInteractable={[containerId]}
+        />
       </Group>
-      <Title order={2} mb="md">
-        {tDocker("action.logs.page.title", { name: name ?? containerId })}
-      </Title>
       <Box style={{ borderRadius: 6 }} h={fullHeightWithoutHeaderAndFooter} p="md" bg="black">
         <ClientSideDockerLogsTerminal containerId={containerId} />
       </Box>

apps/nextjs/src/app/[locale]/manage/tools/docker/logs/[containerId]/terminal.tsx

@@ -51,6 +51,7 @@ export const DockerLogsTerminal = ({ containerId }: DockerLogsTerminalProps) =>
       cursorBlink: false,
       disableStdin: true,
       convertEol: true,
+      fontSize: 14,
     });
     terminalRef.current.open(ref.current);
     terminalRef.current.loadAddon(canvasAddon);

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

@@ -26,7 +26,7 @@ const NavLinkHref = (props: NavigationLinkHref) => {
       label={props.label}
       leftSection={props.icon}
       href={props.href}
-      active={pathname === props.href}
+      active={pathname === props.href || pathname.startsWith(`${props.href}/`)}
     />
   );
   return <TourTarget id={tourId}>{link}</TourTarget>;
@@ -34,7 +34,7 @@ const NavLinkHref = (props: NavigationLinkHref) => {
 
 const NavLinkWithItems = (props: NavigationLinkWithItems) => {
   const pathname = usePathname();
-  const isActive = props.items.some((item) => item.href === pathname);
+  const isActive = props.items.some((item) => pathname === item.href || pathname.startsWith(`${item.href}/`));
   const nav = (
     <NavLink label={props.label} leftSection={props.icon} defaultOpened={isActive}>
       {props.items.map((item) => (