From 1735aeb1399a9dc78d153ba1c5476cc4f8dc1b9f Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.fr>
Date: Thu, 10 Sep 2026 19:58:44 +0200
Subject: [PATCH] style: format merged dev files

---
 .agents/skills/datatable-migration/SKILL.md   | 67 ++++---------------
 .mcp.json                                     |  2 +-
 .../docs/management/certificates/index.mdx    |  3 +
 3 files changed, 17 insertions(+), 55 deletions(-)

diff --git a/.agents/skills/datatable-migration/SKILL.md b/.agents/skills/datatable-migration/SKILL.md
index 62bbc94c3..2138afc38 100644
--- a/.agents/skills/datatable-migration/SKILL.md
+++ b/.agents/skills/datatable-migration/SKILL.md
@@ -150,21 +150,13 @@ Create a CSS file alongside the component:
 
 /* Hover: translucent instead of opaque */
 .my-table .mantine-datatable-table tbody tr:hover {
-  background-color: color-mix(
-    in srgb,
-    var(--mantine-color-default-hover) 40%,
-    transparent
-  ) !important;
+  background-color: color-mix(in srgb, var(--mantine-color-default-hover) 40%, transparent) !important;
 }
 
 /* Headers: frosted glass effect */
 .my-table th {
   white-space: nowrap;
-  background-color: color-mix(
-    in srgb,
-    var(--mantine-color-body) 60%,
-    transparent
-  ) !important;
+  background-color: color-mix(in srgb, var(--mantine-color-body) 60%, transparent) !important;
   backdrop-filter: blur(8px);
 }
 
@@ -186,11 +178,7 @@ Create a CSS file alongside the component:
 
 /* Row expansion area */
 .my-table .mantine-datatable-row-expansion-cell {
-  background-color: color-mix(
-    in srgb,
-    var(--mantine-color-body) 40%,
-    transparent
-  ) !important;
+  background-color: color-mix(in srgb, var(--mantine-color-body) 40%, transparent) !important;
 }
 ```
 
@@ -258,9 +246,7 @@ const size = useMemo(() => getSizeConfig(width), [width]);
 Then use a visibility check lookup table for columns:
 
 ```typescript
-const columnVisibilityChecks: Partial<
-  Record<string, (ctx: ColumnContext) => boolean>
-> = {
+const columnVisibilityChecks: Partial<Record<string, (ctx: ColumnContext) => boolean>> = {
   upSpeed: (ctx) => ctx.hasTorrents && ctx.size.showSpeedColumns,
   downSpeed: (ctx) => ctx.size.showSpeedColumns,
   time: (ctx) => ctx.size.showTimeColumn,
@@ -319,13 +305,8 @@ const storeKey = `mytable-${itemId ?? "preview"}-${[...options.columns].toSorted
 On mount, seed `useDataTableColumns` with server-persisted values. Use a `hydrated` ref to prevent the persist effect from immediately writing defaults back:
 
 ```typescript
-const {
-  effectiveColumns,
-  columnsOrder,
-  columnsWidth,
-  setColumnsOrder,
-  setMultipleColumnWidths,
-} = useDataTableColumns<MyRow>({ key: storeKey, columns });
+const { effectiveColumns, columnsOrder, columnsWidth, setColumnsOrder, setMultipleColumnWidths } =
+  useDataTableColumns<MyRow>({ key: storeKey, columns });
 
 const lastStoreKey = useRef(storeKey);
 const hydrated = useRef(false);
@@ -348,13 +329,7 @@ useEffect(() => {
   requestAnimationFrame(() => {
     hydrated.current = true;
   });
-}, [
-  storeKey,
-  savedOrder,
-  savedWidths,
-  setColumnsOrder,
-  setMultipleColumnWidths,
-]);
+}, [storeKey, savedOrder, savedWidths, setColumnsOrder, setMultipleColumnWidths]);
 ```
 
 ### Persist localStorage → server
@@ -367,17 +342,14 @@ const prevWidths = useRef(columnsWidth);
 
 useEffect(() => {
   if (!hydrated.current) return;
-  const orderChanged =
-    JSON.stringify(columnsOrder) !== JSON.stringify(prevOrder.current);
-  const widthsChanged =
-    JSON.stringify(columnsWidth) !== JSON.stringify(prevWidths.current);
+  const orderChanged = JSON.stringify(columnsOrder) !== JSON.stringify(prevOrder.current);
+  const widthsChanged = JSON.stringify(columnsWidth) !== JSON.stringify(prevWidths.current);
   prevOrder.current = columnsOrder;
   prevWidths.current = columnsWidth;
 
   if (!orderChanged && !widthsChanged) return;
 
-  if (orderChanged)
-    persistOption({ columnOrder: JSON.stringify(columnsOrder) });
+  if (orderChanged) persistOption({ columnOrder: JSON.stringify(columnsOrder) });
   if (widthsChanged) {
     const widthMap: Record<string, number> = {};
     for (const entry of columnsWidth) {
@@ -385,8 +357,7 @@ useEffect(() => {
       if (!key) continue;
       const v = entry[key as keyof typeof entry];
       if (typeof v === "number") widthMap[key] = v;
-      else if (typeof v === "string" && v.endsWith("px"))
-        widthMap[key] = parseInt(v, 10);
+      else if (typeof v === "string" && v.endsWith("px")) widthMap[key] = parseInt(v, 10);
     }
     persistOption({ columnWidths: JSON.stringify(widthMap) });
   }
@@ -426,22 +397,10 @@ const handleContextMenu = useCallback(
 The menu component uses `Portal` for correct z-index:
 
 ```tsx
