feat(splash): add latest message entry

src/app/_components/core/app-bottom-nav.module.css

@@ -0,0 +1,63 @@
+.root {
+  position: fixed;
+  right: max(calc((100vw - var(--app-max-width, 540px)) / 2), 0px);
+  bottom: 0;
+  left: max(calc((100vw - var(--app-max-width, 540px)) / 2), 0px);
+  z-index: 30;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  box-sizing: border-box;
+  width: min(100vw, var(--app-max-width, 540px));
+  margin: 0 auto;
+  padding:
+    10px
+    calc(var(--app-safe-right, 0px) + 14px)
+    calc(var(--app-safe-bottom, 0px) + 10px)
+    calc(var(--app-safe-left, 0px) + 14px);
+  border-top: 1px solid rgba(44, 29, 34, 0.08);
+  background: rgba(255, 255, 255, 0.86);
+  box-shadow: 0 -18px 48px rgba(53, 34, 40, 0.09);
+  backdrop-filter: blur(18px);
+}
+
+.button {
+  display: flex;
+  min-height: 54px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px solid transparent;
+  border-radius: 18px;
+  background: transparent;
+  color: #8d777e;
+  cursor: pointer;
+  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;
+}
+
+.button:hover {
+  background: rgba(255, 116, 159, 0.08);
+  color: #2d2024;
+}
+
+.button:active {
+  transform: scale(0.98);
+}
+
+.button:focus-visible {
+  outline: 2px solid #ff5d95;
+  outline-offset: 3px;
+}
+
+.active {
+  border-color: rgba(255, 116, 159, 0.2);
+  background: linear-gradient(135deg, rgba(255, 244, 236, 0.98), rgba(255, 232, 241, 0.96));
+  color: #201417;
+  box-shadow: 0 10px 24px rgba(255, 116, 159, 0.12);
+}

src/app/_components/core/app-bottom-nav.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Camera, MessageCircle } from "lucide-react";
+
+import styles from "./app-bottom-nav.module.css";
+
+export type AppBottomNavItem = "chat" | "privateRoom";
+
+export interface AppBottomNavProps {
+  activeItem?: AppBottomNavItem | null;
+  onChatClick: () => void;
+  onPrivateRoomClick: () => void;
+}
+
+export function AppBottomNav({
+  activeItem = null,
+  onChatClick,
+  onPrivateRoomClick,
+}: AppBottomNavProps) {
+  return (
+    <nav className={styles.root} aria-label="Primary navigation">
+      <button
+        type="button"
+        className={getButtonClass(activeItem === "chat")}
+        aria-current={activeItem === "chat" ? "page" : undefined}
+        onClick={onChatClick}
+      >
+        <MessageCircle size={20} aria-hidden="true" />
+        <span>Chat</span>
+      </button>
+      <button
+        type="button"
+        className={getButtonClass(activeItem === "privateRoom")}
+        aria-current={activeItem === "privateRoom" ? "page" : undefined}
+        onClick={onPrivateRoomClick}
+      >
+        <Camera size={20} aria-hidden="true" />
+        <span>Elio Private room</span>
+      </button>
+    </nav>
+  );
+}
+
+function getButtonClass(active: boolean): string {
+  return [styles.button, active ? styles.active : ""].filter(Boolean).join(" ");
+}

src/app/_components/core/index.ts

@@ -2,6 +2,7 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from "./app-bottom-nav";
 export * from "./bottom-sheet";
 export * from "./checkbox";
 export * from "./dialog";

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

@@ -40,8 +40,7 @@
 }
 
 .hero,
-.postsSection,
+.postsSection {
-.bottomNav {
   position: relative;
   z-index: 1;
 }
@@ -394,51 +393,6 @@
   margin-top: 16px;
 }
 
