style: revamp homepage and drawer

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

frontend/src/components/Logo.tsx

@@ -3,10 +3,15 @@ import "@fontsource/knewave/400.css";
 
 interface LogoProps {
   scale?: number;
-  type?: "inline" | "mono" | "logo";
+  type?: "inline" | "mono" | "logo" | null;
+  ul?: boolean;
 }
 
-export default function Logo({ scale = 1, type = "logo" }: LogoProps) {
+export default function Logo({
+  scale = 1,
+  type = null,
+  ul = false,
+}: LogoProps) {
   if (type === "inline") {
     return (
       <span className={"text-accent font-display italic "}>
@@ -24,24 +29,35 @@ export default function Logo({ scale = 1, type = "logo" }: LogoProps) {
     );
   }
 
+  if (type === "logo") {
+    return (
+      <img
+        src="/logo.svg"
+        alt="Pi. Ku. logo"
+        className="mx-4"
+        width={scale * 100}
+      />
+    );
+  }
+
   return (
     <div
       role="img"
       aria-label="Pi. Ku. logo"
-      className="inline-flex items-baseline justify-center leading-none select-none"
+      className={`inline-flex items-baseline justify-center leading-none select-none ${ul ? "ul-wavy" : ""}`}
       style={{ fontFamily: "'Knewave', serif", scale }}
     >
-      <span className={`text-3xl font-light text-accent`}>Pi</span>
+      <span className="text-3xl font-light text-accent">Pi</span>
       <DotIcon
         weight="fill"
         size={12}
-        className={`text-primary translate-y-1 -mx-px`}
+        className="text-primary translate-y-1 -mx-px"
       />
-      <span className={`text-3xl font-light text-accent`}>&nbsp;Ku</span>
+      <span className="text-3xl font-light text-accent">&nbsp;Ku</span>
       <DotIcon
         weight="fill"
         size={12}
-        className={`text-primary translate-y-1 -mx-px`}
+        className="text-primary translate-y-1 -mx-px"
       />
     </div>
   );

frontend/src/components/RouteGuards.test.tsx

@@ -3,14 +3,20 @@ import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { beforeEach, describe, expect, it } from "vitest";
 import { mockUser } from "../../test/fixtures/user.fixture";
 import { useAuthStore } from "../store/useAuthStore";
-import { ProtectedRoute, PublicRoute } from "./RouteGuards";
+import { AutoRedirectRoute, ProtectedRoute } from "./RouteGuards";
 
 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 path="/drawer" element={<div data-testid="drawer-page">Drawer Page</div>} />
+        <Route
+          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>
@@ -85,9 +91,9 @@ describe("PublicRoute", () => {
       user: null,
     });
     renderGuard(
-      <PublicRoute>
+      <AutoRedirectRoute>
         <div data-testid="mock-login-page">Login Page</div>
-      </PublicRoute>,
+      </AutoRedirectRoute>,
       "/public",
     );
     expect(screen.getByTestId("splash-screen")).toBeInTheDocument();
@@ -101,9 +107,9 @@ describe("PublicRoute", () => {
       user: mockUser,
     });
     renderGuard(
-      <PublicRoute>
+      <AutoRedirectRoute>
         <div data-testid="login-form">Login Form</div>
-      </PublicRoute>,
+      </AutoRedirectRoute>,
       "/public",
     );
     expect(screen.getByTestId("drawer-page")).toBeInTheDocument();
@@ -117,9 +123,9 @@ describe("PublicRoute", () => {
       user: null,
     });
     renderGuard(
-      <PublicRoute>
+      <AutoRedirectRoute>
         <div data-testid="login-form">Login Form</div>
-      </PublicRoute>,
+      </AutoRedirectRoute>,
       "/public",
     );
     expect(screen.getByTestId("login-form")).toBeInTheDocument();

frontend/src/components/RouteGuards.tsx

@@ -22,10 +22,10 @@ export function ProtectedRoute({ children }: { children: React.ReactNode }) {
 }
 
 /**
- * Public - auth route guard.
+ * Auto-redirect - auth route guard.
  * If authenticated, redirect all the auth related flows to the drawer
  */
-export function PublicRoute({ children }: { children: React.ReactNode }) {
+export function AutoRedirectRoute({ children }: { children: React.ReactNode }) {
   const { isAuthenticated, isInitializing } = useAuth();
 
   if (isInitializing) return <SplashScreen />;

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

@@ -3,19 +3,23 @@ import { GearFineIcon } from "@phosphor-icons/react";
 interface DrawerSectionProps {
   id: string;
   title: string;
-  count: string;
+  count: number;
+  subtext: string;
   isOpen: boolean;
   onClick: () => void;
   children: React.ReactNode;
+  icon: React.ReactNode;
 }
 
 export function DrawerSection({
   id,
   title,
   count,
+  subtext,
   isOpen,
   onClick,
   children,
+  icon,
 }: DrawerSectionProps) {
   return (
     <div
@@ -23,20 +27,32 @@ export function DrawerSection({
       className={`join-item group flex flex-col transition-colors duration-3000 ease-in-out ${isOpen ? "bg-base-300/30" : ""}`}
     >
       <div
-        className={`transition-all duration-1500 ease-in-out bg-neutral/10 ${
-          isOpen
-            ? "max-h-125 opacity-100 py-3 border-b border-base-content/5 overflow-visible"
-            : "max-h-0 opacity-0 pointer-events-none"
-        }`}
+        className={`bg-neutral/10 transition-all duration-1000 ease-in-out overflow-visible ${isOpen ? "max-h-125" : "max-h-0 pointer-events-none"}`}
       >
-        {children}
+        <div
+          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"
+            >
+              This drawer remains silent
+            </p>
+          )}
+        </div>
       </div>
 
       <button
         type="button"
         onClick={onClick}
         data-testid={`drawer-section-${id}`}
-        className={`w-full p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40`}
+        className="w-full relative p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 overflow-hidden focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40"
       >
         <div className="flex-1">
           <div
@@ -49,8 +65,14 @@ export function DrawerSection({
           >
             {title}
           </div>
-          <div className="font-sans text-[0.6rem] text-base-content/20 mt-1">
-            {count}
+          <div className="font-sans text-xs text-base-content/20 mt-1">
+            <span className="font-mono text-xs md:text-base -mt-1 absolute text-primary/30">
+              {count}
+            </span>{" "}
+            <span className="ml-3">{subtext}</span>
+          </div>
+          <div className="absolute right-5 -translate-y-15 text-base-content/4">
+            {icon}
           </div>
         </div>
 

frontend/src/components/drawer/LetterItem.tsx

@@ -36,7 +36,7 @@ export function LetterItem({
       data-testid={`letter-item-${id}`}
       className={`${isLocked ? "pointer-events-none" : ""} p-4 border-base-content/3 flex items-start gap-4 hover:bg-base-300 transition-all delay-75 duration-100 group text-left cursor-pointer w-9/12 mx-auto hover:scale-120 hover:h-24 hover:-translate-y-3 hover:pb-4 hover:border-x-5 hover:border-t-5 border-t-2 hover:-mb-2`}
     >
-      <div className="text-[0.85rem] italic text-base-content/40 flex-1 truncate group-hover:text-base-content/60 transition-none animate-[opacity_200ms_linear_forwards]">
+      <div className="text-sm italic text-base-content/40 flex-1 truncate group-hover:text-base-content/60">
         {preview}
       </div>
       {unlock_at ? (
@@ -53,7 +53,7 @@ export function LetterItem({
           )}
         </div>
       ) : (
-        <div className="font-sans text-[0.6rem] text-base-content/20 transition-none">
+        <div className="font-sans text-xs text-base-content/20">
           {timestamp}
         </div>
       )}

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/editor/ComposeCanvas.tsx

@@ -122,6 +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();
 
     const minHeight = initialData?.canvasHeight ?? DEFAULT_LOGICAL_HEIGHT;
     logicalSizeRef.current.height = measureLogicalContentHeight(

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}