-function RowContextMenu({
-  state,
-  onClose,
-}: {
-  state: ContextMenuState;
-  onClose: () => void;
-}) {
+function RowContextMenu({ state, onClose }: { state: ContextMenuState; onClose: () => void }) {
   return (
     <Portal>
-      <Menu
-        opened
-        onClose={onClose}
-        closeOnItemClick={false}
-        position="right-start"
-        offset={0}
-      >
+      <Menu opened onClose={onClose} closeOnItemClick={false} position="right-start" offset={0}>
         <Menu.Target>
           <Box
             style={{
diff --git a/.mcp.json b/.mcp.json
index 515d300c4..6636fc5c1 100644
--- a/.mcp.json
+++ b/.mcp.json
@@ -5,4 +5,4 @@
       "args": ["-y", "@mantine/mcp-server"]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/apps/docs/docs/management/certificates/index.mdx b/apps/docs/docs/management/certificates/index.mdx
index 27c211378..7631a44c2 100644
--- a/apps/docs/docs/management/certificates/index.mdx
+++ b/apps/docs/docs/management/certificates/index.mdx
@@ -54,16 +54,19 @@ The certificates are stored in the `/appdata/trusted-certificates` directory whi
 This means you can automate the update of the certificates by simply replacing or adding a new file in the directory.
 
 ## Obtaining certificates
+
 Every integration has its own way of obtaining certificates.
 Generally it is recommended to search for the documentation of the integration you are using.
 Most of the time you can find the certificate in the file system of the integration.
 The certificate file needs to be uploaded to Homarr. To first get the file on your computer you can either:
+
 - use `scp user@host:/path/to/file ./certificate.pem`
 - use `cat /path/to/file` to print the certificate. Then recreate the file on your machine.
 
 Below you can find instructions for some of the integrations.
 
 ### Pi-hole (v6)
+
 Since version 6 of Pi-hole, the web interface can be accessed through HTTPS.
 The certificate can be found in the path `/etc/pihole/tls_ca.crt`. To add the certificate, this file needs to be copied and uploaded to Homarr.
 You can find more details regarding SSL / TLS for Pi-hole [here](https://docs.pi-hole.net/api/tls/).