-.bottomNav {
-  position: fixed;
-  right: max(calc((100vw - var(--app-max-width, 540px)) / 2), 0px);
-  bottom: 0;
-  left: max(calc((100vw - var(--app-max-width, 540px)) / 2), 0px);
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-  box-sizing: border-box;
-  width: min(100vw, var(--app-max-width, 540px));
-  margin: 0 auto;
-  padding:
-    10px
-    calc(var(--app-safe-right, 0px) + 14px)
-    calc(var(--app-safe-bottom, 0px) + 10px)
-    calc(var(--app-safe-left, 0px) + 14px);
-  border-top: 1px solid rgba(44, 29, 34, 0.08);
-  background: rgba(255, 255, 255, 0.86);
-  box-shadow: 0 -18px 48px rgba(53, 34, 40, 0.09);
-  backdrop-filter: blur(18px);
-}
-
-.navButton {
-  display: flex;
-  min-height: 54px;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  border: 1px solid transparent;
-  border-radius: 18px;
-  background: transparent;
-  color: #8d777e;
-  cursor: pointer;
-  font: inherit;
-  font-size: clamp(12px, 2.963vw, 14px);
-  font-weight: 820;
-}
-
-.navButtonActive {
-  border-color: rgba(255, 116, 159, 0.2);
-  background: linear-gradient(135deg, rgba(255, 244, 236, 0.98), rgba(255, 232, 241, 0.96));
-  color: #201417;
-  box-shadow: 0 10px 24px rgba(255, 116, 159, 0.12);
-}
-
 .dialogOverlay {
   position: fixed;
   inset: 0;
@@ -529,14 +483,12 @@
 
 .primaryCta:active,
 .lockedPreview:active,
-.loadMoreButton: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 {

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

@@ -4,16 +4,14 @@ 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 { AppBottomNav, 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";
@@ -235,24 +233,11 @@ export function PrivateRoomScreen() {
           ) : null}
         </section>
 
-        <nav className={styles.bottomNav} aria-label="Private room navigation">
+        <AppBottomNav
-          <button
+          activeItem="privateRoom"
-            type="button"
+          onChatClick={() => navigator.openChat({ replace: false })}
-            className={styles.navButton}
+          onPrivateRoomClick={() => undefined}
-            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

src/app/splash/components/index.ts

@@ -5,6 +5,7 @@
 export * from "./splash-background";
 export * from "./splash-button";
 export * from "./splash-content";
+export * from "./splash-latest-message";
 export * from "./splash-loading";
 export * from "./splash-logo";
 export * from "./splash-progress";

src/app/splash/components/splash-latest-message.module.css

@@ -0,0 +1,99 @@
+.card {
+  display: grid;
+  width: 100%;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 12px;
+  margin-top: var(--page-section-gap-lg, 26px);
+  padding: 12px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: 24px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1)),
+    rgba(28, 19, 30, 0.18);
+  color: #ffffff;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.18),
+    0 18px 42px rgba(46, 22, 38, 0.18);
+  backdrop-filter: blur(18px);
+  animation: messageFloatIn 0.5s ease 0.08s both;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+}
+
+.card:hover {
+  border-color: rgba(255, 255, 255, 0.38);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.22),
+    0 22px 48px rgba(46, 22, 38, 0.24);
+  transform: translateY(-1px);
+}
+
+.card:active {
+  transform: translateY(1px) scale(0.995);
+}
+
+.card:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.9);
+  outline-offset: 3px;
+}
+
+.avatarWrap {
+  display: grid;
+  width: 48px;
+  height: 48px;
+  place-items: center;
+  border: 2px solid rgba(255, 255, 255, 0.74);
+  border-radius: 18px;
+  background: linear-gradient(145deg, #ffb36d, #ff5d95);
+  box-shadow: 0 10px 24px rgba(255, 95, 128, 0.24);
+  overflow: hidden;
+}
+
+.avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: rgba(255, 255, 255, 0.76);
+  font-size: clamp(11px, 2.593vw, 13px);
+  font-weight: 820;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.message {
+  color: #ffffff;
+  font-size: clamp(14px, 3.333vw, 17px);
+  font-weight: 760;
+  line-height: 1.35;
+}
+
+@keyframes messageFloatIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

src/app/splash/components/splash-latest-message.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import Image from "next/image";
+import { MessageCircle } from "lucide-react";
+
+import styles from "./splash-latest-message.module.css";
+
+export interface SplashLatestMessageProps {
+  onOpenChat: () => void;
+}
+
+export function SplashLatestMessage({
+  onOpenChat,
+}: SplashLatestMessageProps) {
+  return (
+    <button
+      type="button"
+      className={styles.card}
+      onClick={onOpenChat}
+      aria-label="Open latest message from Elio"
+    >
+      <span className={styles.avatarWrap}>
+        <Image
+          src="/images/chat/pic-chat-elio.png"
+          alt=""
+          width={42}
+          height={42}
+          className={styles.avatar}
+        />
+      </span>
+      <span className={styles.copy}>
+        <span className={styles.eyebrow}>
+          <MessageCircle size={13} aria-hidden="true" />
+          Latest message
+        </span>
+        <span className={styles.message}>
+          I saved a sweet little moment for you. Come closer?
+        </span>
+      </span>
+    </button>
+  );
+}

src/app/splash/components/splash-screen.module.css

@@ -31,7 +31,7 @@
   padding:
     calc(var(--page-padding-y, 20px) + var(--app-safe-top, 0px))
     calc(var(--page-padding-x, 26px) + var(--app-safe-right, 0px))
-    calc(var(--spacing-md, 12px) + var(--app-safe-bottom, 0px))
+    calc(var(--spacing-md, 12px) + var(--app-safe-bottom, 0px) + 86px)
     calc(var(--page-padding-x, 26px) + var(--app-safe-left, 0px));
 }
 

src/app/splash/splash-screen.tsx

@@ -2,7 +2,8 @@
 
 import { useEffect } from "react";
 
-import { MobileShell } from "@/app/_components/core";
+import { AppBottomNav, MobileShell } from "@/app/_components/core";
+import { ROUTES } from "@/router/routes";
 import { useAppNavigator } from "@/router/use-app-navigator";
 import { pwaUtil } from "@/utils";
 
@@ -10,6 +11,7 @@ import {
   SplashBackground,
   SplashButton,
   SplashContent,
+  SplashLatestMessage,
   SplashLogo,
 } from "./components";
 import styles from "./components/splash-screen.module.css";
@@ -26,6 +28,10 @@ export function SplashScreen() {
     navigator.openChat({ replace: true });
   };
 
+  const handleOpenPrivateRoom = () => {
+    navigator.push(ROUTES.privateRoom, { scroll: false });
+  };
+
   useEffect(() => {
     pwaUtil.prepareInstallPrompt();
   }, []);
@@ -43,12 +49,18 @@ export function SplashScreen() {
           <div className={styles.buttonArea}>
             <SplashButton onStartChat={handleStartChat} />
           </div>
+          <SplashLatestMessage onOpenChat={handleStartChat} />
           <p className={styles.bottom}>
             Elio Silvestri, Your exclusive AI boyfriend
             <br />
             24/7 online | Chat | Companion | Heal | Sweet moments
           </p>
         </div>
+        <AppBottomNav
+          activeItem={null}
+          onChatClick={handleStartChat}
+          onPrivateRoomClick={handleOpenPrivateRoom}
+        />
       </div>
     </MobileShell>
   );