homarr/apps/nextjs/src/components/active-tab-accordion.tsx

"use client";

import type { PropsWithChildren } from "react";
import { useCallback } from "react";
import { usePathname } from "next/navigation";
import { useShallowEffect } from "@mantine/hooks";

import type { AccordionProps } from "@homarr/ui";
import { Accordion } from "@homarr/ui";

type ActiveTabAccordionProps = PropsWithChildren<
  Omit<AccordionProps<false>, "onChange">
>;

// Replace state without fetchign new data
const replace = (newUrl: string) => {
  window.history.replaceState(
    { ...window.history.state, as: newUrl, url: newUrl },
    "",
    newUrl,
  );
};

export const ActiveTabAccordion = ({
  children,
  ...props
}: ActiveTabAccordionProps) => {
  const pathname = usePathname();
  const onChange = useCallback(
    (tab: string | null) => (tab ? replace(`?tab=${tab}`) : replace(pathname)),
    [pathname],
  );

  useShallowEffect(() => {
    if (props.defaultValue) {
      replace(`?tab=${props.defaultValue}`);
    }
  }, [props.defaultValue]);

  return (
    <Accordion {...props} onChange={onChange}>
      {children}
    </Accordion>
  );
};