chore: update prettier configuration for print width (#519)

* feat: update prettier configuration for print width

* chore: apply code formatting to entire repository

* fix: remove build files

* fix: format issue

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

apps/nextjs/src/components/layout/background.tsx

@@ -4,10 +4,7 @@ import type { AppShellProps } from "@mantine/core";
 import { useOptionalBoard } from "~/app/[locale]/boards/(content)/_context";
 
 const supportedVideoFormats = ["mp4", "webm", "ogg"];
-const isVideo = (url: string) =>
-  supportedVideoFormats.some((format) =>
-    url.toLowerCase().endsWith(`.${format}`),
-  );
+const isVideo = (url: string) => supportedVideoFormats.some((format) => url.toLowerCase().endsWith(`.${format}`));
 
 export const useOptionalBackgroundProps = (): Partial<AppShellProps> => {
   const board = useOptionalBoard();

apps/nextjs/src/components/layout/header.tsx

@@ -26,13 +26,7 @@ export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
           </UnstyledButton>
         </Group>
         <DesktopSearchInput />
-        <Group
-          h="100%"
-          align="center"
-          justify="end"
-          style={{ flex: 1 }}
-          wrap="nowrap"
-        >
+        <Group h="100%" align="center" justify="end" style={{ flex: 1 }} wrap="nowrap">
           {actions}
           <MobileSearchButton />
           <UserButton />

apps/nextjs/src/components/layout/header/burger.tsx

@@ -9,12 +9,7 @@ export const navigationCollapsedAtom = atom(true);
 export const ClientBurger = () => {
   const [collapsed, setCollapsed] = useAtom(navigationCollapsedAtom);
 
-  const toggle = useCallback(
-    () => setCollapsed((collapsed) => !collapsed),
-    [setCollapsed],
-  );
+  const toggle = useCallback(() => setCollapsed((collapsed) => !collapsed), [setCollapsed]);
 
-  return (
-    <Burger opened={!collapsed} onClick={toggle} hiddenFrom="sm" size="sm" />
-  );
+  return <Burger opened={!collapsed} onClick={toggle} hiddenFrom="sm" size="sm" />;
 };

apps/nextjs/src/components/layout/header/button.tsx

@@ -23,24 +23,22 @@ const headerButtonActionIconProps: ActionIconProps = {
 };
 
 // eslint-disable-next-line react/display-name
-export const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>(
-  (props, ref) => {
-    if ("href" in props) {
-      return (
-        <ActionIcon
-          ref={ref as ForwardedRef<HTMLAnchorElement>}
-          component={Link}
-          {...props}
-          {...headerButtonActionIconProps}
-        >
-          {props.children}
-        </ActionIcon>
-      );
-    }
+export const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>((props, ref) => {
+  if ("href" in props) {
     return (
-      <ActionIcon ref={ref} {...props} {...headerButtonActionIconProps}>
+      <ActionIcon
+        ref={ref as ForwardedRef<HTMLAnchorElement>}
+        component={Link}
+        {...props}
+        {...headerButtonActionIconProps}
+      >
         {props.children}
       </ActionIcon>
     );
-  },
-);
+  }
+  return (
+    <ActionIcon ref={ref} {...props} {...headerButtonActionIconProps}>
+      {props.children}
+    </ActionIcon>
+  );
+});

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

@@ -28,10 +28,7 @@ interface CommonLogoWithTitleProps {
   hideTitleOnMobile?: boolean;
 }
 
-export const BoardLogoWithTitle = ({
-  size,
-  hideTitleOnMobile,
-}: CommonLogoWithTitleProps) => {
+export const BoardLogoWithTitle = ({ size, hideTitleOnMobile }: CommonLogoWithTitleProps) => {
   const board = useRequiredBoard();
   const imageOptions = useImageOptions();
   return (

apps/nextjs/src/components/layout/logo/homarr-logo.tsx

@@ -14,16 +14,12 @@ const imageOptions = {
   shouldUseNextImage: true,
 };
 
-export const HomarrLogo = ({ size }: LogoProps) => (
-  <Logo size={size} {...imageOptions} />
-);
+export const HomarrLogo = ({ size }: LogoProps) => <Logo size={size} {...imageOptions} />;
 
 interface CommonLogoWithTitleProps {
   size: LogoWithTitleProps["size"];
 }
 
 export const HomarrLogoWithTitle = ({ size }: CommonLogoWithTitleProps) => {
-  return (
-    <LogoWithTitle size={size} title={homarrPageTitle} image={imageOptions} />
-  );
+  return <LogoWithTitle size={size} title={homarrPageTitle} image={imageOptions} />;
 };

apps/nextjs/src/components/layout/logo/logo.tsx

@@ -9,12 +9,7 @@ interface LogoProps {
   shouldUseNextImage?: boolean;
 }
 
-export const Logo = ({
-  size = 60,
-  shouldUseNextImage = false,
-  src,
-  alt,
-}: LogoProps) =>
+export const Logo = ({ size = 60, shouldUseNextImage = false, src, alt }: LogoProps) =>
   shouldUseNextImage ? (
     <Image src={src} alt={alt} width={size} height={size} />
   ) : (
@@ -36,22 +31,13 @@ export interface LogoWithTitleProps {
   hideTitleOnMobile?: boolean;
 }
 
-export const LogoWithTitle = ({
-  size,
-  title,
-  image,
-  hideTitleOnMobile,
-}: LogoWithTitleProps) => {
+export const LogoWithTitle = ({ size, title, image, hideTitleOnMobile }: LogoWithTitleProps) => {
   const { logoSize, titleOrder } = logoWithTitleSizes[size];
 
   return (
     <Group gap="xs" wrap="nowrap">
       <Logo {...image} size={logoSize} />
-      <Title
-        order={titleOrder}
-        visibleFrom={hideTitleOnMobile ? "sm" : undefined}
-        textWrap="nowrap"
-      >
+      <Title order={titleOrder} visibleFrom={hideTitleOnMobile ? "sm" : undefined} textWrap="nowrap">
         {title}
       </Title>
     </Group>

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

@@ -6,11 +6,7 @@ import { usePathname } from "next/navigation";
 import { NavLink } from "@mantine/core";
 
 export const CommonNavLink = (props: ClientNavigationLink) =>
-  "href" in props ? (
-    <NavLinkHref {...props} />
-  ) : (
-    <NavLinkWithItems {...props} />
-  );
+  "href" in props ? <NavLinkHref {...props} /> : <NavLinkWithItems {...props} />;
 
 const NavLinkHref = (props: NavigationLinkHref) => {
   const pathname = usePathname();

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

@@ -11,11 +11,7 @@ interface MainNavigationProps {
   links: NavigationLink[];
 }
 
-export const MainNavigation = ({
-  headerSection,
-  footerSection,
-  links,
-}: MainNavigationProps) => {
+export const MainNavigation = ({ headerSection, footerSection, links }: MainNavigationProps) => {
   return (
     <AppShellNavbar p="md">
       {headerSection && <AppShellSection>{headerSection}</AppShellSection>}