chore(demo): split user auth from app section

fadi-george · fadi-george · commit 4fed4fdb34f5 · 2026-02-23T22:09:31.000-08:00
diff --git a/examples/build.md b/examples/build.md
@@ -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`
diff --git a/examples/demo/src/components/ListWidgets.tsx b/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>
+  );
+};
diff --git a/examples/demo/src/components/modals/CustomNotificationModal.tsx b/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>
diff --git a/examples/demo/src/components/modals/OutcomeModal.tsx b/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();
diff --git a/examples/demo/src/components/sections/AppSection.tsx b/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>
   );
 };
diff --git a/examples/demo/src/components/sections/UserSection.tsx b/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;
diff --git a/examples/demo/src/pages/Home.css b/examples/demo/src/pages/Home.css
@@ -32,7 +32,7 @@
   --radius-card: 12px;
   --radius-button: 8px;
   --radius-input: 8px;
-  --radius-modal: 16px;
+  --radius-modal: 28px;
 
   /* Shadows (elevation 1) */
   --shadow-card: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
@@ -58,8 +58,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 700;
-  letter-spacing: 0.2px;
 }
 
 .brand-title {
@@ -77,7 +75,6 @@
   font-size: var(--font-size-body);
   font-weight: 400;
   color: #fff;
-  opacity: 0.9;
 }
 
 .icon-btn {
@@ -280,9 +277,9 @@
   flex-direction: column;
 }
 
-.list-item.two-line strong {
+.list-item.two-line .list-key {
   font-size: var(--font-size-body);
-  font-weight: 500;
+  color: inherit;
 }
 
 .list-item.two-line span {
@@ -316,6 +313,18 @@
   font-size: 18px;
 }
 
+.more-link {
+  background: transparent;
+  border: 0;
+  color: var(--os-primary);
+  font-size: var(--font-size-body);
+  font-weight: 500;
+  padding: 4px 0;
+  cursor: pointer;
+  text-align: center;
+  width: 100%;
+}
+
 .modal-backdrop {
   position: fixed;
   inset: 0;
@@ -331,23 +340,36 @@
   width: min(640px, 100%);
   background: var(--os-card-background);
   border-radius: var(--radius-modal);
-  padding: 18px;
+  padding: 24px;
 }
 
 .modal-card h3 {
   margin: 0 0 14px;
-  font-size: 22px;
-  font-weight: 700;
+  font-size: 24px;
+  font-weight: 400;
 }
 
 .modal-card input,
 .modal-card textarea {
   width: 100%;
-  border: 1px solid #ccd2da;
+  border: 1px solid var(--os-grey-700);
   border-radius: var(--radius-input);
   padding: 14px 12px;
   font-size: 17px;
   margin-bottom: 10px;
+  color: inherit;
+}
+
+.modal-card input:focus,
+.modal-card textarea:focus {
+  outline: 2px solid var(--os-primary);
+  outline-offset: -1px;
+  border-color: transparent;
+}
+
+.modal-card input::placeholder,
+.modal-card textarea::placeholder {
+  color: var(--os-grey-600);
 }
 
 .modal-card textarea {
@@ -407,20 +429,21 @@
 .modal-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 10px;
+  gap: 8px;
   margin-top: 24px;
 }
 
 .modal-actions button {
   border: 0;
   background: transparent;
-  color: #5b636f;
-  font-size: var(--font-size-body-large);
-  font-weight: 700;
+  color: var(--os-primary);
+  font-size: var(--font-size-body);
+  font-weight: 500;
+  padding: 8px 12px;
 }
 
-.modal-actions button:last-child {
-  color: var(--os-primary);
+.modal-actions button:disabled {
+  color: var(--os-grey-500);
 }
 
 .tooltip-options {
@@ -435,14 +458,10 @@
   margin: 4px 0 0;
 }
 
-.outcome-modal {
-  padding: 2px;
-}
-
 .outcome-title {
   margin-bottom: 16px;
   font-size: 24px;
-  font-weight: 700;
+  font-weight: 400;
 }
 
 .outcome-radio-list label {
diff --git a/examples/demo/src/pages/Home.tsx b/examples/demo/src/pages/Home.tsx
