refactor: lint formatting and fixes (#6)

![image.png](/attachments/182d430f-7b29-48f7-aad6-0aa3ed1708c4)

---------

Co-authored-by: me <ramvignesh-b@github.com>
Reviewed-on: #6

frontend/src/components/Logo.tsx

@@ -1,4 +1,5 @@
 import { DotIcon } from "@phosphor-icons/react";
+import logo from "../assets/logo.svg";
 import "@fontsource/knewave/400.css";
 
 interface LogoProps {
@@ -31,12 +32,7 @@ export default function Logo({
 
   if (type === "logo") {
     return (
-      <img
-        src="/logo.svg"
-        alt="Pi. Ku. logo"
-        className="mx-4"
-        width={scale * 100}
-      />
+      <img src={logo} alt="Pi. Ku. logo" className="mx-4" width={scale * 100} />
     );
   }
 

frontend/src/components/SplashScreen.tsx

@@ -5,7 +5,7 @@ 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')"
+      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/textures/noise.gif')"
     >
       <div className="flex flex-col items-center gap-6 animate-pulse">
         <Logo />

frontend/src/components/drawer/WelcomeLetterOverlay.tsx

@@ -66,7 +66,7 @@ export function WelcomeLetterOverlay({
               type="button"
               data-testid="dismiss-welcome-letter-btn"
               onClick={onComplete}
-              className="btn btn-accent opacity-80 px-12 shadow-lg"
+              className="btn btn-base btn-xs btn-wide opacity-80 shadow-lg font-light tracking-wider"
             >
               I'll see you
             </button>

frontend/src/components/editor/ComposeCanvas.tsx

@@ -122,7 +122,7 @@ export function ComposeCanvas({
   // re-calculates height based on content and applies the zoom transform
   const syncViewport = useCallback(() => {
     if (!(fabricRef.current && wrapperRef.current)) return;
-    textboxRef.current.initDimensions();
+    textboxRef.current?.initDimensions();
 
     const minHeight = initialData?.canvasHeight ?? DEFAULT_LOGICAL_HEIGHT;
     logicalSizeRef.current.height = measureLogicalContentHeight(
@@ -260,17 +260,35 @@ export function ComposeCanvas({
     let resizeObserver: ResizeObserver | null = null;
     let lastWidth = 0;
 
+    const getInitialWidth = async () => {
+      if (!wrapperRef.current) return BASE_WIDTH;
+      let width = wrapperRef.current.clientWidth;
+      if (width === 0) {
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        width = wrapperRef.current?.clientWidth || BASE_WIDTH;
+      }
+      return width;
+    };
+
+    const initResizeOberver = () => {
+      if (!wrapperRef.current) return null;
+      const observer = new ResizeObserver(() => {
+        const nextWidth = wrapperRef.current?.clientWidth;
+        if (!nextWidth || nextWidth === lastWidth) return;
+        lastWidth = nextWidth;
+        syncViewport();
+      });
+      observer.observe(wrapperRef.current);
+      return observer;
+    };
+
     const initCanvas = async () => {
       // HACK: actual font may change the text-width - small ux improvement
       await document.fonts.ready;
 
       if (!(wrapperRef.current && canvasRef.current && isMounted)) return;
 
-      let width = wrapperRef.current.clientWidth;
-      if (width === 0) {
-        await new Promise((resolve) => requestAnimationFrame(resolve));
-        width = wrapperRef.current?.clientWidth || BASE_WIDTH;
-      }
+      const width = await getInitialWidth();
 
       // init the fabric instance
       const canvas = new fabric.Canvas(canvasRef.current, {
@@ -301,13 +319,7 @@ export function ComposeCanvas({
 
       // auto window resizing based width
       lastWidth = wrapperRef.current.clientWidth;
-      resizeObserver = new ResizeObserver(() => {
-        const nextWidth = wrapperRef.current?.clientWidth;
-        if (!nextWidth || nextWidth === lastWidth) return;
-        lastWidth = nextWidth;
-        syncViewport();
-      });
-      resizeObserver.observe(wrapperRef.current!);
+      resizeObserver = initResizeOberver();
     };
 
     initCanvas().then();

frontend/src/components/editor/PostSealModal.tsx

@@ -63,7 +63,11 @@ export function PostSealModal({
               type="button"
               data-testid="view-letter-btn"
               className="btn btn-primary btn-sm"
-              onClick={() => navigate(PATHS.read(sealedTargetId!))}
+              onClick={() => {
+                if (sealedTargetId) {
+                  navigate(PATHS.read(sealedTargetId));
+                }
+              }}
             >
               View letter
             </button>

frontend/src/components/editor/ToolBar.tsx

@@ -11,7 +11,7 @@ import {
   XCircleIcon,
 } from "@phosphor-icons/react";
 import { Modal } from "../ui/Modal";
-import type { CanvasStyle } from "./ComposeCanvas.tsx";
+import type { CanvasStyle } from "./ComposeCanvas";
 
 interface ToolBarProps {
   onAddImage: () => void;

frontend/src/components/login/WelcomeModal.tsx

@@ -3,9 +3,9 @@ import {
   ShieldCheckIcon,
   WarningIcon,
 } from "@phosphor-icons/react";
-import Logo from "../Logo.tsx";
+import Logo from "../Logo";
 import { Modal } from "../ui/Modal";
-import Saajan from "../ui/Saajan.tsx";
+import Saajan from "../ui/Saajan";
 
 export default function WelcomeModal({
   setShowWelcome,
@@ -53,7 +53,7 @@ export default function WelcomeModal({
                   href="https://www.privacyguides.org/en/passwords/"
                   target="_blank"
                   className="link link-primary-content"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                 >
                   password manager
                 </a>{" "}

frontend/src/components/ui/Modal.tsx

@@ -19,7 +19,7 @@ export function Modal({
   return (
     <div
       data-testid={testId}
-      className="modal modal-open modal-middle backdrop-blur-md 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')]"
+      className="modal modal-open modal-middle backdrop-blur-md 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/textures/noise.gif')]"
     >
       <div className="modal-box relative bg-base-100/60 flex flex-col items-center text-center gap-6">
         {onClose && (