fix(splash): hide experimental splash components

src/app/feedback/__tests__/feedback-screen.test.tsx

@@ -59,6 +59,14 @@ describe("FeedbackScreen", () => {
       container.querySelector<HTMLInputElement>('input[value="problem"]')
         ?.checked,
     ).toBe(true);
+    expect(container.textContent).toContain(
+      "Minimum 10 characters required.",
+    );
+    expect(
+      container
+        .querySelector("textarea")
+        ?.getAttribute("aria-describedby"),
+    ).toBe("feedback-content-hint");
   });
 
   it("submits valid text and renders the feedback id", async () => {

src/app/feedback/feedback-screen.module.css

@@ -238,6 +238,14 @@ h2.fieldLabel {
   font-weight: 570;
 }
 
+.contentHint {
+  margin: -6px 0 0;
+  color: #998b90;
+  font-size: 11px;
+  font-weight: 570;
+  line-height: 1.4;
+}
+
 .imageCount {
   flex: 0 0 auto;
   color: #8d7c82;

src/app/feedback/feedback-screen.tsx

@@ -25,6 +25,7 @@ import {
   FEEDBACK_IMAGE_LIMIT,
 } from "./feedback-image";
 import {
+  FEEDBACK_CONTENT_MIN_LENGTH,
   FEEDBACK_CONTENT_MAX_LENGTH,
   useFeedbackSubmission,
 } from "./use-feedback-submission";
@@ -143,9 +144,13 @@ export function FeedbackScreen() {
             <label className={styles.fieldLabel} htmlFor="feedback-content">
               Describe your feedback
             </label>
+            <p id="feedback-content-hint" className={styles.contentHint}>
+              Minimum {FEEDBACK_CONTENT_MIN_LENGTH} characters required.
+            </p>
             <div className={styles.textareaFrame}>
               <textarea
                 id="feedback-content"
+                aria-describedby="feedback-content-hint"
                 value={form.content}
                 maxLength={FEEDBACK_CONTENT_MAX_LENGTH}
                 disabled={form.isSubmitting}

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

@@ -31,10 +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) +
-        var(--app-bottom-nav-height, 64px)
-    )
+    calc(var(--page-padding-y, 20px) + var(--app-safe-bottom, 0px))
     calc(var(--page-padding-x, 26px) + var(--app-safe-left, 0px));
 }
 

src/app/splash/splash-screen.tsx

@@ -2,29 +2,31 @@
 
 import { useEffect } from "react";
 
-import { AppBottomNav, MobileShell } from "@/app/_components/core";
+import { MobileShell } from "@/app/_components/core";
+// import { AppBottomNav } from "@/app/_components/core";
 import { useAppNavigator } from "@/router/use-app-navigator";
 import {
   useActiveCharacter,
   useActiveCharacterRoutes,
 } from "@/providers/character-provider";
-import { useAuthState } from "@/stores/auth/auth-context";
+// import { useAuthState } from "@/stores/auth/auth-context";
 import { pwaUtil } from "@/utils/pwa";
 
 import {
   SplashBackground,
   SplashButton,
   SplashContent,
-  SplashLatestMessage,
+  // SplashLatestMessage,
   SplashLogo,
 } from "./components";
-import { useSplashLatestMessage } from "./hooks/use-splash-latest-message";
+// import { useSplashLatestMessage } from "./hooks/use-splash-latest-message";
 import styles from "./components/splash-screen.module.css";
 
 export function SplashScreen() {
   const navigator = useAppNavigator();
   const character = useActiveCharacter();
   const characterRoutes = useActiveCharacterRoutes();
+  /*
   const authState = useAuthState();
   const latestMessage = useSplashLatestMessage({
     characterId: character.id,
@@ -32,14 +34,17 @@ export function SplashScreen() {
     isAuthLoading: authState.isLoading,
     loginStatus: authState.loginStatus,
   });
+  */
 
   const handleStartChat = () => {
     navigator.openChat({ replace: true });
   };
 
+  /*
   const handleOpenPrivateRoom = () => {
     navigator.push(characterRoutes.privateRoom, { scroll: false });
   };
+  */
 
   const handleOpenSplash = () => {
     navigator.push(characterRoutes.splash, { scroll: false });
@@ -58,6 +63,7 @@ export function SplashScreen() {
         <div className={styles.content}>
           <SplashLogo />
           <div className={styles.spacer} />
+          {/*
           <SplashLatestMessage
             message={latestMessage.message}
             characterName={character.shortName}
@@ -65,6 +71,7 @@ export function SplashScreen() {
             isLoading={latestMessage.isLoading}
             onOpenChat={handleStartChat}
           />
+          */}
           <SplashContent />
           <div className={styles.buttonArea}>
             <SplashButton onStartChat={handleStartChat} />
@@ -75,12 +82,14 @@ export function SplashScreen() {
             24/7 online | Chat | Companion | Heal | Sweet moments
           </p>
         </div>
+        {/*
         <AppBottomNav
           activeItem="chat"
           privateRoomLabel={character.copy.privateRoomTitle}
           onChatClick={handleOpenSplash}
           onPrivateRoomClick={handleOpenPrivateRoom}
         />
+        */}
       </div>
     </MobileShell>
   );