chore(demo): split user auth from app section

Author: fadi-george

examples/build.md

@@ -122,7 +122,7 @@ Asset requirements:
   `https://raw.githubusercontent.com/OneSignal/sdk-shared/refs/heads/main/assets/onesignal_logo.svg`
 - Save to demo assets (for example `src/assets/onesignal_logo.svg`) and render it in the header component used by this demo (`src/pages/Home.tsx`) via import:
   `import OneSignalLogo from '../assets/onesignal_logo.svg';`
-- Use the logo as the `OneSignal` wordmark and show separate `Sample App` text
+- Use the logo as the `OneSignal` wordmark and show separate `Cordova` text
 - Do not inline long SVG paths in `Home.tsx`/header JSX
 
 - Download padded icon PNG:
@@ -442,7 +442,7 @@ User Section layout (separate section card titled "User", placed after App Secti
 2. `LOGIN USER` button:
    - Shows `LOGIN USER` when no user is logged in
    - Shows `SWITCH USER` when a user is logged in
-   - Opens modal with empty `External User Id` field
+   - Opens "Login User" modal with empty `External User Id` field
 
 3. `LOGOUT USER` button (only visible when a user is logged in)
 
@@ -507,8 +507,8 @@ Send In-App Message Section:
 Aliases Section:
 
 - Section title includes info icon (use `MdInfoOutline` from `react-icons/md`).
-- List showing key-value pairs (read-only, no delete icons).
-- Each item shows: Label | ID.
+- Stacked key-value list (read-only, no delete icons).
+- Each item shows Label on top, ID below (see styles.md "Stacked" list layout).
 - Hide special alias keys from display:
   - `external_id`
   - `onesignal_id`

examples/demo/src/App.tsx

@@ -1,10 +1,13 @@
 import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 import { Redirect, Route } from 'react-router-dom';
+import { StatusBar, Style } from '@capacitor/status-bar';
 import { AppContextProvider } from './context/AppContext';
 import Home from './pages/Home';
 import Secondary from './pages/Secondary';
 
+StatusBar.setStyle({ style: Style.Dark }).catch(() => {});
+
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
 

examples/demo/src/components/ListWidgets.tsx

@@ -1,6 +1,8 @@
-import type { FC } from 'react';
+import { type FC, useState } from 'react';
 import { MdClose } from 'react-icons/md';
 
+const COLLAPSE_THRESHOLD = 5;
+
 export type PairItem = {
   key: string;
   value: string;
@@ -36,7 +38,7 @@ export const PairList: FC<PairListProps> = ({
       items.map((item) => (
         <div key={item.key} className="list-item two-line">
           <div>
-            <strong>{item.key}</strong>
+            <span className="list-key">{item.key}</span>
             <span>{item.value}</span>
           </div>
           {onRemove ? (
@@ -60,25 +62,43 @@ export const SingleList: FC<SingleListProps> = ({
   items,
   emptyText,
   onRemove,
-}) => (
-  <div className="card list-card">
-    {items.length ? (
-      items.map((item) => (
-        <div key={item} className="list-item">
-          <span>{item}</span>
-          {onRemove ? (
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const showAll = expanded || items.length <= COLLAPSE_THRESHOLD;
+  const displayItems = showAll ? items : items.slice(0, COLLAPSE_THRESHOLD);
+  const hiddenCount = items.length - COLLAPSE_THRESHOLD;
+
+  return (
+    <div className="card list-card">
+      {items.length ? (
+        <>
+          {displayItems.map((item) => (
+            <div key={item} className="list-item">
+              <span>{item}</span>
+              {onRemove ? (
+                <button
+                  type="button"
+                  className="delete-btn"
+                  onClick={() => onRemove(item)}
+                >
+                  <MdClose />
+                </button>
+              ) : null}
+            </div>
+          ))}
+          {!showAll && hiddenCount > 0 && (
             <button
               type="button"
-              className="delete-btn"
-              onClick={() => onRemove(item)}
+              className="more-link"
+              onClick={() => setExpanded(true)}
             >
-              <MdClose />
+              {hiddenCount} more
             </button>
-          ) : null}
-        </div>
-      ))
-    ) : (
-      <EmptyState text={emptyText} />
-    )}
-  </div>
-);
+          )}
+        </>
+      ) : (
+        <EmptyState text={emptyText} />
+      )}
+    </div>
+  );
+};

examples/demo/src/components/modals/CustomNotificationModal.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
 import type { FC } from 'react';
+import { useEffect, useState } from 'react';
 import ModalShell from './ModalShell';
 
 interface CustomNotificationModalProps {
@@ -41,7 +41,7 @@ const CustomNotificationModal: FC<CustomNotificationModalProps> = ({
           onChange={(event) => setTitle(event.target.value)}
           placeholder="Title"
         />
-        <textarea
+        <input
           value={body}
           onChange={(event) => setBody(event.target.value)}
           placeholder="Body"
@@ -50,7 +50,9 @@ const CustomNotificationModal: FC<CustomNotificationModalProps> = ({
           <button type="button" onClick={onClose}>
             Cancel
           </button>
-          <button type="submit">Send</button>
+          <button type="submit" disabled={!title.trim() || !body.trim()}>
+            Send
+          </button>
         </div>
       </form>
     </ModalShell>

examples/demo/src/components/modals/OutcomeModal.tsx

@@ -27,7 +27,6 @@ const OutcomeModal: FC<OutcomeModalProps> = ({ open, onClose, onSubmit }) => {
     <ModalShell open={open}>
       <form
         autoCapitalize="off"
-        className="outcome-modal"
         onSubmit={(event) => {
           event.preventDefault();
           const trimmed = name.trim();

examples/demo/src/components/sections/AppSection.tsx

@@ -1,30 +1,21 @@
 import { IonToggle } from '@ionic/react';
 import type { FC } from 'react';
-import ActionButton from '../ActionButton';
 
 interface AppSectionProps {
   appId: string;
   consentRequired: boolean;
   privacyConsentGiven: boolean;
-  externalUserId: string | undefined;
   onToggleConsent: (checked: boolean) => void;
   onTogglePrivacyConsent: (checked: boolean) => void;
-  onLogin: () => void;
-  onLogout: () => void;
 }
 
 const AppSection: FC<AppSectionProps> = ({
   appId,
   consentRequired,
   privacyConsentGiven,
-  externalUserId,
   onToggleConsent,
   onTogglePrivacyConsent,
-  onLogin,
-  onLogout,
 }) => {
-  const isLoggedIn = Boolean(externalUserId);
-
   return (
     <section className="section">
       <h2>APP</h2>
@@ -69,27 +60,6 @@ const AppSection: FC<AppSectionProps> = ({
           </>
         ) : null}
       </div>
-      <div className="card kv-card">
-        <div className="kv-row">
-          <span>Status</span>
-          <span className={isLoggedIn ? 'text-success' : undefined}>
-            {isLoggedIn ? 'Logged In' : 'Anonymous'}
-          </span>
-        </div>
-        <div className="divider" />
-        <div className="kv-row">
-          <span>External ID</span>
-          <span className="id-value">{externalUserId ?? '–'}</span>
-        </div>
-      </div>
-      <ActionButton type="button" onClick={onLogin}>
-        {isLoggedIn ? 'SWITCH USER' : 'LOGIN USER'}
-      </ActionButton>
-      {isLoggedIn ? (
-        <ActionButton variant="outline" type="button" onClick={onLogout}>
-          LOGOUT USER
-        </ActionButton>
-      ) : null}
     </section>
   );
 };

examples/demo/src/components/sections/UserSection.tsx

@@ -0,0 +1,45 @@
+import type { FC } from 'react';
+import ActionButton from '../ActionButton';
+
+interface UserSectionProps {
+  externalUserId: string | undefined;
+  onLogin: () => void;
+  onLogout: () => void;
+}
+
+const UserSection: FC<UserSectionProps> = ({
+  externalUserId,
+  onLogin,
+  onLogout,
+}) => {
+  const isLoggedIn = Boolean(externalUserId);
+
+  return (
+    <section className="section">
+      <h2>USER</h2>
+      <div className="card kv-card">
+        <div className="kv-row">
+          <span>Status</span>
+          <span className={isLoggedIn ? 'text-success' : undefined}>
+            {isLoggedIn ? 'Logged In' : 'Anonymous'}
+          </span>
+        </div>
+        <div className="divider" />
+        <div className="kv-row">
+          <span>External ID</span>
+          <span className="id-value">{externalUserId ?? '–'}</span>
+        </div>
+      </div>
+      <ActionButton type="button" onClick={onLogin}>
+        {isLoggedIn ? 'SWITCH USER' : 'LOGIN USER'}
+      </ActionButton>
+      {isLoggedIn ? (
+        <ActionButton variant="outline" type="button" onClick={onLogout}>
+          LOGOUT USER
+        </ActionButton>
+      ) : null}
+    </section>
+  );
+};
+
+export default UserSection;