refactor(core): migrate fallback styles to tailwind

src/app/_components/core/__tests__/tailwind-components.test.tsx

@@ -2,6 +2,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 
 import { LoadingIndicator } from "../loading-indicator";
+import { PageLoadingFallback } from "../page-loading-fallback";
 
 describe("core Tailwind components", () => {
   it("renders LoadingIndicator with accessible status and dynamic sizing", () => {
@@ -18,4 +19,17 @@ describe("core Tailwind components", () => {
     expect(html).toContain("border-color:#f00 transparent transparent transparent");
     expect(html).toContain("Loading now");
   });
+
+  it("renders PageLoadingFallback with tone utilities", () => {
+    const html = renderToStaticMarkup(
+      <PageLoadingFallback background="#111111" tone="dark">
+        Loading chat...
+      </PageLoadingFallback>,
+    );
+
+    expect(html).toContain("grid");
+    expect(html).toContain("min-h-[60vh]");
+    expect(html).toContain("text-[rgba(255,255,255,0.72)]");
+    expect(html).toContain("Loading chat...");
+  });
 });

src/app/_components/core/fixed-bottom-area.module.css

@@ -1,19 +0,0 @@
-.area {
-  position: sticky;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: var(--fixed-bottom-z-index, 5);
-  flex: 0 0 auto;
-  padding:
-    var(--fixed-bottom-padding-top, 12px)
-    calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px))
-    calc(var(--fixed-bottom-padding-bottom, 12px) + var(--app-safe-bottom, 0px))
-    calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px));
-  background: var(--fixed-bottom-background, transparent);
-}
-
-.area[data-elevated="true"] {
-  box-shadow: 0 -14px 32px rgba(31, 21, 25, 0.08);
-  backdrop-filter: blur(18px);
-}

src/app/_components/core/fixed-bottom-area.tsx

@@ -1,33 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-
-import styles from "./fixed-bottom-area.module.css";
-
-export interface FixedBottomAreaProps {
-  children: ReactNode;
-  className?: string;
-  background?: string;
-  elevated?: boolean;
-}
-
-export function FixedBottomArea({
-  children,
-  className,
-  background,
-  elevated = false,
-}: FixedBottomAreaProps) {
-  const style = background
-    ? ({
-        "--fixed-bottom-background": background,
-      } as CSSProperties)
-    : undefined;
-
-  return (
-    <div
-      className={[styles.area, className].filter(Boolean).join(" ")}
-      data-elevated={elevated}
-      style={style}
-    >
-      {children}
-    </div>
-  );
-}

src/app/_components/core/index.ts

@@ -6,7 +6,6 @@ export * from "./app-bottom-nav";
 export * from "./bottom-sheet";
 export * from "./checkbox";
 export * from "./dialog";
-export * from "./fixed-bottom-area";
 export * from "./loading-indicator";
 export * from "./mobile-shell";
 export * from "./page-loading-fallback";

src/app/_components/core/page-loading-fallback.module.css

@@ -1,19 +0,0 @@
-.content {
-  display: grid;
-  min-height: 60vh;
-  place-items: center;
-  padding: 2rem;
-  text-align: center;
-}
-
-.neutral {
-  color: #666;
-}
-
-.dark {
-  color: rgba(255, 255, 255, 0.72);
-}
-
-.warm {
-  color: #8b6265;
-}

src/app/_components/core/page-loading-fallback.tsx

@@ -1,5 +1,4 @@
 import { MobileShell } from "./mobile-shell";
-import styles from "./page-loading-fallback.module.css";
 
 export interface PageLoadingFallbackProps {
   children: string;
@@ -12,9 +11,17 @@ export function PageLoadingFallback({
   background,
   tone = "neutral",
 }: PageLoadingFallbackProps) {
+  const toneClass = {
+    neutral: "text-[#666]",
+    dark: "text-[rgba(255,255,255,0.72)]",
+    warm: "text-[#8b6265]",
+  }[tone];
+
   return (
     <MobileShell background={background}>
-      <div className={`${styles.content} ${styles[tone]}`}>{children}</div>
+      <div className={`grid min-h-[60vh] place-items-center p-8 text-center ${toneClass}`}>
+        {children}
+      </div>
     </MobileShell>
   );
 }