fix: Apply prettier for scr/app

.prettierignore

@@ -11,7 +11,6 @@ src/db/**/*.js
 # These files are remnants of our Express app:
 src/app.js
 src/appConstants.js
-src/app/
 src/routes/
 src/client/
 src/views/

src/app/(nextjs_migration)/(authenticated)/user/breaches/page.tsx

@@ -119,26 +119,37 @@ export default async function UserBreaches() {
         });
 
         return (
-          <details key={breach.Name + account.email} className='breach-row' data-status={status} data-email={account.email} data-classes={dataClassesTranslated} hidden={isHidden}>
+          <details
+            key={breach.Name + account.email}
+            className="breach-row"
+            data-status={status}
+            data-email={account.email}
+            data-classes={dataClassesTranslated}
+            hidden={isHidden}
+          >
             <summary>
-              <span className='breach-company'><BreachLogo breach={breach} logos={breachLogos} /> {breach.Title}</span>
+              <span className="breach-company">
+                <BreachLogo breach={breach} logos={breachLogos} />{" "}
+                {breach.Title}
+              </span>
               <span>{shortList.format(dataClassesTranslated)}</span>
               <span>
-                <span className='resolution-badge is-resolved'>{l10n.getString(
-                  "column-status-badge-resolved"
-                )}</span>
-                <span className='resolution-badge is-active'>{l10n.getString(
-                  "column-status-badge-active"
-                )}</span>
+                <span className="resolution-badge is-resolved">
+                  {l10n.getString("column-status-badge-resolved")}
+                </span>
+                <span className="resolution-badge is-active">
+                  {l10n.getString("column-status-badge-active")}
+                </span>
               </span>
               <span>{shortDate.format(addedDate)}</span>
             </summary>
             <article>
               <p>{description}</p>
-              <p><strong>{l10n.getString(
-                "breaches-resolve-heading"
-              )}</strong></p>
-              <ol className='resolve-list'
+              <p>
+                <strong>{l10n.getString("breaches-resolve-heading")}</strong>
+              </p>
+              <ol
+                className="resolve-list"
                 dangerouslySetInnerHTML={{ __html: createResolveSteps(breach) }}
               />
             </article>
@@ -158,9 +169,17 @@ export default async function UserBreaches() {
       <Script type="module" src="/nextjs_migration/client/js/dialog.js" />
       <main data-partial="breaches">
         <section>
-          {(process.env.PREMIUM_ENABLED === "true" && !session?.user.fxa?.subscriptions?.includes("monitor")) ?
-            <a className="button primary" href={process.env.SUBSCRIBE_PREMIUM_URL}>Subscribe to Premium</a>
-            : ''}
+          {process.env.PREMIUM_ENABLED === "true" &&
+          !session?.user.fxa?.subscriptions?.includes("monitor") ? (
+            <a
+              className="button primary"
+              href={process.env.SUBSCRIBE_PREMIUM_URL}
+            >
+              Subscribe to Premium
+            </a>
+          ) : (
+            ""
+          )}
         </section>
         <section>
           <header className="breaches-header">

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

@@ -244,7 +244,9 @@ function getBreachDetail(categoryId: ReturnType<typeof getBreachCategory>) {
   }
 }
 
-function makeBreachDetail(breachCategory: ReturnType<typeof getBreachCategory>) {
+function makeBreachDetail(
+  breachCategory: ReturnType<typeof getBreachCategory>
+) {
   const breachDetail = getBreachDetail(breachCategory);
   return (
     <>

src/app/(nextjs_migration)/(guest)/page.tsx

@@ -18,7 +18,11 @@ export default async function Home() {
 
   return (
     <div data-partial="landing">
-      <script type="module" src="/nextjs_migration/client/js/transitionObserver.js" async></script>
+      <script
+        type="module"
+        src="/nextjs_migration/client/js/transitionObserver.js"
+        async
+      ></script>
       <Script type="module" src="/nextjs_migration/client/js/landing.js" />
       <section className="hero">
         <div>
@@ -107,10 +111,7 @@ export default async function Home() {
         </figure>
       </section>
 
-      <section
-        className="top-questions-about-monitor"
-        data-enter-transition
-      >
+      <section className="top-questions-about-monitor" data-enter-transition>
         <div>
           <h2>{l10n.getString("top-questions-about-monitor")}</h2>
           <a

src/app/(nextjs_migration)/layout.tsx

@@ -15,7 +15,11 @@ export default async function MigrationLayout({
   const l10nBundles = getL10nBundles();
   return (
     <L10nProvider bundleSources={l10nBundles}>
-      <script type="module" src="/nextjs_migration/client/js/resizeObserver.js" async />
+      <script
+        type="module"
+        src="/nextjs_migration/client/js/resizeObserver.js"
+        async
+      />
       <Script type="module" src="/nextjs_migration/client/js/analytics.js" />
       {children}
     </L10nProvider>

src/app/(proper_react)/MobileShell.module.scss

@@ -110,8 +110,8 @@
             text-decoration: underline;
           }
 
-                    // The `a` and `a:visited` violate this rule, but are safe:
-                    // stylelint-disable-next-line no-descending-specificity
+          // The `a` and `a:visited` violate this rule, but are safe:
+          // stylelint-disable-next-line no-descending-specificity
           &:focus {
             background-color: $color-blue-50;
             color: $color-white;

src/app/(proper_react)/Shell.stories.tsx

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof ShellEl>;
 export const Shell: Story = {
   render: () => (
     <ShellEl l10n={getL10n()} session={null}>
-      <div style={{height: 800}}></div>
+      <div style={{ height: 800 }}></div>
     </ShellEl>
   ),
 };

src/app/(proper_react)/Shell.tsx

@@ -92,4 +92,4 @@ export const Shell = (props: Props) => {
       </div>
     </MobileShell>
   );
-}
+};

src/app/[slug]/route.ts

@@ -14,7 +14,7 @@ export async function GET(req: NextRequest) {
     // Note: we do not `await` this Promise, to ensure we do not delay sending
     //       the heartbeat response while we are still fetching the data.
     // TODO: Replace with a cron job to fetch breach data and icons.
-    getBreaches().then(breaches => getBreachIcons(breaches));
+    getBreaches().then((breaches) => getBreachIcons(breaches));
     return NextResponse.json({ success: true, message: "OK" }, { status: 200 });
   }
 

src/app/api/utils/auth.ts

@@ -5,21 +5,21 @@
 import { NextRequest } from "next/server";
 
 export function bearerToken(req: NextRequest) {
-  const requestHeaders = new Headers(req.headers)
-  requestHeaders.get('authorization')
-  const authHeader = requestHeaders.get('authorization')
+  const requestHeaders = new Headers(req.headers);
+  requestHeaders.get("authorization");
+  const authHeader = requestHeaders.get("authorization");
 
   // Require an auth header
   if (!authHeader) {
-    throw new Error('No auth header found');
+    throw new Error("No auth header found");
   }
 
   // Extract the first portion which should be 'Bearer'
-  const headerType = authHeader.substring(0, authHeader.indexOf(' '))
-  if (headerType !== 'Bearer') {
-    throw new Error('Invalid auth type');
+  const headerType = authHeader.substring(0, authHeader.indexOf(" "));
+  if (headerType !== "Bearer") {
+    throw new Error("Invalid auth type");
   }
 
   // The remaining portion, which should be the token
-  return authHeader.substring(authHeader.indexOf(' ') + 1)
-}
+  return authHeader.substring(authHeader.indexOf(" ") + 1);
+}

src/app/api/utils/email.ts

@@ -10,7 +10,11 @@ import { getTemplate } from "../../../views/emails/email2022.js";
 import { verifyPartial } from "../../../views/emails/emailVerify.js";
 import { Subscriber } from "../../(nextjs_migration)/(authenticated)/user/breaches/breaches";
 
-export async function sendVerificationEmail(user: Subscriber, emailId: string, l10n: ReactLocalization) {
+export async function sendVerificationEmail(
+  user: Subscriber,
+  emailId: string,
+  l10n: ReactLocalization
+) {
   const getMessage = getStringLookup(l10n);
   const unverifiedEmailAddressRecord = await resetUnverifiedEmailAddress(
     emailId,