feat(private-room): connect moments feed

src/app/chat/hooks/use-chat-guest-login.ts

@@ -1,63 +1,14 @@
 "use client";
 
-import { type Dispatch, useEffect, useRef } from "react";
+import {
+  type UseGuestLoginBootstrapInput,
+  shouldSubmitGuestLogin,
+  useGuestLoginBootstrap,
+} from "@/hooks/use-guest-login-bootstrap";
 
-import type { LoginStatus } from "@/data/dto/auth";
-import type { AuthEvent } from "@/stores/auth/auth-events";
+export type UseChatGuestLoginInput = UseGuestLoginBootstrapInput;
+export { shouldSubmitGuestLogin };
 
-export interface GuestLoginState {
-  hasInitialized: boolean;
-  isLoading: boolean;
-  loginStatus: LoginStatus;
-}
-
-export interface ShouldSubmitGuestLoginInput extends GuestLoginState {
-  alreadyRequested: boolean;
-}
-
-export interface UseChatGuestLoginInput extends GuestLoginState {
-  dispatch: Dispatch<AuthEvent>;
-}
-
-export function shouldSubmitGuestLogin({
-  alreadyRequested,
-  hasInitialized,
-  isLoading,
-  loginStatus,
-}: ShouldSubmitGuestLoginInput): boolean {
-  if (!hasInitialized || isLoading) return false;
-  if (loginStatus !== "notLoggedIn") return false;
-  return !alreadyRequested;
-}
-
-export function useChatGuestLogin({
-  dispatch,
-  hasInitialized,
-  isLoading,
-  loginStatus,
-}: UseChatGuestLoginInput): void {
-  const guestLoginRequestedRef = useRef(false);
-
-  useEffect(() => {
-    if (!hasInitialized || isLoading) return;
-
-    if (loginStatus !== "notLoggedIn") {
-      guestLoginRequestedRef.current = false;
-      return;
-    }
-
-    if (
-      !shouldSubmitGuestLogin({
-        alreadyRequested: guestLoginRequestedRef.current,
-        hasInitialized,
-        isLoading,
-        loginStatus,
-      })
-    ) {
-      return;
-    }
-
-    guestLoginRequestedRef.current = true;
-    dispatch({ type: "AuthGuestLoginSubmitted" });
-  }, [dispatch, hasInitialized, isLoading, loginStatus]);
+export function useChatGuestLogin(input: UseChatGuestLoginInput): void {
+  useGuestLoginBootstrap(input);
 }

src/app/private-room/page.tsx

@@ -0,0 +1,5 @@
+import { PrivateRoomScreen } from "./private-room-screen";
+
+export default function PrivateRoomPage() {
+  return <PrivateRoomScreen />;
+}

src/app/private-room/private-room-screen.module.css

@@ -90,7 +90,6 @@
 }
 
 .avatarFrame {
-  position: relative;
   display: grid;
   width: clamp(68px, 16.667vw, 90px);
   height: clamp(68px, 16.667vw, 90px);
@@ -122,9 +121,13 @@
   line-height: 0.95;
 }
 
+.handle,
+.bio {
+  color: #755f66;
+}
+
 .handle {
   margin: 7px 0 0;
-  color: #a56f7b;
   font-size: clamp(13px, 3.148vw, 17px);
   font-weight: 720;
 }
@@ -132,39 +135,32 @@
 .bio {
   max-width: 360px;
   margin: 0;
-  color: #755f66;
   font-size: clamp(14px, 3.333vw, 18px);
   font-weight: 620;
   line-height: 1.55;
 }
 
