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>

packages/spotlight/src/chip-group.tsx

@@ -2,17 +2,10 @@ import { Chip } from "@mantine/core";
 
 import { useScopedI18n } from "@homarr/translation/client";
 
-import {
-  selectNextAction,
-  selectPreviousAction,
-  spotlightStore,
-  triggerSelectedAction,
-} from "./spotlight-store";
+import { selectNextAction, selectPreviousAction, spotlightStore, triggerSelectedAction } from "./spotlight-store";
 import type { SpotlightActionGroup } from "./type";
 
-const disableArrowUpAndDown = (
-  event: React.KeyboardEvent<HTMLInputElement>,
-) => {
+const disableArrowUpAndDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
   if (event.key === "ArrowDown") {
     selectNextAction(spotlightStore);
     event.preventDefault();
@@ -27,8 +20,7 @@ const disableArrowUpAndDown = (
 const focusActiveByDefault = (event: React.FocusEvent<HTMLInputElement>) => {
   const relatedTarget = event.relatedTarget;
 
-  const isPreviousTargetRadio =
-    relatedTarget && "type" in relatedTarget && relatedTarget.type === "radio";
+  const isPreviousTargetRadio = relatedTarget && "type" in relatedTarget && relatedTarget.type === "radio";
   if (isPreviousTargetRadio) return;
 
   const group = event.currentTarget.parentElement?.parentElement;
@@ -45,12 +37,7 @@ interface Props {
 export const GroupChip = ({ group }: Props) => {
   const t = useScopedI18n("common.search.group");
   return (
-    <Chip
-      key={group}
-      value={group}
-      onFocus={focusActiveByDefault}
-      onKeyDown={disableArrowUpAndDown}
-    >
+    <Chip key={group} value={group} onFocus={focusActiveByDefault} onKeyDown={disableArrowUpAndDown}>
       {t(group)}
     </Chip>
   );

packages/spotlight/src/component.tsx

@@ -3,10 +3,7 @@
 import { useCallback, useState } from "react";
 import Link from "next/link";
 import { Center, Chip, Divider, Flex, Group, Text } from "@mantine/core";
-import {
-  Spotlight as MantineSpotlight,
-  SpotlightAction,
-} from "@mantine/spotlight";
+import { Spotlight as MantineSpotlight, SpotlightAction } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import { useAtomValue } from "jotai";
 
@@ -41,11 +38,7 @@ export const Spotlight = () => {
       const renderRoot =
         item.type === "link"
           ? (props: Record<string, unknown>) => (
-              <Link
-                href={prepareHref(item.href, query)}
-                target={item.openInNewTab ? "_blank" : undefined}
-                {...props}
-              />
+              <Link href={prepareHref(item.href, query)} target={item.openInNewTab ? "_blank" : undefined} {...props} />
             )
           : undefined;
 
@@ -60,14 +53,7 @@ export const Spotlight = () => {
             {item.icon && (
               <Center w={50} h={50}>
                 {typeof item.icon !== "string" && <item.icon size={24} />}
-                {typeof item.icon === "string" && (
-                  <img
-                    src={item.icon}
-                    alt={item.title}
-                    width={24}
-                    height={24}
-                  />
-                )}
+                {typeof item.icon === "string" && <img src={item.icon} alt={item.title} width={24} height={24} />}
               </Center>
             )}
 
@@ -94,11 +80,7 @@ export const Spotlight = () => {
   );
 
   return (
-    <MantineSpotlight.Root
-      query={query}
-      onQueryChange={setQuery}
-      store={spotlightStore}
-    >
+    <MantineSpotlight.Root query={query} onQueryChange={setQuery} store={spotlightStore}>
       <MantineSpotlight.Search
         placeholder={t("common.rtl", {
           value: t("common.search.placeholder"),
@@ -119,13 +101,7 @@ export const Spotlight = () => {
       </Group>
 
       <MantineSpotlight.ActionsList>
-        {items.length > 0 ? (
-          items
-        ) : (
-          <MantineSpotlight.Empty>
-            {t("common.search.nothingFound")}
-          </MantineSpotlight.Empty>
-        )}
+        {items.length > 0 ? items : <MantineSpotlight.Empty>{t("common.search.nothingFound")}</MantineSpotlight.Empty>}
       </MantineSpotlight.ActionsList>
     </MantineSpotlight.Root>
   );
@@ -135,10 +111,7 @@ const prepareHref = (href: string, query: string) => {
   return href.replace("%s", query);
 };
 
-const translateIfNecessary = (
-  value: string | ((t: TranslationFunction) => string),
-  t: TranslationFunction,
-) => {
+const translateIfNecessary = (value: string | ((t: TranslationFunction) => string), t: TranslationFunction) => {
   if (typeof value === "function") {
     return value(t);
   }
@@ -146,10 +119,7 @@ const translateIfNecessary = (
   return value;
 };
 
-const prepareAction = (
-  action: SpotlightActionData,
-  t: TranslationFunction,
-) => ({
+const prepareAction = (action: SpotlightActionData, t: TranslationFunction) => ({
   ...action,
   title: translateIfNecessary(action.title, t),
   description: translateIfNecessary(action.description, t),

packages/spotlight/src/data-store.ts

@@ -7,9 +7,7 @@ import type { SpotlightActionData, SpotlightActionGroup } from "./type";
 const defaultGroups = ["all", "web", "action"] as const;
 const reversedDefaultGroups = [...defaultGroups].reverse() as string[];
 const actionsAtom = atom<Record<string, readonly SpotlightActionData[]>>({});
-export const actionsAtomRead = atom((get) =>
-  Object.values(get(actionsAtom)).flatMap((item) => item),
-);
+export const actionsAtomRead = atom((get) => Object.values(get(actionsAtom)).flatMap((item) => item));
 
 export const groupsAtomRead = atom((get) =>
   Array.from(
@@ -43,8 +41,7 @@ export const useRegisterSpotlightActions = (
   const setActions = useSetAtom(actionsAtom);
 
   // Use deep compare effect if there are dependencies for the actions, this supports deep compare of the action dependencies
-  const useSpecificEffect =
-    dependencies.length >= 1 ? useDeepCompareEffect : useEffect;
+  const useSpecificEffect = dependencies.length >= 1 ? useDeepCompareEffect : useEffect;
 
   useSpecificEffect(() => {
     if (!registrations.has(key) || dependencies.length >= 1) {

packages/spotlight/src/spotlight-store.ts

@@ -13,12 +13,9 @@ export const setSelectedAction = (index: number, store: SpotlightStore) => {
 export const selectAction = (index: number, store: SpotlightStore): number => {
   const state = store.getState();
   const actionsList = document.getElementById(state.listId);
-  const selected =
-    actionsList?.querySelector<HTMLButtonElement>("[data-selected]");
-  const actions =
-    actionsList?.querySelectorAll<HTMLButtonElement>("[data-action]") ?? [];
-  const nextIndex =
-    index === -1 ? actions.length - 1 : index === actions.length ? 0 : index;
+  const selected = actionsList?.querySelector<HTMLButtonElement>("[data-selected]");
+  const actions = actionsList?.querySelectorAll<HTMLButtonElement>("[data-action]") ?? [];
+  const nextIndex = index === -1 ? actions.length - 1 : index === actions.length ? 0 : index;
 
   const selectedIndex = clamp(nextIndex, 0, actions.length - 1);
   selected?.removeAttribute("data-selected");
@@ -38,8 +35,6 @@ export const selectPreviousAction = (store: SpotlightStore) => {
 };
 export const triggerSelectedAction = (store: SpotlightStore) => {
   const state = store.getState();
-  const selected = document.querySelector<HTMLButtonElement>(
-    `#${state.listId} [data-selected]`,
-  );
+  const selected = document.querySelector<HTMLButtonElement>(`#${state.listId} [data-selected]`);
   selected?.click();
 };

packages/spotlight/src/type.ts

@@ -1,11 +1,7 @@
-import type {
-  TranslationFunction,
-  TranslationObject,
-} from "@homarr/translation";
+import type { TranslationFunction, TranslationObject } from "@homarr/translation";
 import type { TablerIcon } from "@homarr/ui";
 
-export type SpotlightActionGroup =
-  keyof TranslationObject["common"]["search"]["group"];
+export type SpotlightActionGroup = keyof TranslationObject["common"]["search"]["group"];
 
 interface BaseSpotlightAction {
   id: string;