chore: standardize security and quality foundations

frontend/app/ui/SiteStatus.tsx

@@ -1,68 +1,70 @@
-'use client'
+"use client";
 
-import { useEffect, useState, type CSSProperties } from 'react'
-import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
+import { useEffect, useState, type CSSProperties } from "react";
+import { authFetch, clearToken, getApiBase, getToken } from "../lib/auth";
 
 type BannerInfo = {
-  enabled: boolean
-  message: string
-  tone?: string
-  backgroundColor?: string | null
-  borderColor?: string | null
-}
+  enabled: boolean;
+  message: string;
+  tone?: string;
+  backgroundColor?: string | null;
+  borderColor?: string | null;
+};
 
 type SiteInfo = {
-  buildNumber?: string
-  banner?: BannerInfo
-}
+  buildNumber?: string;
+  banner?: BannerInfo;
+};
 
 const buildRequest = () => {
-  const token = getToken()
-  const baseUrl = getApiBase()
-  const url = token ? `${baseUrl}/site/info` : `${baseUrl}/site/public`
-  const fetcher = token ? authFetch : fetch
-  return { token, url, fetcher }
-}
+  const token = getToken();
+  const baseUrl = getApiBase();
+  const url = token ? `${baseUrl}/site/info` : `${baseUrl}/site/public`;
+  const fetcher = token ? authFetch : fetch;
+  return { token, url, fetcher };
+};
 
 export default function SiteStatus() {
-  const [info, setInfo] = useState<SiteInfo | null>(null)
+  const [info, setInfo] = useState<SiteInfo | null>(null);
 
   useEffect(() => {
-    let active = true
+    let active = true;
     const load = async () => {
       try {
-        const { token, url, fetcher } = buildRequest()
-        const response = await fetcher(url)
+        const { token, url, fetcher } = buildRequest();
+        const response = await fetcher(url);
         if (!response.ok) {
           if (response.status === 401 && token) {
-            clearToken()
+            clearToken();
           }
-          return
+          return;
         }
-        const data = await response.json()
-        if (!active) return
-        setInfo(data)
+        const data = await response.json();
+        if (!active) return;
+        setInfo(data);
       } catch (err) {
-        console.error(err)
+        console.error(err);
       }
-    }
-    void load()
+    };
+    void load();
     return () => {
-      active = false
-    }
-  }, [])
+      active = false;
+    };
+  }, []);
 
-  const banner = info?.banner
-  const tone = banner?.tone || 'info'
+  const banner = info?.banner;
+  const tone = banner?.tone || "info";
   const bannerStyle = {
-    '--site-banner-background-color': banner?.backgroundColor || undefined,
-    '--site-banner-border-color': banner?.borderColor || undefined,
-  } as CSSProperties
+    "--site-banner-background-color": banner?.backgroundColor || undefined,
+    "--site-banner-border-color": banner?.borderColor || undefined,
+  } as CSSProperties;
   return (
     <>
       {banner?.enabled && banner.message ? (
-        <div className={`site-banner site-banner--${tone}`} style={bannerStyle}>{banner.message}</div>
+        <div className={`site-banner site-banner--${tone}`} style={bannerStyle}>
+          {banner.message}
+        </div>
       ) : null}
     </>
-  )
+  );
 }