refactor(app): migrate small components to tailwind

src/app/chat/components/__tests__/tailwind-components.test.tsx

@@ -2,6 +2,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 
 import { ChatSendButton } from "../chat-send-button";
+import { ImageBubble } from "../image-bubble";
 import { MessageAvatar } from "../message-avatar";
 import { PrivateMessageCard } from "../private-message-card";
 import { TextBubble } from "../text-bubble";
@@ -90,4 +91,29 @@ describe("chat Tailwind components", () => {
     expect(emptyHtml).toContain("text-[rgba(255,255,255,0.88)]");
     expect(disabledHtml).toContain("disabled");
   });
+
+  it("renders ImageBubble openable and paywalled states", () => {
+    const openableHtml = renderToStaticMarkup(
+      <ImageBubble
+        messageId="message-1"
+        imageUrl="/chat-image.png"
+        onOpenImage={() => undefined}
+      />,
+    );
+    const paywalledHtml = renderToStaticMarkup(
+      <ImageBubble imageUrl="/locked-image.png" imagePaywalled />,
+    );
+
+    expect(openableHtml).toContain('role="button"');
+    expect(openableHtml).toContain('tabindex="0"');
+    expect(openableHtml).toContain('aria-label="Open image in fullscreen"');
+    expect(openableHtml).toContain("rounded-tl-none");
+    expect(openableHtml).toContain("block h-auto w-full object-cover");
+    expect(openableHtml).toContain("data:image/png;base64,/chat-image.png");
+    expect(paywalledHtml).toContain("scale-[1.04] blur-[8px]");
+    expect(paywalledHtml).toContain(
+      "bg-[linear-gradient(180deg,rgba(255,255,255,0.04)_0%,rgba(255,255,255,0.14)_100%)]",
+    );
+    expect(paywalledHtml).toContain("data:image/png;base64,/locked-image.png");
+  });
 });