refactor: lint

frontend/src/components/RouteGuards.test.tsx

@@ -9,8 +9,14 @@ function renderGuard(ui: React.ReactNode, mountPath: "/protected" | "/public") {
   return render(
     <MemoryRouter initialEntries={[mountPath]}>
       <Routes>
-        <Route path="/login" element={<div data-testid="login-page">Login Page</div>} />
+        <Route
-        <Route path="/drawer" element={<div data-testid="drawer-page">Drawer Page</div>} />
+          path="/login"
+          element={<div data-testid="login-page">Login Page</div>}
+        />
+        <Route
+          path="/drawer"
+          element={<div data-testid="drawer-page">Drawer Page</div>}
+        />
         <Route path="/protected" element={ui} />
         <Route path="/public" element={ui} />
       </Routes>

frontend/src/components/SplashScreen.tsx

@@ -3,7 +3,10 @@ import Logo from "./Logo";
 
 export default function SplashScreen() {
   return (
-    <div data-testid="splash-screen" className="fixed w-screen h-screen inset-0 flex flex-col items-center justify-center z-9999  before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')">
+    <div
+      data-testid="splash-screen"
+      className="fixed w-screen h-screen inset-0 flex flex-col items-center justify-center z-9999  before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')"
+    >
       <div className="flex flex-col items-center gap-6 animate-pulse">
         <Logo />
 

frontend/src/components/drawer/DrawerSection.tsx

@@ -30,14 +30,18 @@ export function DrawerSection({
         className={`bg-neutral/10 transition-all duration-1000 ease-in-out overflow-visible ${isOpen ? "max-h-125" : "max-h-0 pointer-events-none"}`}
       >
         <div
-                    className={`transition-opacity ease-in-out ${isOpen
+          className={`transition-opacity ease-in-out ${
+            isOpen
               ? "opacity-100 py-3 border-b border-base-content/5 duration-700 delay-500"
               : "opacity-0 duration-100"
           }`}
         >
           {children}
           {count === 0 && (
-                        <p data-testid={`empty-drawer-message-${id}`} className="text-center text-base-content/20 mt-4">
+            <p
+              data-testid={`empty-drawer-message-${id}`}
+              className="text-center text-base-content/20 mt-4"
+            >
               This drawer remains silent
             </p>
           )}
@@ -53,7 +57,8 @@ export function DrawerSection({
         <div className="flex-1">
           <div
             data-testid="drawer-section-title"
-                        className={`font-sans text-xs tracking-widester uppercase transition-colors duration-800 ${isOpen
+            className={`font-sans text-xs tracking-widester uppercase transition-colors duration-800 ${
+              isOpen
                 ? "text-base-content"
                 : "text-base-content/40 group-hover:text-base-content/80"
             }`}
@@ -81,7 +86,8 @@ export function DrawerSection({
           />
         ) : (
           <div
-                        className={`w-8 h-1 rounded-sm transition-all duration-300 bg-neutral ${isOpen
+            className={`w-8 h-1 rounded-sm transition-all duration-300 bg-neutral ${
+              isOpen
                 ? "bg-primary/80! opacity-80 scale-110"
                 : "group-hover:bg-primary"
             }`}

frontend/src/components/drawer/PasskeyModal.tsx

@@ -12,7 +12,10 @@ export function PasskeyModal() {
         className="text-primary mx-auto mb-8 animate-pulse"
         weight="duotone"
       />
-      <h3 data-testid="passkey-modal-title" className="font-bold text-lg font-display text-primary">
+      <h3
+        data-testid="passkey-modal-title"
+        className="font-bold text-lg font-display text-primary"
+      >
         You've been away a while.
       </h3>
       <p className="py-4 font-sans">

frontend/src/components/reader/EnvelopeReveal.tsx

@@ -123,7 +123,12 @@ export function EnvelopeReveal({
           <span className={"text-neutral-content/60 font-xs font-display"}>
             to
           </span>
-          <h1 data-testid="envelope-recipient" className="text-3xl font-bold text-base-content">{recipient}</h1>
+          <h1
+            data-testid="envelope-recipient"
+            className="text-3xl font-bold text-base-content"
+          >
+            {recipient}
+          </h1>
           <p className="text-base-content/60 font-display mt-8">{date}</p>
           <img
             src={stamp}

frontend/src/index.css

@@ -58,9 +58,11 @@
   --color-paper: oklch(97% 0.008 80);
   --text-xxs: 10px;
   --tracking-widester: 0.5em;
-    --background-image-vig: radial-gradient(circle at center,
+  --background-image-vig: radial-gradient(
+    circle at center,
     transparent 0%,
-            rgba(0, 0, 0, 0.4) 100%);
+    rgba(0, 0, 0, 0.4) 100%
+  );
 }
 
 .glass-card {

frontend/src/pages/Drawer.test.tsx

@@ -49,9 +49,13 @@ describe("Drawer Page", () => {
     );
 
     expect(screen.getByTestId("drawer-section-drafts")).toBeInTheDocument();
-        expect(screen.getAllByTestId("drawer-section-title").length).toBeGreaterThanOrEqual(1);
+    expect(
+      screen.getAllByTestId("drawer-section-title").length,
+    ).toBeGreaterThanOrEqual(1);
     expect(screen.getByTestId("drawer-section-vault")).toBeInTheDocument();
-        expect(screen.getByTestId("empty-drawer-message-drafts")).toBeInTheDocument();
+    expect(
+      screen.getByTestId("empty-drawer-message-drafts"),
+    ).toBeInTheDocument();
   });
 
   it("renders the loading state", () => {

frontend/src/pages/Drawer.tsx

@@ -74,7 +74,10 @@ export default function Drawer() {
         {loading ? (
           <div className="flex-1 flex flex-col items-center justify-center p-12 gap-4">
             <span className="loading loading-ring loading-lg text-primary opacity-20"></span>
-                        <span data-testid="drawer-loading-state" className="text-xxs uppercase tracking-widester font-sans text-base-content/20 animate-pulse">
+            <span
+              data-testid="drawer-loading-state"
+              className="text-xxs uppercase tracking-widester font-sans text-base-content/20 animate-pulse"
+            >
               Opening your cabinet...
             </span>
           </div>

frontend/src/pages/Editor.test.tsx

@@ -1,4 +1,9 @@
-import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from "@testing-library/react";
 import { HttpResponse, http } from "msw";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -79,7 +84,9 @@ describe("Editor Page", () => {
     );
 
     // Wait for initial load to complete
-    await waitForElementToBeRemoved(() => screen.queryByTestId("opening-draft-overlay"));
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId("opening-draft-overlay"),
+    );
 
     const canvas = screen.getByTestId("canvas");
     expect(canvas.getAttribute("data-readonly")).toBe("false");
@@ -136,7 +143,9 @@ describe("Editor Page", () => {
       </MemoryRouter>,
     );
 
-    await waitForElementToBeRemoved(() => screen.queryByTestId("opening-draft-overlay"));
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId("opening-draft-overlay"),
+    );
 
     const canvas = screen.getByTestId("canvas");
 

frontend/src/pages/Login.test.tsx

@@ -31,7 +31,9 @@ describe("Login Page", () => {
     await userEvent.type(screen.getByLabelText(/password/i), "password123");
     await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
 
-    expect(await screen.findByTestId("login-error-message")).toHaveTextContent(/technical issues/i);
+    expect(await screen.findByTestId("login-error-message")).toHaveTextContent(
+      /technical issues/i,
+    );
   });
 
   it.each([
@@ -73,8 +75,14 @@ describe("Login Page", () => {
       >
         <Routes>
           <Route path="/login" element={<Login />} />
-          <Route path="/drawer" element={<div data-testid="drawer-page">Drawer</div>} />
+          <Route
-          <Route path="/read/:publicId" element={<div data-testid="reader-page">Reader</div>} />
+            path="/drawer"
+            element={<div data-testid="drawer-page">Drawer</div>}
+          />
+          <Route
+            path="/read/:publicId"
+            element={<div data-testid="reader-page">Reader</div>}
+          />
         </Routes>
       </MemoryRouter>,
     );
@@ -83,7 +91,8 @@ describe("Login Page", () => {
     await userEvent.type(screen.getByLabelText(/password/i), "password123");
     await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
 
-    const expectedTestId = nextRoute.toLowerCase() === "drawer" ? "drawer-page" : "reader-page";
+    const expectedTestId =
+      nextRoute.toLowerCase() === "drawer" ? "drawer-page" : "reader-page";
     expect(await screen.findByTestId(expectedTestId)).toBeInTheDocument();
   });
 });

frontend/src/pages/Reader.test.tsx

@@ -76,7 +76,9 @@ describe("Reader Page", () => {
         </Routes>
       </MemoryRouter>,
     );
-    expect(await screen.findByTestId("envelope-recipient")).toHaveTextContent(/Guest/i);
+    expect(await screen.findByTestId("envelope-recipient")).toHaveTextContent(
+      /Guest/i,
+    );
   });
 
   it("should display an error message if the server request fails", async () => {
@@ -97,9 +99,9 @@ describe("Reader Page", () => {
       </MemoryRouter>,
     );
 
-    expect(
+    expect(await screen.findByTestId("log-modal-message")).toHaveTextContent(
-      await screen.findByTestId("log-modal-message"),
+      /Failed to load letter/i,
-    ).toHaveTextContent(/Failed to load letter/i);
+    );
   });
 
   it("should navigate to the login page with redirect url when the letter has no sharing key and the user is not logged in", async () => {