-.primaryCta {
+.primaryCta,
+.loadMoreButton {
   display: inline-flex;
   min-height: 48px;
   align-items: center;
   justify-content: center;
   gap: 9px;
-  padding: 0 18px;
   border: 0;
   border-radius: 999px;
-  background: linear-gradient(135deg, #262026, #7f5861);
-  color: #ffffff;
   cursor: pointer;
   font: inherit;
-  font-size: clamp(13px, 3.148vw, 16px);
   font-weight: 850;
-  box-shadow: 0 14px 30px rgba(47, 35, 40, 0.18);
   transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
 }
 
-.primaryCta:hover {
-  filter: brightness(1.04);
-  box-shadow: 0 18px 36px rgba(47, 35, 40, 0.23);
-  transform: translateY(-1px);
-}
-
-.primaryCta:active {
-  transform: translateY(1px) scale(0.99);
+.primaryCta {
+  padding: 0 18px;
+  background: linear-gradient(135deg, #262026, #7f5861);
+  color: #ffffff;
+  font-size: clamp(13px, 3.148vw, 16px);
+  box-shadow: 0 14px 30px rgba(47, 35, 40, 0.18);
 }
 
 .postsSection {
@@ -217,13 +213,17 @@
   gap: 14px;
 }
 
-.postCard {
-  padding: clamp(14px, 3.704vw, 20px);
+.postCard,
+.statusCard {
   border: 1px solid rgba(44, 29, 34, 0.07);
   border-radius: clamp(22px, 5.926vw, 32px);
   background: rgba(255, 255, 255, 0.86);
   box-shadow: 0 16px 42px rgba(131, 72, 85, 0.1);
   backdrop-filter: blur(18px);
+}
+
+.postCard {
+  padding: clamp(14px, 3.704vw, 20px);
   animation: riseIn 0.42s ease both;
   animation-delay: calc(var(--reveal-index, 0) * 90ms + 80ms);
 }
@@ -250,8 +250,13 @@
   box-shadow: 0 8px 18px rgba(131, 72, 85, 0.12);
 }
 
-.authorName {
+.authorName,
+.authorSubline,
+.postText {
   margin: 0;
+}
+
+.authorName {
   color: #26191d;
   font-size: clamp(14px, 3.333vw, 17px);
   font-weight: 820;
@@ -259,7 +264,7 @@
 }
 
 .authorSubline {
-  margin: 3px 0 0;
+  margin-top: 3px;
   color: #a58b92;
   font-size: clamp(11px, 2.778vw, 13px);
   font-weight: 680;
@@ -272,6 +277,14 @@
   font-weight: 760;
 }
 
+.postText {
+  margin-top: 14px;
+  color: #4c3a40;
+  font-size: clamp(14px, 3.333vw, 17px);
+  font-weight: 650;
+  line-height: 1.55;
+}
+
 .lockedPreview {
   display: grid;
   width: 100%;
@@ -293,21 +306,9 @@
   transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 }
 
-.lockedPreview:hover {
-  border-color: rgba(255, 82, 139, 0.45);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 36px rgba(255, 116, 159, 0.18);
-  transform: translateY(-1px);
-}
-
-.lockedPreview:active {
-  transform: translateY(1px) scale(0.995);
-}
-
-.lockedPreview:focus-visible,
-.primaryCta:focus-visible,
-.navButton:focus-visible {
-  outline: 2px solid #ff5d95;
-  outline-offset: 3px;
+.lockedPreview:disabled {
+  cursor: wait;
+  opacity: 0.72;
 }
 
 .previewIcon {
@@ -350,6 +351,49 @@
   font-weight: 760;
 }
 
+.imageGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.unlockedImage {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1;
+  border-radius: 22px;
+  object-fit: cover;
+  box-shadow: 0 14px 32px rgba(131, 72, 85, 0.14);
+}
+
+.statusCard {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 14px;
+  padding: 18px;
+  color: #755f66;
+  font-size: 15px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.statusCard p {
+  margin: 0;
+}
+
+.statusCard button,
+.loadMoreButton {
+  padding: 0 18px;
+  background: rgba(255, 93, 149, 0.12);
+  color: #a94c64;
+}
+
+.loadMoreButton {
+  width: 100%;
+  margin-top: 16px;
+}
+
 .bottomNav {
   position: fixed;
   right: max(calc((100vw - var(--app-max-width, 540px)) / 2), 0px);
@@ -386,16 +430,6 @@
   font: inherit;
   font-size: clamp(12px, 2.963vw, 14px);
   font-weight: 820;
-  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
-}
-
-.navButton:hover {
-  background: rgba(255, 116, 159, 0.08);
-  color: #2d2024;
-}
-
-.navButton:active {
-  transform: scale(0.98);
 }
 
 .navButtonActive {
@@ -405,6 +439,111 @@
   box-shadow: 0 10px 24px rgba(255, 116, 159, 0.12);
 }
 
+.dialogOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(34, 23, 28, 0.36);
+  backdrop-filter: blur(10px);
+}
+
+.dialog {
+  width: min(100%, 360px);
+  padding: 22px;
+  border-radius: 26px;
+  background: #ffffff;
+  box-shadow: 0 24px 70px rgba(34, 23, 28, 0.22);
+}
+
+.dialogTitle {
+  margin: 0;
+  color: #21171b;
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.dialogCopy,
+.dialogError {
+  margin: 10px 0 0;
+  color: #755f66;
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.45;
+}
+
+.dialogError {
+  color: #c63f67;
+}
+
+.dialogActions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.dialogPrimary,
+.dialogSecondary {
+  min-height: 46px;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 850;
+}
+
+.dialogPrimary {
+  background: linear-gradient(135deg, #ff7aa9, #ffb36d);
+  color: #ffffff;
+}
+
+.dialogSecondary {
+  background: rgba(44, 29, 34, 0.08);
+  color: #5f4b52;
+}
+
+.toast {
+  position: fixed;
+  right: max(calc((100vw - var(--app-max-width, 540px)) / 2 + 18px), 18px);
+  bottom: calc(var(--app-safe-bottom, 0px) + 92px);
+  left: max(calc((100vw - var(--app-max-width, 540px)) / 2 + 18px), 18px);
+  z-index: 45;
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: rgba(33, 23, 27, 0.88);
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 750;
+  text-align: center;
+}
+
+.primaryCta:hover,
+.lockedPreview:hover,
+.loadMoreButton:hover {
+  filter: brightness(1.04);
+  transform: translateY(-1px);
+}
+
+.primaryCta:active,
+.lockedPreview:active,
+.loadMoreButton:active,
+.navButton:active {
+  transform: translateY(1px) scale(0.99);
+}
+
+.primaryCta:focus-visible,
+.lockedPreview:focus-visible,
+.navButton:focus-visible,
+.loadMoreButton:focus-visible,
+.dialogPrimary:focus-visible,
+.dialogSecondary:focus-visible {
+  outline: 2px solid #ff5d95;
+  outline-offset: 3px;
+}
+
 @keyframes riseIn {
   from {
     opacity: 0;

src/app/private-room/private-room-screen.tsx

@@ -0,0 +1,440 @@
+"use client";
+
+import type { CSSProperties } from "react";
+import { useEffect, useMemo, useRef } from "react";
+import Image from "next/image";
+import {
+  Camera,
+  ImageIcon,
+  LockKeyhole,
+  MessageCircle,
+  RefreshCw,
+  Sparkles,
+} from "lucide-react";
+
+import type { PrivateRoomMoment } from "@/data/dto/private-room";
+import { MobileShell } from "@/app/_components/core";
+import { useGuestLoginBootstrap } from "@/hooks/use-guest-login-bootstrap";
+import { ROUTES } from "@/router/routes";
+import { useAppNavigator } from "@/router/use-app-navigator";
+import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
+import {
+  usePrivateRoomDispatch,
+  usePrivateRoomState,
+} from "@/stores/private-room";
+import { useUserDispatch } from "@/stores/user/user-context";
+
+import styles from "./private-room-screen.module.css";
+
+const FALLBACK_PROFILE = {
+  name: "Elio Silvestri",
+  handle: "@elio.private",
+  avatar: "/images/chat/pic-chat-elio.png",
+  title: "Elio Private room",
+  subtitle: "Join me, unlock my private room",
+  bio: "Soft moments, private photos, and a little sweetness just for you.",
+} as const;
+
+export function PrivateRoomScreen() {
+  const navigator = useAppNavigator();
+  const authState = useAuthState();
+  const authDispatch = useAuthDispatch();
+  const userDispatch = useUserDispatch();
+  const state = usePrivateRoomState();
+  const dispatch = usePrivateRoomDispatch();
+  const previousLoginStatusRef = useRef(authState.loginStatus);
+  const lastUnlockSuccessNonceRef = useRef(0);
+
+  useGuestLoginBootstrap({
+    dispatch: authDispatch,
+    hasInitialized: authState.hasInitialized,
+    isLoading: authState.isLoading,
+    loginStatus: authState.loginStatus,
+  });
+
+  useEffect(() => {
+    if (!authState.hasInitialized || authState.isLoading) return;
+    if (authState.loginStatus === "notLoggedIn") return;
+
+    const previousLoginStatus = previousLoginStatusRef.current;
+    previousLoginStatusRef.current = authState.loginStatus;
+
+    if (state.status === "idle") {
+      dispatch({ type: "PrivateRoomInit" });
+      return;
+    }
+
+    if (
+      previousLoginStatus !== authState.loginStatus &&
+      state.status !== "loading"
+    ) {
+      dispatch({ type: "PrivateRoomRefresh" });
+    }
+  }, [
+    authState.hasInitialized,
+    authState.isLoading,
+    authState.loginStatus,
+    dispatch,
+    state.status,
+  ]);
+
+  useEffect(() => {
+    const request = state.unlockPaywallRequest;
+    if (!request) return;
+
+    if (
+      authState.loginStatus === "guest" ||
+      authState.loginStatus === "notLoggedIn"
+    ) {
+      navigator.openAuth(ROUTES.privateRoom);
+    } else {
+      navigator.openSubscription({ type: "topup" });
+    }
+    dispatch({ type: "PrivateRoomUnlockPaywallConsumed" });
+  }, [
+    authState.loginStatus,
+    dispatch,
+    navigator,
+    state.unlockPaywallRequest,
+  ]);
+
+  useEffect(() => {
+    if (state.unlockSuccessNonce <= lastUnlockSuccessNonceRef.current) return;
+    lastUnlockSuccessNonceRef.current = state.unlockSuccessNonce;
+    userDispatch({ type: "UserFetch" });
+  }, [state.unlockSuccessNonce, userDispatch]);
+
+  const profile = state.profile;
+  const displayName =
+    profile?.displayName || profile?.authorName || FALLBACK_PROFILE.name;
+  const avatarUrl = profile?.avatarUrl || FALLBACK_PROFILE.avatar;
+  const title = profile?.title || FALLBACK_PROFILE.title;
+  const subtitle = profile?.subtitle || FALLBACK_PROFILE.subtitle;
+  const pendingMoment = useMemo(
+    () =>
+      state.items.find(
+        (item) => item.momentId === state.pendingConfirmMomentId,
+      ) ?? null,
+    [state.items, state.pendingConfirmMomentId],
+  );
+
+  const handleTopUpClick = () => {
+    if (
+      authState.loginStatus === "guest" ||
+      authState.loginStatus === "notLoggedIn"
+    ) {
+      navigator.openAuth(ROUTES.privateRoom);
+      return;
+    }
+    navigator.openSubscription({ type: "topup" });
+  };
+
+  return (
+    <MobileShell background="#fff7ed">
+      <main className={styles.shell}>
+        <div className={styles.backgroundGlowOne} />
+        <div className={styles.backgroundGlowTwo} />
+
+        <section className={styles.hero} aria-labelledby="private-room-title">
+          <div className={styles.heroTopline}>
+            <span className={styles.liveDot} aria-hidden="true" />
+            <span>Private room is open</span>
+          </div>
+
+          <div className={styles.identity}>
+            <div className={styles.avatarFrame}>
+              <Image
+                src={avatarUrl}
+                alt={displayName}
+                width={72}
+                height={72}
+                priority
+              />
+            </div>
+
+            <div className={styles.identityText}>
+              <h1 id="private-room-title" className={styles.title}>
+                {displayName}
+              </h1>
+              <p className={styles.handle}>{title}</p>
+            </div>
+          </div>
+
+          <p className={styles.bio}>{subtitle || FALLBACK_PROFILE.bio}</p>
+
+          <button
+            type="button"
+            className={styles.primaryCta}
+            onClick={handleTopUpClick}
+          >
+            <Sparkles size={16} aria-hidden="true" />
+            <span>Top up credits</span>
+          </button>
+        </section>
+
+        <section className={styles.postsSection} aria-labelledby="posts-title">
+          <div className={styles.sectionHeader}>
+            <div>
+              <p className={styles.kicker}>Posts</p>
+              <h2 id="posts-title" className={styles.sectionTitle}>
+                Private moments
+              </h2>
+            </div>
+            <span className={styles.postCount}>{state.items.length}</span>
+          </div>
+
+          {state.errorMessage ? (
+            <StatusCard
+              message={state.errorMessage}
+              actionLabel="Retry"
+              onAction={() => dispatch({ type: "PrivateRoomRefresh" })}
+            />
+          ) : null}
+
+          {state.isLoading && state.items.length === 0 ? (
+            <StatusCard message="Loading private moments..." />
+          ) : null}
+
+          {!state.isLoading && state.items.length === 0 && !state.errorMessage ? (
+            <StatusCard
+              message="No private moments yet."
+              actionLabel="Refresh"
+              onAction={() => dispatch({ type: "PrivateRoomRefresh" })}
+            />
+          ) : null}
+
+          <div className={styles.timeline}>
+            {state.items.map((moment, index) => (
+              <PrivateRoomPostCard
+                key={moment.momentId}
+                moment={moment}
+                displayName={displayName}
+                avatarUrl={avatarUrl}
+                index={index}
+                isUnlocking={state.unlockingMomentId === moment.momentId}
+                onUnlock={() =>
+                  dispatch({
+                    type: "PrivateRoomUnlockRequested",
+                    momentId: moment.momentId,
+                  })
+                }
+              />
+            ))}
+          </div>
+
+          {state.hasMore ? (
+            <button
+              type="button"
+              className={styles.loadMoreButton}
+              disabled={state.isLoadingMore}
+              onClick={() => dispatch({ type: "PrivateRoomLoadMore" })}
+            >
+              <RefreshCw size={15} aria-hidden="true" />
+              {state.isLoadingMore ? "Loading..." : "Load more"}
+            </button>
+          ) : null}
+        </section>
+
+        <nav className={styles.bottomNav} aria-label="Private room navigation">
+          <button
+            type="button"
+            className={styles.navButton}
+            onClick={() => navigator.openChat({ replace: false })}
+          >
+            <MessageCircle size={20} aria-hidden="true" />
+            <span>Chat</span>
+          </button>
+          <button
+            type="button"
+            className={`${styles.navButton} ${styles.navButtonActive}`}
+            aria-current="page"
+          >
+            <Camera size={20} aria-hidden="true" />
+            <span>Elio Private room</span>
+          </button>
+        </nav>
+
+        {pendingMoment ? (
+          <UnlockConfirmDialog
+            moment={pendingMoment}
+            isUnlocking={state.isUnlocking}
+            errorMessage={state.unlockErrorMessage}
+            onCancel={() => dispatch({ type: "PrivateRoomUnlockCancelled" })}
+            onConfirm={() => dispatch({ type: "PrivateRoomUnlockConfirmed" })}
+          />
+        ) : state.unlockErrorMessage ? (
+          <div className={styles.toast} role="status">
+            {state.unlockErrorMessage}
+          </div>
+        ) : null}
+      </main>
+    </MobileShell>
+  );
+}
+
+function PrivateRoomPostCard({
+  moment,
+  displayName,
+  avatarUrl,
+  index,
+  isUnlocking,
+  onUnlock,
+}: {
+  moment: PrivateRoomMoment;
+  displayName: string;
+  avatarUrl: string;
+  index: number;
+  isUnlocking: boolean;
+  onUnlock: () => void;
+}) {
+  const isLocked = moment.locked || moment.lockDetail.locked;
+  const imageUrls = moment.images
+    .filter((image) => !image.locked && image.url)
+    .map((image) => image.url as string);
+  const photoCount = moment.mediaCount || moment.images.length || 1;
+
+  return (
+    <article
+      className={styles.postCard}
+      style={{ "--reveal-index": index } as CSSProperties}
+    >
+      <header className={styles.postHeader}>
+        <div className={styles.postAuthor}>
+          <Image
+            src={avatarUrl}
+            alt=""
+            width={38}
+            height={38}
+            className={styles.postAvatar}
+          />
+          <div>
+            <p className={styles.authorName}>{moment.author.name || displayName}</p>
+            <p className={styles.authorSubline}>
+              {moment.title || "Private room drop"}
+            </p>
+          </div>
+        </div>
+        <time className={styles.postTime}>
+          {moment.timeText || formatMomentTime(moment.publishedAt)}
+        </time>
+      </header>
+
+      {moment.text || moment.content ? (
+        <p className={styles.postText}>{moment.text || moment.content}</p>
+      ) : null}
+
+      {isLocked ? (
+        <button
+          type="button"
+          className={styles.lockedPreview}
+          disabled={isUnlocking}
+          onClick={onUnlock}
+          aria-label={`Unlock ${photoCount} private room photos from ${displayName}`}
+        >
+          <div className={styles.previewIcon}>
+            <LockKeyhole size={18} aria-hidden="true" />
+          </div>
+          <div className={styles.previewText}>
+            <strong>{moment.unlockCost} credits</strong>
+            <span>{moment.textPreview || "Unlock to view"}</span>
+            <small>
+              <ImageIcon size={13} aria-hidden="true" />
+              {photoCount} {photoCount === 1 ? "photo" : "photos"}
+            </small>
+          </div>
+        </button>
+      ) : (
+        <div className={styles.imageGrid}>
+          {imageUrls.map((url, imageIndex) => (
+            <Image
+              key={`${moment.momentId}-${imageIndex}`}
+              src={url}
+              alt=""
+              width={420}
+              height={420}
+              className={styles.unlockedImage}
+              sizes="(max-width: 540px) 86vw, 460px"
+            />
+          ))}
+        </div>
+      )}
+    </article>
+  );
+}
+
+function UnlockConfirmDialog({
+  moment,
+  isUnlocking,
+  errorMessage,
+  onCancel,
+  onConfirm,
+}: {
+  moment: PrivateRoomMoment;
+  isUnlocking: boolean;
+  errorMessage: string | null;
+  onCancel: () => void;
+  onConfirm: () => void;
+}) {
+  return (
+    <div className={styles.dialogOverlay} role="alertdialog" aria-modal="true">
+      <div className={styles.dialog}>
+        <h2 className={styles.dialogTitle}>Unlock private moment?</h2>
+        <p className={styles.dialogCopy}>
+          This will use {moment.unlockCost} credits.
+        </p>
+        {errorMessage ? (
+          <p className={styles.dialogError}>{errorMessage}</p>
+        ) : null}
+        <div className={styles.dialogActions}>
+          <button
+            type="button"
+            className={styles.dialogSecondary}
+            disabled={isUnlocking}
+            onClick={onCancel}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={styles.dialogPrimary}
+            disabled={isUnlocking}
+            onClick={onConfirm}
+          >
+            {isUnlocking ? "Unlocking..." : "Unlock"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatusCard({
+  message,
+  actionLabel,
+  onAction,
+}: {
+  message: string;
+  actionLabel?: string;
+  onAction?: () => void;
+}) {
+  return (
+    <div className={styles.statusCard}>
+      <p>{message}</p>
+      {actionLabel && onAction ? (
+        <button type="button" onClick={onAction}>
+          {actionLabel}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function formatMomentTime(value: string | null): string {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
+}

src/app/profile/page.tsx

@@ -1,5 +1,5 @@
-import { ProfileScreen } from "./profile-screen";
+import { redirect } from "next/navigation";
 
 export default function ProfilePage() {
-  return <ProfileScreen />;
+  redirect("/private-room");
 }

src/app/profile/profile-screen.tsx

@@ -1,164 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { Camera, ImageIcon, LockKeyhole, MessageCircle, Sparkles } from "lucide-react";
-
-import { MobileShell } from "@/app/_components/core";
-import { useAppNavigator } from "@/router/use-app-navigator";
-
-import styles from "./profile-screen.module.css";
-
-const PROFILE = {
-  name: "Elio Silvestri",
-  handle: "@elio.private",
-  avatar: "/images/chat/pic-chat-elio.png",
-  postsCount: 10,
-  cta: "Join Me, unlock my private zoom",
-  bio: "Soft moments, private photos, and a little sweetness just for you.",
-} as const;
-
-const POSTS = [
-  {
-    id: "private-zoom-1",
-    timeAgo: "1 day ago",
-    price: "XXX coins",
-    photoCount: "7 photos",
-  },
-  {
-    id: "private-zoom-2",
-    timeAgo: "30 days ago",
-    price: "XXX coins",
-    photoCount: "7 photos",
-  },
-] as const;
-
-export function ProfileScreen() {
-  const navigator = useAppNavigator();
-
-  const openVipSubscription = () => {
-    navigator.openSubscription({ type: "vip" });
-  };
-
-  return (
-    <MobileShell background="#fff7ed">
-      <main className={styles.shell}>
-        <div className={styles.backgroundGlowOne} />
-        <div className={styles.backgroundGlowTwo} />
-
-        <section className={styles.hero} aria-labelledby="profile-title">
-          <div className={styles.heroTopline}>
-            <span className={styles.liveDot} aria-hidden="true" />
-            <span>Private zoom is open</span>
-          </div>
-
-          <div className={styles.identity}>
-            <div className={styles.avatarFrame}>
-              <Image
-                src={PROFILE.avatar}
-                alt={PROFILE.name}
-                width={72}
-                height={72}
-                priority
-              />
-            </div>
-
-            <div className={styles.identityText}>
-              <h1 id="profile-title" className={styles.title}>
-                {PROFILE.name}
-              </h1>
-              <p className={styles.handle}>{PROFILE.handle}</p>
-            </div>
-          </div>
-
-          <p className={styles.bio}>{PROFILE.bio}</p>
-
-          <button
-            type="button"
-            className={styles.primaryCta}
-            onClick={openVipSubscription}
-          >
-            <Sparkles size={16} aria-hidden="true" />
-            <span>{PROFILE.cta}</span>
-          </button>
-        </section>
-
-        <section className={styles.postsSection} aria-labelledby="posts-title">
-          <div className={styles.sectionHeader}>
-            <div>
-              <p className={styles.kicker}>Posts</p>
-              <h2 id="posts-title" className={styles.sectionTitle}>
-                Private moments
-              </h2>
-            </div>
-            <span className={styles.postCount}>{PROFILE.postsCount}</span>
-          </div>
-
-          <div className={styles.timeline}>
-            {POSTS.map((post, index) => (
-              <article
-                key={post.id}
-                className={styles.postCard}
-                style={{ "--reveal-index": index } as React.CSSProperties}
-              >
-                <header className={styles.postHeader}>
-                  <div className={styles.postAuthor}>
-                    <Image
-                      src={PROFILE.avatar}
-                      alt=""
-                      width={38}
-                      height={38}
-                      className={styles.postAvatar}
-                    />
-                    <div>
-                      <p className={styles.authorName}>{PROFILE.name}</p>
-                      <p className={styles.authorSubline}>Private zoom drop</p>
-                    </div>
-                  </div>
-                  <time className={styles.postTime}>{post.timeAgo}</time>
-                </header>
-
-                <button
-                  type="button"
-                  className={styles.lockedPreview}
-                  onClick={openVipSubscription}
-                  aria-label={`Unlock ${post.photoCount} from ${PROFILE.name}`}
-                >
-                  <div className={styles.previewIcon}>
-                    <LockKeyhole size={18} aria-hidden="true" />
-                  </div>
-                  <div className={styles.previewText}>
-                    <strong>{post.price}</strong>
-                    <span>Unlock to view</span>
-                    <small>
-                      <ImageIcon size={13} aria-hidden="true" />
-                      {post.photoCount}
-                    </small>
-                  </div>
-                </button>
-              </article>
-            ))}
-          </div>
-        </section>
-
-        <nav className={styles.bottomNav} aria-label="Profile navigation">
-          <button
-            type="button"
-            className={styles.navButton}
-            onClick={() => navigator.openChat({ replace: false })}
-          >
-            <MessageCircle size={20} aria-hidden="true" />
-            <span>Chat</span>
-          </button>
-          <button
-            type="button"
-            className={`${styles.navButton} ${styles.navButtonActive}`}
-            aria-current="page"
-          >
-            <Camera size={20} aria-hidden="true" />
-            <span>Elio Private zoom</span>
-          </button>
-        </nav>
-      </main>
-    </MobileShell>
-  );
-}